GENUARY is an artificially generated month of time where we build code that makes beautiful things. It’s happening during the month of January 2025. You can use any language, framework or medium.
I started from Jan 4 (thanks to @n3xta for this idea of doing Genuary), and one project per day. For these projects, I mainly use p5.js.
Special Notes: This is a collection of the works by a completely newbie in generative art. Before doing these projects, I had zero ideas or basis of working with any generative art (if Python MatplotLib can count). Therefore, any advice is welcome and please feel free to contact me!
- How to Use p5.js and these codes?
- Personal Top 10
- JAN. 1.
- JAN. 2.
- JAN. 3.
- JAN. 4.
- JAN. 5.
- JAN. 6.
- JAN. 7.
- JAN. 8.
- JAN. 9.
- JAN. 10.
- JAN. 11.
- JAN. 12.
- JAN. 13.
- JAN. 14.
- JAN. 15.
- JAN. 16.
- JAN. 17.
- JAN. 18.
- JAN. 19.
- JAN. 20.
- JAN. 21.
- JAN. 22.
- JAN. 23.
- JAN. 24.
- JAN. 25.
- JAN. 26.
- JAN. 27.
- JAN. 28.
- JAN. 29.
- JAN. 30.
- JAN. 31.
- Acknowledgements
For p5.js, you can visit its website to set up your environment. You can use either website p5.js editor or Visual Studio Code p5.js plugin-based editor. I prefer to use the later one./
- p5.js online editor: link
- Visual Studio Code: p5.js plugin. After installing the plugin to your workspace, search (Ctrl + Shift + P) "Create p5.js project" to generate a p5.js template to your folder.
After finishing your code or you want to preview the canvas, install VSCode Live Server plugin, and right click the index.html of each project. You can open the index.html with live server to preview the work.
Top 10 JAN. 1. Dancing Line
TOP 9 JAN. 17. osu! when pi = 4
TOP 8 JAN. 30. Suzhou Rail Transit System Map
TOP 7 JAN. 15. Rug
TOP 6 JAN. 16. Palette
TOP 5 JAN. 24. Geometric Art osu!
TOP 4 JAN. 2. Layers Upon Layers Upon Layers
TOP 3 JAN. 29. Grid Canvas
TOP 2 JAN. 22. Gradient Palette
TOP 1 JAN. 11. Impossible Music Player
Vertical or horizontal lines only. (credit: Stranger in the Q)
The horizontal and vertical lines are randomly arranged according to a certain algorithm. You can press the left and right arrow keys to adjust the frame rate, that is, change the rate. The effect when the frame rate is high is similar to fft.
People with photosensitive epilepsy should be careful!
Layers upon layers upon layers. (credit: Monokai)
Inspired by Tetris, the p5play physics engine plug-in was introduced to create the effect of rectangles with different parameters falling and stacking into different layers for part one.
Compared with the first part, all rectangles are constant in width and can basically fill the container, creating a layers upon layers effect.
Exactly 42 lines of code. (credit: Roni Kaufman)
The inspiration comes from a reddit post I saw yesterday, which used octagons to gradually expand and overlap. I changed this idea to the expansion and overlap of circles.
Original post address: https://www.reddit.com/r/generative/comments/1ibtac6/expanding_octagons_no_randomness_or_noise_or_trig/?share_id=e6g6lxFiG1_60Ef1iy_oW&utm_name=iossmf
Code (Exactly 42 lines of code):
Black on black. (credit: Stranger in the Q)
The picture may be a bit dark, so you would want to turn your device to max lightness. Anyway, the general idea is to put different black rectangles with dark blue strokes on each other, rotating them and adjusting their sizes, so that it gives a sense of "black on black".
Isometric Art (No vanishing points). (credit: P1xelboy)
The initial general idea is to generate a 3-D shape stuff and make it isometric, so after some initial try it became this:
Then I found that I would need a 120-degree different between the three axises, so I did some adjustments to make it look better and more isometric:
It looks much better, right? I made this with infinite calculations of geometry, and I figured out that it could be much cooler, so I eliminated part of the lines (brute force calculation, with calculators, fair enough):
Still a bit weird, so I did more adjustment to make the final version of it, a very cool grass block, in isometric:
Make a landscape using only primitive shapes. (credit: Jonathan Barbeau)
To be honest, I did not have some ideas about what type of landscape I wanted to create, so generally, I just created a mountain-backgrounded city landscape (or something) that looks...kind of simple.
However, in the process of trying p5.js, I accidentally made some animation that looked like snow. Therefore, the landscape looks like it is a snowy day and I added some rectangles to make it even look more real, with "snow" on every building's top.
The landscape uses 9 rectangles, 10 triangles, 158 circles, and 2 lines in total.
Note: There is an easter egg in this landscape. Every competitive programmer will immediately know what that is!
Use software that is not intended to create art or images. (credit: Camille Roux)
Since I often use Microsoft PowerPoint as my personal Photoshop, this software immediately jumped into my mind.
The first image goes with several circles generated in PowerPoint, with glowing effect, which is originally supported by the software.
The second image is also generated by PowerPoint. Different from the first one, it is generated using background.
After generating two images using PPT, I found that also possible to draw using Microsoft Excel, so I drew two strangle pictures with Ohio State elements.
However, I felt it would look better if I created art using terminal. If I have time later I would give a try, inspired by someone.
Draw one million of something. (credit: Piter Pasma)
Since one million is the square of one thousand, the idea is simple, one million pixels with random color. (Actually, it looks like the effect of television visual snow syndrome (VSS))
The textile design patterns of public transport seating. (credit: Piter Pasma)
Basic idea: some blue background and some random lines and shapes with closing colors to blue...okay it looks awful to be honest.
It looks even worse to my strange idea of pure color squares...exactly what metros/subways in China look like.
[p1-9: Suzhou Rail Transit Line 1, Line 2, Line 3, Line 4, Line 5, Line 6, Line 7, Line 8, Line 11]
Not gonna lie this is a genius idea :)
You can only use TAU in your code, no other number allowed. TAU = 2 * pi = 6.2831853… (credit: Darien Brito)
For some reason the generate speed is extremely slow, probably just 0.03 - 0.05 FPS (I am serious). The algorithm has some space to optimize.
Impossible day - Try to do something that feels impossible for you to do. Maybe it is impossible. Maybe it’s too ambitious. Maybe it’s something you know nothing about how to accomplish. (credit: Rachel Ehrlich (Joy of Randomness) and the Recurse Center)
The heaviest workload so far, and I am trying to do something that looks impossible for me. I created an audio visualizer with effects and lyrics, which looks like a player that plays specifically One Last Kiss.
The audio visualizer itself is based on the waveform analyzer and vertex. I referred to this video for the creation of the visualizer. Besides, I also created the effect of particles and playtime at bottom right.
The most "impossible" part is to link every sentence of lyrics to the correct time. I used Audacity to get the exact time of each lyrics to show. That was a long time correcting everything...and it looks pretty!
The complete video is on Youtube, the link is https://youtu.be/cphuiKveoK8. Trust me, it looks good!
Subdivision (credit: Melissa Wiederrecht)
The general idea is to subdivide rectangles (especially squares) by half "infinitely". To make this more interesting, I added a third dimension to make this a 3-D subdivision.
This resulting cube reminds me of a problem I have seen in ICPC NAQ 2024. (Problem J Menger Sponge) Both are dividing rectangles on different surfaces of a cube.
Also, this is my first to try creating some 3-D geometries using p5.js, and it seems to be a nice try I have to say.
Triangles and nothing else. (credit: Heeey)
A total of 136 triangles are drawn.
There are two color modes to switch between, black & white and random color. Press the SHIFT key to switch between them. In random color mode, press the ENTER key to perform another color randomization. The shape of the triangle can be adjusted according to the direction of movement when the mouse is pressed. The maximum single-direction offset in the y direction is the height of a single triangle. There is no limit to the offset in the x direction.
Random Color Mode:
Black & White Mode:
The triangles after offsets in both directions:
Changing between different random colors:
Changing between different color modes and adjust the shape of the triangles:
Pure black and white. No gray. (credit: Melissa Wiederrecht)
Part 1
Added the function of dragging the mouse to adjust the threshold value for basic color image to pure black and white image conversion.
Because this idea is too simple and easy, I decided to create another part to this prompt.
Part 2
Some random shapes combining using the blend mode DIFFERENCE, all pure black or white. It is guaranteed that there are at least some different shapes in each of the four quadrants, and random amounts of shapes generally.
Design a rug. (credit: Melissa Wiederrecht)
Inspired by Pic-1, the hexagonal color blocks are unevenly distributed, the main color is red, and black, white, and gray blocks are used as auxiliary colors. Different quadrants are randomly filled with different weights. Unfortunately, it is not easy to simulate the texture of a carpet, but it looks a bit like a mouse pad xd.
Generative palette. (credit: Stranger in the Q)
Randomly generate dozens of highly transparent rectangles. The overlapping effect is very similar to palette.
The blend mode of p1-5 is HARD_LIGHT, and the blend mode of p6-9 is OVERLAY.
What happens if pi=4? (credit: Roni Kaufman)
Basic idea is that when pi=4, the circle under such a situation will look like a diamond from our Euclidean space. The inspiration for the animation is water ripple, expanding (and disappearing) from inner to outer.
Note: I used some AI to assist my calculation of the coordinate of each points of the diamonds.
What does wind look like? (credit: Melissa Wiederrecht)
Inspired by China CCTV classic program "Big Pinwheel". [Orange, Yellow, Blue, Green] I combined the colors of the pinwheel and classic Netherland windmill bases to describe what wind looks like from an objective perspective.
Op Art. (credit: Melissa Wiederrecht)
I don't have good ideas today, so everything I do is to add some random parameters into the process of drawing shapes and the colors of their strokes.
Generative Architecture. (credit: Melissa Wiederrecht)
Inspired by Ohio Stadium at Columbus, OH. The picture shows the architecture of the main entrance gate of the stadium.
Today is also the game day of the final of 2025 College Football Playoffs. Go Buckeyes!
Create a collision detection system (no libraries allowed). (credit: Darien Brito)
In the basic collision detection system, 20 balls move randomly within the canvas. Once the collision is detected, they will randomly become one of Brutus Buckeye, american football and OSU calibration in the next 0.5 seconds.
OSU Championship Special Edition Genuary II
The CDS refer to https://youtu.be/HK_oG_ev8FQ?si=8vC0-jFOQY_6wLri
The background color is Ohio State Scarlet, and the color of the ball is Ohio State Gray and its two variants, a variant of Ohio State Scarlet, and Ohio State White.
Full video: https://www.instagram.com/p/DFGMx3sRuxN/
Gradients only. (credit: Melissa Wiederrecht)
Based on the JAN. 16. Generative palette, a dual-dimensional gradient is added, that is, a static internal gradient and an overall dynamic gradient over time.
The BlendMode is HARD_LIGHT, which makes this look better than vanilla.
Inspired by brutalism. (credit: Melissa Wiederrecht, Roni Kaufman)
Brutalism is a building that is essentially minimalist and pragmatic. Today's work is inspired by the TV Screen Building in Serbia, specifically its window structure that resembles a TV screen.
Multiple random weights are used in the code to generate the building's windows and Brutalist balconies, while a noise function is used to generate a wallpaper background that resembles a rough wall.
Geometric art - pick either a circle, rectangle, or triangle and use only that geometric shape. (credit: Bruce Holmer)
Inspired by the well-known music game osu!, there are three basic logics: linear, circular, and arc, which generate a series of circles of the same color and show a compact and fast rhythm. Each circle consists of an outer large circle and an inner fixed small circle. The large circle gradually shrinks to imitate the game logic in osu!.
Because the logic and algorithm are difficult, the code given by AI was partially referenced during the creation process, but the overall idea is original.
If you want to watch a smoother demo, visit my instagram post for a better experience!
OSU Championship Special Edition Genuary III
One line that may or may not intersect itself (credit: Bruce Holmer, Chris Barber (code_rgb), Heeey, Monokai)
Inspired by music game Dancing Line. Press SHIFT to start the timer. A thick line moves on the canvas, and every time ENTER is pressed, the line turns to another direction. The camera perspective goes with the line. At the end, press BACKSPACE to stop the animation. A complete graph of the single line will be shown on the screen.
OSU Championship Special Edition Genuary IV
Complete demo on Instagram! Uses Carmen Ohio as the background music. Please ignore my music game skill LMAO
Symmetry. (credit: Melissa Wiederrecht)
Created an animation showing the growth of a binary tree, a frequently used data structure in computer science. When LEFT_ARROW or RIGHT_ARROW is pressed, the tree will add or subtract one level of nodes.
Make something interesting with no randomness or noise or trig. (credit: Melissa Wiederrecht)
Those who understand will understand.
Infinite Scroll. (credit: Sophia (fractal kitty))
Simulates the process of fireworks rising and exploding, and adds the element of infinite scroll, that is, the fireworks will continue to rise (like sky rockets), and sound effects will be played at the same time.
2025 Chinese/Lunar New Year Special Edition
打ち上げ花火、下から見るか？横から見るか？
Grid-based graphic design. (credit: Melissa Wiederrecht)
A 40*40 grid canvas can be used to create pixel art. There are 16 basic colors to choose from, and the functions of clearing the canvas and erasing colors are also provided.
Inspired by Jan 2 Layers Upon Layers Upon Layers
Inspired by Tetris
Abstract map.
Not to be confused with AbstractMap. (credit: Melissa Wiederrecht)
The map of Suzhou Rail Transit System.
Pixel sorting.
You can sort pixels by weight, size, age, etc. (credit: Melissa Wiederrecht)
Basic vertical pixel sorting based on hue.
- Special thanks to GENUARY 2025 for making this project possible.
- Motivated by @n3xta.
- Huge appreciation to Genuary prompt contributors for their prompt contributions.
- Gratitude to the p5.js for their amazing generative tools.