Digital artist
A documentation page of rambling and experimenting.
@jessiehaseyes
jessiejiranzhai@gmail.com
Digital artist
A documentation page of rambling and experimenting.
@jessiehaseyes
jessiejiranzhai@gmail.com
ICM WEEK9
PROCESS
This week I was really inspired by all pinch gesture could do with ML5(espically impressed with how it can detect each of your finger tips!), so I decided to make something with my hands.
I first thought about the bouncing balls that we did and wanted make create the same popping effect but with my fingers instead of the mouse like we did before. So I created some bubbles that fall from the top of the canvas, and used my index finger to make them disappear from the array by using splice.
Then I wanted to make the action more intentional, so incorporating both thumb and index finger. It was hard to figure out at first since it’s bit different from the pinch drawing example that I was referencing, instead of drawing shapes at the fingers, the position of the fingers act more as a trigger for disappearing so I used distance to detect whether both fingers are within a good range with the bubbles.
After that was done, I wanted to have more liberty of controling the elements on screen, for example dragging them and resize them. At the same time, I changed the shapes of the bubbles and reused my flower shape that I’ve been using throughout this semester and gave them random colors from the color palette that I was using two assignments ago.
It was quite diffuclt to resize since my flowers were made out of several shapes, so I used scale and translate to make sure the flowers stay at the original ratio.
After I was able to resize them, I did’nt find it satisfying to have the chose flower just stuck between my fingers so I wanted to find a way to release them. I used console.log to see the widest distance my index finger and thumb could be and set that as the max value, once it exceeds that limit, the petals would be offested to each direction and when they leave the canvas, they would disappear.
I also tried to reference this example and create particles that be generated after the petals are offsetted, however, I couln’t give it the same garvity and make them stay on the canvas after the flowers disappear since their position is based on the flower’s x and y position, would love to figure it out after!
SOLVED PROBLEMS
- learning how to use ML5 library
- offset petals by using cos
- using gravity
THINGS TO IMPROVE
- make the particles remain on canvas after the petals disappear from the canvas.
- also tried to experiment if I could make the entire canvas darker when I close my eyes but I think there’s no keypoints for upper and under eyelids hehe