100 Days of Generative Art Week 2:

Day 8:

Link to code: https://editor.p5js.org/yetiblue/sketches/TbsvB1dR7

Today’s piece was inspired by donuts…

And conveniently there’s a function in p5/WEBGL that allows for donuts to be created. I created a rotating donut and triangle using the torus() function. When playing around with different sketches that drew these, I also discovered that ambient light and specularMaterial() can be used to basically provide lighting to the shapes.

I kept the design of the shapes pretty simple, and spent more time trying to tie the piece together with the background.

The inclusion of the triangle was partially inspired by this design:

Final result:

Day 9:

Link to Code: https://editor.p5js.org/yetiblue/sketches/wZcNxR_7S

A bit of a day where went over the time I wanted to spend, and didn’t quite get the right result. Oh well!

The goal was to create somthing similar to the moon’s phases:

I’d have one circle on the bottom, and then overlay another one to create the effect of a growing crescent. I thought I had it all figured out, until I realized that I had no idea how to create the overlay circle with a for loop, and make it shift over a few pixels with each iteration.

The best I could come up with, was moving the overlay circle a little bit row by row, instead of individually. After that, I spent wayyy too long trying to figure out some nice colors and eventually just settled on a black background, with some blue and purple gradient inside of the “moons”.

Day 10:

Link to code: https://editor.p5js.org/yetiblue/sketches/wp2d373PB

Now this was a piece that I really liked how it turned out:

The new concept for the day was playing with arcs() and creating, well, arcs with them.

The initial design came pretty quickly, it’s what’s on screen minus the expansion effect and cool neon colors. I had the outer arcs filled in with a solid color and it just looked pretty lame despite the subtle rotations.

After a bunch of iterations, I decided to just make the inside fill transparent, and go full neon. Once that looked pretty neat, I went back in and changed the size to which each arc would grow to upon expanding (which is controlled by the y-position of the cursor), as well as the RGB shift

Day 11:

Link to code: https://editor.p5js.org/yetiblue/sketches/sAG3u-gyF

I was a bit pressed for time today, so the code’s a bit of a mess. Luck was on my side though, and even if I don’t know how exactly I got the colors the way they are, it’s a good look!

Essentially, I was building off a screensaver sketch I’d found, https://editor.p5js.org/owenroberts/sketches/BknrFeynx, and added two squares instead of one. Each would take up half the screen. The goal was for the colors to swap between the darker and lighter shades whenever the square passed bounced back from the top and bottom boundaries.

Currently though, the colors change once the squares reach the bottom and don’t change again, but even still after letting it run for long enough, a lot of cool patterns were created.

Day 12:

Link to code: https://editor.p5js.org/yetiblue/sketches/zBXUZzAA9

This piece was the classic try-to-go-overboard-but-then-realize-it’s-better-to-go-simple. I was just messing around with WEBGL translations and had some pretty bad creative block. After a while, I had an interesting concept formed: https://editor.p5js.org/yetiblue/sketches/aKHiUOvXK

The jitteriness of the group of blocks made me realize I could build a whole array of cubes that are all moving around rapidly. Luckily, I realized I could just modify my cube sketch from last week by expanding the spacing between each individual cube, and applying the translation() to everything.

Day 13:

Link to code: https://editor.p5js.org/yetiblue/sketches/DN0cHkIan

My favorite piece so far for satisfaction while watching!

This design was all about harnessing the creative side of the random() function. At first, I was attempting to paint the whole canvas one pixel at a time, which obviously took forever. I found a really cool tutorial here, but it ended up taking too long.

To expand upon that sketch, I set the sizing of my circles to random(50), and ran another loop to generate 10 circles that would randomly be placed in a container the size of the canvas every time draw() was executed.

First trial, with very thin outlines
Trial 2: Uniform sized medium thickness strokes
Trial 3: Random(50) for the stroke
Fullscreen mode!

Day 14:

Link to code: https://editor.p5js.org/yetiblue/sketches/pmMh04Q7E

Today’s shaping up to be a really busy day, so I thought I’d just go with something really simple. As I was looking through the docs for p5’s random() function, I noticed a cool example of lines being drawn sideways with the length of each line randomly changing.

I built off that code by shifting the lines sideways, removing the center axis line, and having the random range of colors each line can be change with a key press.

(Screenshots of the lines, in reality they’re flickering really quickly like static)




A blog for documenting my thought processes over the course of a project and how I can improve upon them in the future. Writing challenges me to build a “tree trunk’s foundation” [Tim Urban] of knowledge as I tackle new challenges.

Recommended from Medium

CX is not UX: A practical guide

Tools Are Expressions of Values

Modern home decor is moving out to make room for comfort — and it’s about time

The power of diverse thinking


How to find the opportunity you will love as a designer

Radiant Saunas Rejuvenator Portable Sauna Reviews

TrueMoney. Don't be fooled by the tag.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Timmy Zhou

Timmy Zhou

More from Medium

How to make realistic aluminum foil balloons in Blender.

100 Days of Generative Art: Week 12

Going on a virtual journey (BMW project, part 2)

[Closed] Korean Pop Culture Fan Three.js Programmer