Please click on the canvas to attract the Jellabi

Bounce Bounce Jellabi!

Tools: Javascript libraries p5.js / toxiclibs.js 


This project is a series of animation sketches of bouncing abstract shapes. It is meant to create natural feelings in the animations on “Shekit”(my previous app sketch) by implementing a physics engine with a javascript library called Toxiclib.js. The abstract shapes, which I named as “Jellabi”, replace the venue icon balls in Shekit, and behave more naturally because now they have physics attributes just like in the real world. The whole canvas got bouncy surfaces on all four sides, and so do bodies of Jellabi. I constructed the Jellabi bodies by connecting their centroid to points on the edge and points to points on the edge on their circular shapes with bunch of springs. The Jellabi bodies bounce off of each other and deform as if they are made out of jelly-like materials. 


Spring - shape study 1

Shapes of the Jellabi bodies are different depending on which springs I connect or disconnect. I got the most satisfying result when I disconnected springs that connect the centroid to points on the edge of Jellabi bodies. The Jellabi bodies can have the lines of disconnected springs (spotlight-looking lines) or not depending on their opacity (255 to 0). 

Spring - shape study 2

 Favorite variations of Jellabi bodies.

Spring - shape study 3

Another experiment on varying shapes of the Jellabi bodies. To make the body more rigid, I tried putting ribs inside of the Jellabi bodies. I connected the first and forth, second and fifth, third and sixth..etc. points together with springs. But unlike my expectation for the Jellabi bodies to be more solid, they deformed more.



More Details on Blog: