A small experiment using p5.js – create a loop of ellipses drawen in random sizes and colors that rise to the top of the canvas at random speeds, and move slightly left & right.

The larger non-iframe version can be viewed here. The p5 code can be viewed here.

An issue to fix – once each ellipse moves beyond the top of the canvas (based on 0 minus current ellipse height), it should be moved back below the bottom (the canvas height value plus the current height of the ellipse), and then rise again from there. However, some of the shapes don’t get reset below the bottom of the canvas…they just appear in the visible lower portion and then begin their ascent. This causes a “popcorn” effect visually…more exploration is needed to figure out why this is happening…