ericchung.dev

Genuary 2022

A collage of my #genuary pieces

In January of this year I took part in #genuary. For the month of January, you are given a daily prompt to use as inspiration for a generative art piece. You can choose to interpret the prompt however you like, and create anything you like. I had a lot of fun and learned a lot in the process, so I thought I'd make a post about it.

I stumbled across this challenge on Twitter after seeing some people I work with posting some awesome genuary pieces. It was cool to see people I knew doing this challenge and I decided to join in, albeit a few days late. Over the Christmas break I started studying three.js and thought this was the perfect opportunity to practice what I had learned. I was super excited and as soon as I finished one I was hooked.

One thing I thought I might struggle with was the "daily" aspect of it. Doing something daily sounds daunting, and although I was hooked at the start it definitely became a struggle toward the end of the challenge. But I'm glad I pushed on and finished it!

What is generative art?

I've known about generative art for a bit and have always been kind of interested in it. This CodePen challenge from back in 2020 was probably my first real attempt at it.

Generative art can be interpeted in many different ways, but to me it just means making something beautiful/creative using code. Although not limited to code, this is generally what I think of when I hear generative art.

Often times these pieces involve some kind of internal system that provides structure and consistency, but still allows for unique pieces to come out of each iteration.

Think about... a tree. You know a tree when you see it, yet every tree is slightly different. Maybe one has a different number of branches, or leaves. Maybe one is taller, or shorter.

I think simulating nature is a good way to think about generative art. You create the rules, the shapes, the colours, the patterns, and let the code make something beautiful for you.

Technologies I used

I used a few different technologies:

  • Canvas2D
  • p5.js
  • css-doodle
  • three.js / react-three-fiber (r3f)

The majority of the pieces were done using three.js/r3f and p5.js.

After using them enough times, I eventually made very minimal starters to help speed up the process. These starters just provide a boilerplate setup with some utility functions to help speed up development.

Check them out on GitHub if you're interested:

There are also a few prompts where I decide to just use cloud-based editors for development like CodePen or https://editor.p5js.org/.

Techniques / concepts I used

  • Noise
  • Color palettes
  • Sine waves
  • Lerp

Noise

Noise is like a superpower. It unlocks so much creative potential. It's great for simulating organic movement, shapes and patterns. Noise gives you back a number between 0 and 1 like Math.random(), but what's great is that it's not completely random. Instead you pass it some parameters and it will give you the result of the noise algorithm. If you pass in the coordinates of whatever space you're in as parameters to the noise function, the values you get back for each coordinate will be smooth between each coordinate! And by passing a time value into the noise function along with these coordinates we're able to easily animate the noise output and get some really visually pleasing results.

Often you'll want to multiply the coordinates by a smaller noise scale in order to see the smoothness I'm talking about. e.g.

let noiseScale = 0.002;
let n = noise(x * noiseScale + time, y * noiseScale + time);

There are many ways to get noise into your project and they vary depending on the technology you're using:

In GLSL/shaders I reach for this gist.

If we want to use noise in JavaScript https://www.npmjs.com/package/simplex-noise

Some libraries like p5.js include their own noise function https://p5js.org/reference/#/p5/noise

Color palettes

I really underestimated the power of color palettes. Choosing the right colours can really change the mood of a generative art piece. For the first few pieces, whenever I needed colours I would just use hsl and tweak the hue, saturation and lightness values. While this was fine, when I started using colour palettes it really seemed to help make the pieces pop a little more and give them more character. Sure you could also create your own colour palettes, but seeing as I'm red-green colour blind and don't have much of a design background, being able to just pick a colour palette out of a list really helped speed up the process.

Here's some links to a few colour palette websites I've come across:

Sine waves

Whenever we're animating stuff we want to use smooth curves. Sine waves generate a smooth curve that typically oscillates between -1 and 1, however we can always alter the sine formula to adjust its behaviour. Sine waves are great for smoothly moving things back and forth between two points in space.

Lerp

Lerp is a concept that's really helpful to know when it comes to animation. Lerp is short for linear interpolation and it allows us to smoothly transition from one value to another. Here's the function:

function lerp(start, end, amount) {
  return start * (1 - amount) + end * amount;
}

At first glance it's not clear how this helps us animate, but by calling this function on every frame, we can continuously move a value closer and closer to the end value.

Final thoughts

While I did already kind of know about most of the concepts I outlined above, I think putting them to use in this challenge really helped solidify my understanding of them.

One of the more behind the scenes struggles of this challenge was recording the resulting pieces and posting them to social media. You might think doing a regular screen recording would be enough, but often times this would result in a choppy / lower quality recording. To help with this I ended up including CCapture in my starters, which captures canvas animations frame by frame instead.

While I did have fun with it I'll admit I got a little burnt out toward the end. Worth it though! It was great to see how other people interpreted the prompts, and just seeing other people doing the challenge at the same time made it so much more fun. Would I do it again? Mmmm, not sure... maybe!

Thanks for reading!

Check out the code for my entries below or view the entries themselves on my Twitter @rchungeric.

Github repo: https://github.com/chungeric/genuary2022