Returns and swirls | Generative art diary
Two coding timelapses and a walkthrough of some new code.
I write about generative art, code, creativity and other interconnected topics. You can expect a diary every Friday sharing what I’ve been working on, some things I’ve found interesting, and links to my longer articles. Thanks for joining me here. 💖
Hello!
It’s been a while! I got back from travelling in the US and Mexico just before Christmas and then I got super ill with pneumonia. I am 90% better now and I’ve been getting back into creating things.
This newsletter will be a long one and Substack tells me it won’t all fit in your inbox, so if you want to read the whole thing you’ll have to click through to Substack at some point. I wanted to show you how my latest pieces work and there ended up being a lot to talk through. Plus I have some coding timelapses I made at the start of Jan, probably while coughing.
Things I’ve done recently
January means Genuary
I recorded myself coding a couple of the Genuary prompts and turned them into timelapses.
“Vertical or horizontal lines only”
“Layers upon layers upon layers”
This one was fun because I knew I wanted to make 3D-looking layers so I started in webgl mode, making use of the z-axis to draw the shapes in a 3D space.
But this wasn’t working for me aesthetically in terms of the way I wanted to blend the shapes and colours, so I jumped back to 2D mode and used geometry to draw the shapes flat but with 3D perspective.
Dabs, swirls and structure
This system, or something like it, has cropped up in my work a few times and recently I’ve been looking at it again.
These images contain lots of small “Dabs”, the angle of which is determined by Perlin noise. The colour of each Dab is chosen based on its proximity to various pre-defined areas and is mixed with spectral.js - I’ll talk more about the colours later, let’s start with the Dabs.
Here’s a close up, so you can see the individual Dabs more clearly. They are effective in creating a sense of motion in the overall image, but I wasn’t happy with their individual shapes so I’ve since created a new method, which we’ll see in a bit!
First I wanted to share how these were created because I think it’s interesting to share things that didn’t quite work, as well as things that do. Let’s look at some ‘debug views’ for a little insight.
Each Dab is first created as an irregular circle and then elongated along the angle chosen by Perlin noise.
In this image, you can see the irregular circles before they are elongated. Every point of the circle has been marked in red or green. The red ones will be moved to elongate the shape in the right direction. Notice how they’re all more or less in the same range of angles on each circle.
In the next image, each red point has been moved further away from the centre of the circle. Points that are near the edge of the chosen angle range are moved a small distance, while points in the middle of the angle range are moved further.
This works when viewed from a distance but when you look closely at the shapes they’re not ideal. They have a bulge in the middle, revealing the original circle shape.
Let’s look at the newer method and generate some nicer Dabs.
I first create an “inner path” made of a varied number of points. Each path starts in a random location and the points of the path are created by travelling in a direction chosen by Perlin noise at each step.
Next an outer path is drawn around each one. We go through each point in the inner path and create new points that are expanded at a right angle to the original point’s direction of travel. Then we also create a rounded edge of points at each end. All of the points on the outer path are jittered around to create a natural and irregular shape.
This method produces much more pleasing dabby shapes!
It also allows for a lot of variety in the results. For example we can…
Create longer paths:
Create curvy paths:
Jitter the outline of the shapes:
Now when we zoom out, we see images like this
Now let’s talk about where the colours are coming from.
Before any of the Dabs are generated, I establish locations and areas for various colours. Firstly I use the four corners of the image. In this example, going clockwise from the top left, we have purple, blue, yellow and orange.
Each Dab looks at its location on each axis and mixes the colour together accordingly. For example the Dabs that are vertically in the middle and horizontally all the way to the right are green, because they are a mix of 50% blue and 50% yellow. The colours are mixed together using spectral.js which provides much better results than p5js’ lerpColor() function.
We can also offset the position that is used to choose a colour for each Dab, to add variety to the unnaturally smooth gradient.
Next I add in some “highlight” areas. After a Dab has calculated what colour it would be based on the four corner colours, it looks at its distance from each highlight location and mixes that in too.
In this example, I’ve created just one black highlight so you can see what I’m talking about.
Note that these highlights are based on a central location, so their effect fades in stronger towards the middle. A Dab located right at the centre of the highlight would mix in 100% of the highlight colour, while a Dab near the edge might mix in just 10%.
Highlights also come with their own settings such as…
Chance a Dab will use or ignore this highlight:
Max distance a dab can be offset to choose a colour:
Once we add in multiple highlights, we see images like this
I wanted to create a foreground to these images without drawing something completely different over the top of them. To do this I created some colour highlight areas that use a bounding path rather than a central location. Dabs within the path are mixed to 100% of the highlight colour and those outside the path are not affected by it. These path-highlights still make use of the offset and chance settings, to keep them feeling natural.
I’ve been experimenting with drawing 3D shapes using these paths to define the areas.
I love the way these are looking and I’m excited to try creating more varied shapes and structures within them.
That’s all, thanks again for joining me!
I’ll leave you with a picture of a bus window I saw that looked like the Game of Life, and I’ll see you here next week.
- Amy ⭐
Thanks for the walkthrough Amy, I found it really useful. The colour blending approach is interesting, I'll keep that one in mind for future use :)