Side Project

Coding with Light

(Role)

Concepting, creative coding, photography , research

p5.js, YouTube videos, Visual Studio, Illustrator, Photoshop

(Tools)

Background

My personal brand concept is‘ray of light’. Light shines on its own but it shines in a‘chaotic’way. When objects or subjects are present, it takes a unique form. Without the obstacles I’ve faced I wouldn’t be the light I am today and I keep adapting.

The sun provides this light, and this light represents growth to me. This affinity for light makes me love sunsets because of how intense the light is in that moment, but also how vulnerable it makes me feel. Every sunset is unique.

Inspiration

Recently I’ve been super inspired by generative art & processing. Generative art/systems is rule-based decision making, which can be applied to anything. Artists like Sol LeWitt used the medium to create painting pieces, Brian Eno has also used it to create music

Inspired by sunsets, generative art, and with the help of some tutorials, I thought about designing my own adaptive generative system with light as its core theme. (All sunset photos shot my me)

Process

To begin creating the system, I broke down how light is emitted from a source. This helped to set the foundation of the system because I can now write code specifying how things are generated.

After defining the foundation, variation was the next step because it is a key of generative systems, you want it to mix and match as randomly as it can. So the source, rays, and light can come in multiple variations. Rays could be dotted lines or strokes, the source or container could be a circle, hexagon, or triangle. The light can be a combination of any one of the rays and source variations.

In the code, I set this up with classes like OutlineShape, then gave them individual attributes like color, stroke weight, and rotation. I also pulled colors from the photos on my moodboard and put them in an array to be chosen at random.

Once everything was setup, the next step was to create an 'if loop' that would mix and match every element and spit them out into a grid.

Final Renders

With this generative system, I could have a million combinations but I don't think I have as much time to keep refreshing my browser window. So I stuck with a few combinations I felt represented and resonated with me.

Ultimately I picked out about ten from these combinations and put them into a gif. Always changing, always adapting.

If you'd like to play with the system or get some variations just for yourself, feel free to check my GitHub repo. Thanks for reading through!

View Source Code