How to crop to shape in hand-drawn image?

I’m trying to make a p5.js version of something similar to https://www.youtube.com/watch?v=zBeHOAfemEA where you can draw a fish or other sea creature, take a picture, and have it appear on the screen “swimming” with other fish.

I have a basic sketch working where I can import the photo and have it move around the screen, but I’m having trouble automatically cropping the image and only taking the drawing itself (instead of just the rectangular shape you get automatically when importing an image). I’ve done some searches for queries like “p5 js mask”, “p5 js contour detection”, “p5 js image manipulation”, etc., but can’t quite find what I’m trying to do.

Does anyone have any advice on how to solve the issue or even a better search query to use?

Thanks!

1 Like