Creative Coding Every Day: Genuary 2022
A collection of responses to generative art prompts
Every Spring for the past few years I’ve been teaching a course on Creative Coding for graphic designers. Planning for the course and supporting students typically involves a lot of learning and experimentation on my part. This year, to get myself into a creative work flow and stretch myself, I’m taking on the Genuary 2022 prompts from http://genuary.art/.
I am incredibly proud of the work I’ve created this month! I don’t love everything I’ve made, but each prompt has pushed me into a new creative area and helped me develop my skills. I hope to extend several of these pieces with more variations, documented code and tutorials, and art prints.
January 31: Negative space.
The final prompt! Infinite variations of the face/vase optical illusion.
Genuary 1/31 Negative Space (Face/Vase) - OpenProcessing
This link will take you to the infinite variations and the project’s code on openprocessing.org
January 30: Organic looking output using only rectangular shapes.
Random positioning of tiny squares based on tangents, building up over time.
January 29: Isometric perspective.
Floating isometric cubes in varying colors.
January 28: Self Portrait.
This one requires a camera so it won’t work embedded into the article! For my take on a self-portrait, I modified an existing “mirror” project I’d made to give it a crafty feeling, limiting the colors so each frame felt more realistic as a stitching pattern. Lately I’ve been using craft to give myself something other than a screen to focus on.
January 27: #2E294E #541388 #F1E9DA #FFD400 #D90368.
Five set hex colors make dotted-line arcs around a center. They make dense circular forms.
January 26: Airport Carpet.
Simple “carpet tile” pattern design with shifting stripes in purple, blue, and green.
January 25: Perspective.
Playing with the idea of reflected, symmetrical, and layered 2-point perspective lines.
January 24: Create your own pseudo-random number generator and visually check the results.
A visualized random number between 1 and 200. The background pattern indicates the square root of the number. For instance, the visual for 16 includes a grid of 4x4 ellipses. If the square root is not a whole number, the remainder is shown as stars and smiles. As the number increases, the hue of the sketch increases. You can tap to generate a new random number!
January 23: Abstract Vegetation.
Generative geometric floral pattern.
January 22: Make something that will look completely different in a year.
Playing around with time-based inputs to make an abstract calendar/clock. In even years, it will involve rectangles and lines. In odd years, it will be circular.
January 21: Combine two (or more) of your pieces from previous days to make a new piece.
I ended up putting together two variations! I took the line art from 1/7 and combined it with the rotation in space of 1/16 and the color palette from 1/12. The first variation involves small, repeating “sticky notes” flying off in space. The second variation goes big to resemble standing inside a loom.
January 20: Make a sea of shapes.
Repeating “waves” of shapes overlap over time with different blending modes.
January 19: Use text/typography.
A simple interactive tool to generate swirling typographic images. If you want to try it out full-screen you can also access this version hosted on the p5.js web editor.
January 18: VHS.
Inspired by reels of VHS tape, super-tight spirals spin around to produce a subtle glitchy effect.
January 17: 3 colors.
Variations using green, pink, and cream Mid-Century forms.
January 16: Color gradients gone wrong.
I love how these turned out! Each composition is a series of overlapping gradients between 2 colors, but the gradients are randomly shifted ever-so-slightly in 3-dimensional space to make ethereal, glitchy compositions. Sometimes the previous composition peaks through. to add a pop of another color.
January 15: Sand.
Points inside a for loop, rotating and building up over time.
January 14: Something you’d never make.
I present to you… Overnight Salad. It’s not easy to make, lots of ingredients it takes, but it’s worth it to serve my overnight salad.
January 13: 800x80.
Random letters of the alphabet laid out in a #800x80 canvas.
January 12: Packing (squares, circles, any shape…)
Retro flower pattern built on top of the code the Coding Train’s Animated Circle Packing Coding Challenge.
January 11: No computer.
Similar to randomly placed ellipses on a digital canvas, here are “random” paper circles on felt:
January 10: Machine Learning. Wrong answers only.
I‘ve seen some pretty bad logo generators that claim to be “AI-powered” when they just slap together random combinations based on a few starter terms. So I made my own terrible fake logo generator using perchance.org! It combines icons from Font Awesome with a few Google Fonts, randomly-generated hex colors, and lists of nouns or company names. Try it out yourself to see the funny results of using “Machine Learning” to create logos.
"AI" Logo Generator
Randomly generated “logos” made from Font Awesome Icons and Google Fonts. perchance.org
January 9: Architecture.
Generative illustration of row homes, inspired by the architecture in Philadelphia and my colleague’s phillyrow.com project.
January 8: Single curve only.
A single bezier curve rotating in 3D space.
January 7: Sol LeWitt drawing.
Dense, slightly irregular lines in a grid, inspired by the work of Sol LeWitt.
January 6: Trade styles with a friend.
Time for a style transfer! I used RunwayML to do AI style transfers using models trained on work by Wassily Kandinsky, Pablo Picasso, Jackson Pollock, and Vincent van Gogh.
Here I’ve run the models on work I made January 4th:
Here I’ve run the models on artwork my toddler made in Procreate:
For reference, here is the original toddler art:
January 5: Destroy a square.
Move your mouse up and down to change the stroke width, move it left to right to change the rotation of the layered squares.
January 4: The next next Fidenza.
This is far from Tyler Hobbs’ Fidenza, but adjusting the simple parameters here in the </> tab will create endlessly variable designs.