5 things I learned doing Genuary 2024
7 minute read
-
, last edited
Since 2021, the month of January is transformed into Genuary, an artificially generated month of time where generative art community builds code that makes beautiful things. And this year I decided to join in. Here's a couple of things I learned...
Sometime during late 2023 it came to my attention that Piter Pasma had been organizing a month of collective generative art explorations on the internet ever since 2021, and was doing so again for 2024. This seemed like the perfect opportunity to take on the challenge and motivate me to try and make cool stuff and share it with the world.
If you're interested to see what came out of my effort, you can find my entries on the little website I set up for this. Or you can read on and find out about a few of the things I learned along the way.
For the second day, the Genuary prompt was "no palettes". As in, no color palettes. The sketch for the day was supposed to focus on generating colors. As I'd been actively avoiding the use of color in order to focus on lines and shapes, this seemed like a great time to check out some of the CSS Level 4 color spaces that were added to a browser near you during 2023.
One of those color spaces is LCH, where the L stands lightness, C for chroma or color intensity and H for hue or color rotation. If you want to learn more about the story behind this space, there's a great article by Eric Portis that I can recommend. In short, the reason this new color space was invented was to have a space that has a predictable outcome when changing one of it's values (l, c or h).
This makes this color space (as well as OKLCH) quite straightforward to start generating palettes. Which is what I did. And to my pleasant surprise I was quite pleased with the outcome. From that day on, using color in my sketches has felt a lot less daunting.
One of the constraints I had decided for myself doing Genuary was that I wanted to us the PaperJS library. The reason for this being that I have a plotter sitting on my desk that I'm still getting to know. Now, this plotter takes svg's as input, which is not necessarily a problem. With a bit of tinkering I was able to get one of my processing sketches to output svg instead of an image. However, the svg output was messy and also made it necessary to do some post-processing before I could send it to the plotter.
This made me think that there had to be better ways of generating my svg's. Which lead me to PaperJS as they call themselves the 'The Swiss Army Knife of Vector Graphics Scripting'. Great. Just what I needed. When I browsed to the API I could tell that the abstractions closely followed the concepts and structure of an actual svg, so I was sold. I just need to find some time to play around with it. And then Genuary rolled around. Perfect.
What I've learned is that PaperJS is really great as long as you're not generating a bunch of new shapes every frame. You really want to do as much of the object creations at the start and then animate those objects over time in the onFrame method. Another thing it doens't like so much is rendering a bunch of transparent layers on top of each other. Which is kind of to be expected, but I still had to find out the hard way. An example of this is my ASCII sketch. In general I mainly ran into performance issues that I tried to dance around.
Which doesn't mean I'm writing off this library. On the contrary. I'm keeping two use cases in the back of my head where PaperJS might be the perfect fit. 1) When you want to generate static svg's. This is a great option in my opinion since you're working really close to the actual svg model. 2) Interactive canvas based apps. One of the cool things of PaperJS is that every object you create, be it a rectangle or a weirdly shaped path, comes readily packed with event-handling wired up. E.g. setting up the user interaction for the chaotic system sketch was super straightforward to do.
When I decided to join in with Genuary I thought about what my approach was going to be. As the official website already mentions to not get burned out doing all the dailies I came with plan that I'd spend all the time I could during the month of January. Once January was over, I'd move on to other things. As I did.
So you can probably tell by the prompts that I actually made that I can be quite unrealistically optimistic about things I can do in a certain time. It took 3/4 of the month January for me to surrender to the fact that I wasn't going to be able to do all the prompts within the time window I had given myself. Which is of course okay. But going through this surrendering in a positive way gave me some more practice in being ok with what we get done in the time we have. Something that I've since learned is an actual thing that's being called slow productivity. So I guess this is my way of saying, take your time and be kind to yourself. Just keep showing up and put in the work.
I didn't do all of the prompts. And that's ok. I did some and learned a bunch. But most of all, I had a lot of fun. Next year, I'm doing them all though!!
Another thing I decided on for doing Genuary, was that I was going to build a mini website for it too. And I was going to do this using Svelte. I'd been intrigued by Svelte and its creator Rich Harris ever since I saw his talk on reactivity, dissing react while the core team was in the front row. His talk was funny and engaging and the man was making immense sense on top of that. I'm not sure how long ago that exactly was, but since that day I've been following the Svelte story with increasing eagerness to get my hands dirty.
So, on the 1st of January I typed into my terminal npm create svelte@latest genuary-2024
and well... my findings? In short, I wish I had tried it earlier. I haven't come across anything that's been bothering me and everything I try to do just seems to work, so yeah. I'd start listing all the things it does well, but instead I'll just recommend you to take it for a spin. You won't regret it.
I've been writing code for a living for almost two decades now. Throughout my career I've been spending a lot of time with C++ and Java mainly. Given that background it may not be surprising that for around the first 10 years I wasn't thinking all too fondly of JavaScript. And that's putting it very lightly.
It was only when I dipped into the world of functional programming through an online Haskell course that I started to see and hear about all the good things about JavaScript. So around that time (2015), I started dabbling around with JavaScript a bit in my free time. With varying degrees of activity.
As much understanding I built up during that time, it was always somewhere on the background. My day to day job was still filled with other languages and responsibilities. So doing these sketches in JavaScript, I realized I had lost some of the feeling I had with the language. Probably a good idea to brush up on those skills I thought. And then Marijn Haverbeke goes and publishes the 4th edition of Eloquent JavaScript. Perfect.
I did say 5 indeed, but the thing is I learned so many little things along the way. Like how I learned about the pixel layouts on old CRT and modern LED displays or how I found somebody's math homework in MatLab and figured out how to give me solutions to the 3 body problem. All great learning adventures.
But maybe another big one is that I also learned that it's actually not that scary to make stuff and put it out there. So I think that's just what I'll do.
Show up. Do the work. Have fun.