bodyPix optimization

[ziyuan-linn]

This PR updates BodyPix's API and optimizes its performance.

• updates bodyPix to the detectStart(), detectStop(), and detect() interface, similar to handpose and bodypose
• deprecates support for the event emitter interface
• changes factory function to ml5.bodyPix(modelName, options, callback). The string modelName specifies the underlying model to use
• adds MediaPipe Selfie Segmentation as an underlying model in addition to BodyPix
• improves performance by generating only one ImageData mask and one p5 Image mask per estimation call. The user specifies which mask to generate by defining the maskType property in the options object as "person", "background", or "parts"
• improves performance by setting the pixels of p5 Image objects directly instead of creating a blob URL
• Update example sketches to use the new API

TODO:

• Update bodyPix's documentation to the new API
• Come up with a new name for bodyPix? since it no longer uses only BodyPix as the underlying model.

Please let me know if I'm missing anything :)

[shiffman]

Come up with a new name for bodyPix? since it no longer uses only BodyPix as the underlying model.

What do you think about calling this ml5.bodySegmentation()? Another option would be ml5.bodySegment()? Here is a list of what we have so far:

ml5.bodypose()
ml5.handpose()
ml5.facemesh()
ml5.imageClassifier()
ml5.soundClassifier()

Parallel language with imageClassifier would be bodySegmenter but that sounds strange to me. Hmmm.

Also, I could imagine a future where we have non-body segmentation models as part of ml5.js. We could consider staying very generic with ml5.segmentation('body') allowing for future possibilities like ml5.segmentation('object') or ml5.segmentation('scene')?

Looking over these:

ml5.bodySegment();
ml5.bodySegmentation();
ml5.bodySegmenter();

I think I lean towards ml5.bodySegmentation()?

[ziyuan-linn]

I think ml5.bodySegmentation() sounds good!

[ziyuan-linn]

I think this PR is ready for review :) I have updated the documentation and renamed the model bodySegmentation. I have also further improved the performance of p5 image generation.

[ziyuan-linn]

It seems like calling the mask() function repeatedly in draw() causes canvas2D to throw a warning. Through it might a an issue on p5's end. I have created an issue in the p5 repo: processing/p5.js#6592.

[ziyuan-linn]

I have updated the maskType property so that the underlying model automatically switches to BodyPix if maskType is "parts". It will also throw a warning if maskType is set to "parts" but modelName is set to "SelfieSegmentation".

I have also switched the behavior of "person" and "background" around. Now, when the segmentation mask is applied on a video through p5's mask() function, the effects are the following:

• maskType: "background": You only see the body.
• maskType: "person": You only see the background.

[shiffman]

I've run all of the examples and they look great! I'm going to go ahead and merge this branch. We can make adjustments and/or add new examples later. @MOQN you may especially be excited to test this!

@ziyuan-linn what do you think about doing another temporary release and adding these examples to the web editor collection + preliminary documentation?

cc @sproutleaf to keep the website team in the loop!

[ziyuan-linn]

@shiffman Thank you for reviewing this PR. I am happy to do another temporary release! Some quick questions on top of my mind: Do you think it is worth it to have a basic changelog/release notes for the alpha releases? The current version is 0.20.0-alpha.3, would 0.20.0-alpha.4 be appropriate for the next release?

cc: @sproutleaf