Give me the Juice

Youmingzhang
2 min readOct 30, 2020

This week I am exploring the pixels and computer vision technics in p5. The inspiration is I ran out of my favorite mango juice when I am doing my homework but I want it so bad… Then I realized that I can “fake” it using color detection and particles in p5.

Color detector

I basically wrote a color detector/ tracker which p5 will track the pixel I pressed my mouse. And I used that point as the point to attract juice particles from the screen. This is a simple algorithm in computer vision. It just compares the distance of RGB between the point interested and every other pixel. It kind of working with no background noise. I also tried YOLO which is an object detector. Even though it can detect bottles but YOLO took too much time and it's not stable enough. Then I got with the color detector.

Juice!

It is just some random vectors in p5 and colored it to orange. When never the point of interest appears Every juice particle will moving towards that point and disappear when they get too close. After the point disappears, I generated a new juice particle so that I never run out of juice. The attraction function used the newton’s gravitation law equation F = G * m1m2/d. The physics to some time to figure out. Dan’s video helped me a lot.

Maybe OpemCv

I think OpenCV as a computer library also has a javascript version. They have a much more stable code and model to run. I should explore more into it if I will work on computer vision tasks. My color detector is not that stable and YOLO just not working well.

--

--