Fluffy Morphing Cloud on Codepen

Posted by: Sakri Rosenstrom

Last updated on

Fluffy Morphing Cloud on Codepen

fluffy morphing cloud pen preview

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

random circular shape preview random egg shape preview

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 Codepen

Update! I've also used this on my 404 page in 404 lines of code :)

Discuss this article on Reddit (I'll get notified) :

Copyright 1998-2018.

- by Sakri.net and Sakri Rosenstrom Front End Developer. All Rights Reserved.

All content, scripts and graphics on this web site are the property of Sakri Rosenstrom.