this is an interactive webgl experiment. let's play!

made with ❤ by estelle kim

* how to play *

• click the boxes above to select emojis
• hover on cloud cells to drop emojis
• & click the cloud to make it pour
• click the canvas to reset it
• click the sky to toggle paint mode

* how the cloud works *

1. I 'drew' a pixel cloud using a grid of 0s & 1s.
2. Using emojis randomly pulled from a txt file, I filled the cloud grid and rendered it on an html canvas.
3. By random chance, or when the mouse is inside a cloud cell, I pushed the emoji into a separate list to drop and replaced the emoji at that cell.
4. Emojis on the list to drop are repositioned in every frame with gravitational force, random horizontal movement, and repelling force near the mouse, and are deleted when they reach the bottom of the canvas.

* how the drip canvas works *

1. With every frame drawn on the emoji cloud canvas, the bottommost row of pixels is copied onto the topmost row of the drip canvas.
2. The drip canvas copies each pixel row downward using two alternating buffers, creating a downward 'drip' effect.
3. In the process of copying, each pixel is blurred with its neighboring pixels, diffused with the pixel above it, and decayed slightly to simulate the spreading and drying of ink on paper.
4. The canvas is then blended with a paper texture and adjusted with transparency in wet areas to generate the final visual output.