unicornsfartpixels is an online notebook cataloguing the always expanding web development landscape & creative side of code.

November 02, 2016

Generating Colors

For day two of Codevember I wanted to see if I could do something interesting with color. Anyone who knows the basics of generative art & design knows that real-time color and gradient generation are not the easiest of things to sculpt, but I figure hey, it’s #codevember! Why not? Today again, I kept it simple and wrote my 2nd instalment of code using the p5.js library.

Take a look below, but honestly, for the full effect it’s definitely worth it to click into codepen and check it out on a bigger canvas. And of course, if you have an suggestions or ideas to improve it somehow, tweet me.    

See the Pen #codevember 02.11.2016 by Eliza SJ (@elizasj) on CodePen.


I have to say, I’m pretty happy with how this little sketch turned out. Thanks to the alpha channel, the colors have an aquarel/pastel feel to them. And the light stroke around each ellipse caters to my love of geometric perspective.

But really, it all boiled down to two key elements: using map to regulate range and sin() to control movement - of both the ellipse in the canvas, and the Hue and Alpha variables in the color and Alpha level spectrums. All in all it makes for a pretty fluid (albeit psychedelic…) little interactive sketch. Click around the canvas to reset the background and see the ellipse path trace itself from different points.