My Art for Genuary 2024, Part 1

Inktober for programming nerds

animated
interactive
javascript
Author

Vincent “VM” Mercator

Published

January 4, 2024

Modified

February 3, 2024

Happy new year! Let’s kick it off with some programming art.

I’ve decided to participate in Genuary 2024, a procedurally generated art project. The Genuary website provides a prompt for each day in January 2024, and we as the artists program a generative art piece based on the prompt.

I’m mainly going to use the p5.js library, a JavaScript interpretation of the Processing sketchbook. While this isn’t my first time using Processing or any of its derivatives, I’m not very familiar with JavaScript and this is my first time using p5.

I’d like to give a shout-out to GusBus, who shared the Genuary project in the 32-Bit Café Discord server and indirectly inspired me to do this project.

WarningEyestrain / Photosensitivity Warning

This page contains graphics or animations that could cause problems for people with vision issues. Viewer discretion is advised. If you have trouble viewing bright colors or relatively fast animations, I suggest clicking elsewhere.

Prompt 1: Particles, lots of them.

Genuary Prompt 1. This animation is procedurally generated. Fullscreen Version - Raw Code

Gradients don’t exist in the base p5.js library; instead, I just drew a bunch of thin rectangles and linearly interpolated (a.k.a., LERPed) between the start and end colors.

I used an array of arrays to keep track of the particles’ properties.

Prompt 2: No palettes.

Genuary Prompt 2. Click the figure to randomly generate a new color palette. Fullscreen Version - Raw Code

This prompt’s subtitle was “generative colors, procedural colors, emergent colors”; I decided to just choose colors at random and interpolate between them to make my own palette.

Prompt 3: Droste effect.

Genuary Prompt 3. Move the mouse to change the angle of recursion. Fullscreen Version - Raw Code

I don’t think I did this prompt proper justice; this piece fits the prompt “recursion” a lot better. However, the Droste effect is a specific type of recursion, so I guess it works.

Prompt 4: Pixels.

Genuary Prompt 4. Click to restart the cellular automaton. Fullscreen Version - Raw Code

For some reason, I wanted to go overboard with this prompt and build a 2D cellular automaton! Each cell has an equal probability of moving into one of its three neighbors below it, and each cell slowly decays over time. The effect reminds me of falling snow.

Prompt 5: In the Style of Vera Molnár (1924-2023).

Genuary Prompt 5. Click to procedurally generate a new piece. 512x512 Version - Raw Code

Vera Molnár’s work is fascinating. This art piece was inspired by many of her works titled Structure de Quadrilatères (Structure of Quadrilaterals). The one that I liked the most was called sans titre (1987) (Untitled (1987)).

Prompt 6: Screensaver.

Genuary Prompt 6. This animation is procedurally generated. Fullscreen Version - Raw Code

This one’s a little bit simple, but it does the job. I always really liked how the bouncing DVD logo looked.

Prompt 7: Progress bar / indicator / loading animation.

The animation’s gonna show up soon, you just have to wait for it to complete loading.

Genuary Prompt 7. This animation is procedurally generated. Fullscreen Version - Raw Code

Just kidding! This is the animation. Did you know that loading icons are also called throbbers? I don’t like that name.

Prompt 8: Chaotic system.

Genuary Prompt 8. Click to restart and generate new Lorenz system parameters. Fullscreen Version - Raw Code

Chaos theory is very cool. It studies the properties of chaotic systems, repeatable rulesets that make hard-to-predict patterns. A small change in a chaotic system’s internal ruleset or initial conditions drastically changes how the results evolve over time. The Lorenz system that I’ve programmed here is a classic example of a chaotic system of differential equations.

Other Prompts

Unfortunately, having so many active animated sketches on the same webpage can make it lag. So, my Genuary 2024 article is split into three parts. You can view the other parts on my website using the links below.

Note

This post is part of a series called “Genuary 2024”.

Reuse

CC BY SA 4.0 International License(View License)