Creative Coding

This animation is comprised of 22 designs in Rune.js that contain a random element. When the code is run repeatedly the randomness creates the appearance of motion.  The code can be viewed on github.

Music by Glassio

This motion was a happy accident that occurred while working on the design below. The sketch used Perlin noise to create a knot of noisy  circles and jagged concentric circles with randomized positions and stroke weights. While refreshing the code in my browser the jagged lines seemed to be spreading out from the inner circle in a ripple effect. I continued to experiment with randomized designs and compiled them into the animation above using the color scheme from the band's album cover. 

 
 

Using randomness to create generative designs had been something I was exploring in a class called "Programming Design Systems" with Rune Madsen. We used Javascript instead of illustrator to create easily altered designs. Programming designs allows you to easily create multiple variations of the same design and forces you to think systematically about form and color. 

 
This design is inspired by the artist James Nares who creates beautiful organic shapes on a canvas with a single stroke. This was an attempt to create that beautiful randomness in code.

This design is inspired by the artist James Nares who creates beautiful organic shapes on a canvas with a single stroke. This was an attempt to create that beautiful randomness in code.

The design above changes slightly each time the code is run but generating the random edges programmatically is more efficient than drawing them manually.

The design above changes slightly each time the code is run but generating the random edges programmatically is more efficient than drawing them manually.

 
This design is an illustration of the word "Tense". While the colors differ each time the code is run, it uses a traidic color scheme rotating 120 degrees on a hue scale with each generation so that the colors will always appear in sharp contrast.

This design is an illustration of the word "Tense". While the colors differ each time the code is run, it uses a traidic color scheme rotating 120 degrees on a hue scale with each generation so that the colors will always appear in sharp contrast.