Fluffy Morphing Cloud on Codepen
I've been kicking this idea around, and wanted to generate some fluffy clouds for an upcoming game. The idea is to crete two random "cloud" shapes, then morph between them to simulate a "cartoonish" fluffy cloud with the illusion of "real" cloud behaviour.
The cloud shapes are generated by plotting points along an egg shape, using a random radius. This results in random enough shapes, without having to worry about intersecting lines. To somewhat flatten my clouds, I used an egg shape instead of a plain circle.
Here's a pen explaining the shape generation:
Random cloud shape generator on Codepen
The "fluff" are just circles placed along a grid over the cloud shape. Cells which are inside the cloud shapes path are stored. The final animation creates two such grids, and interpolates between the two. When the morph is compplete, a new "target" cloud is generated.
check it out (don't hesitate to click the like button ;) )
Fluffy Morphing CLoud on CodepenUpdate! I've also used this on my 404 page in 404 lines of code :)
Discuss this article on Reddit (I'll get notified) :
reddit.com/r/sakri/