Hand - Flower Picker

https://editor.p5js.org/[email protected]/sketches/qZmB4C4TS

For this week’s assignment, I created a sketch where users can spawn a flower when pinching their left index and thumb fingers.

Documentation

Recorded.mov

Creation - Code explanation

The flower is created using the class function below. I referenced the project on Open Processing.

• Flower() Code

Inside the drawFlower function, I check whether two fingers meet by using dist() function, and if yes, I added the flower to the flowerArray []. I used true/false statement to prevent adding too many flowers at once.

• drawFlower() Code

Draw() function is where flowers are drawn and disappears. Here, I check whether each flower satisfies the finished() state (measured by opacity) and splice it when it’s finished.

• draw() Code

<aside> 🔐 Reading & Watching:

• ml5.js: Pose Classification with PoseNet and ml5.neuralNetwork()
• Face and hand tracking in the browser with MediaPipe and TensorFlow.js </aside>