100 Day of Generative Art: Week 14

Day 92:

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

Remix of: https://editor.p5js.org/AhmadMoussa/sketches/d4aQ1boe2

The middle one was generated using tan() instead of sin() and cos()

Found another one of Ahmad’s sketches, and was really struck by how simple, yet cool the design turned out to be. It was just sin() and cos() waves criss-crossing one another vertically!

The original

I decided to clean up the lines a little bit, and make the whole design stretch out more. Adding a frame was also a nice touch that I thought would balance the whole thing out.

Most of the code logic deals with the animation of this pattern. There’s options to control how many drawing points there are, and how fast they go.

Day 93:

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

The algorithm from yesterday would yield many more interesting designs :)

First up is this altered version:

Everything is the same from yesterday, except now ever so often, the stroke of the paths will randomly expand a lot to make big concentric circles. The stroke is drawn from small circles to begin with, and it’s these that get randomly selected to be blown up!

Day 94:

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

Didn’t have any time today, so I used the same sketch from yesterday, and took screenshots at various points to post to my instagram. This one was my favorite — this is what the previous day’s sketch looks like when it’s been run for a certain time.

I called it a BAM — Big Abstract Mess!

Day 95:

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

This one was my absolute favorite of all the variations I made on this algorithm!

It’s a super cool illusion that I thought looked like marbles going up and down a waterfall. The illusion makes it seem like the circles are floating, but they are still following the twisty paths from before! (Try following one of the “marbles” and you’ll notice it is still oscillating)

I achieved this by stretching out the oscillation paths along the y-axis, so that they would be really skinny. Then, the radius of each circle that makes up the stroke was increased by a lot from previous works. Finally, the spacing between paths was increased to accomodate the larger radii of these circles without any overlaps.

Day 96:

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

Yeah today’s thing sucks. I don’t wanna talk about it 😜

Day 97:

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

At this point, I was so ready to be done with this project, and it was a very slow crawl to the finish.

I was pretty much done for ideas, so I went back to previous works and decided to remix this one from a couple months ago.

The original

The edits involved changing rectangles into circles, changing the width of each column, and then finally the color palette.

This algorithm works with recursion, and assigns each grid slot a certain number of recursions to run. With each recursion, a new rectangle is drawn inside the first one with a slight offset to one edge.

Day 98:

Link to code: https://openprocessing.org/sketch/1396217

For the final three days, I used a really cool flow field algorithm that I found on OpenProcessing.

The original

I thought the animation aspect of this sketch was really cool, especially at the start. With the curves developing, the whole canvas seems to warp a little bit. I made each path a little bit chunkier from the original, and took screenshots early on to get the effect I was trying for.

The middle one was pretty close. With this color palette, the lines looked like sprinkles!

Day 99

Link to code: https://openprocessing.org/sketch/1396245

As mentioned on the before, this sketch and tomorrow’s are all following the same algorithm.

Today’s design was created by setting the noise value (which determines how curvy each line is) to a tiny amount. This caused lines to be generated straight in one direction from where they spawn in on the canvas.

I also managed to add some variation to the lines by making some really thick and others super skinny. The final result looks sort of like fragments of metal that are either falling, or a part of a structure that been worn down.

Day 100:
Link to code: https://openprocessing.org/sketch/1396291

The finale!!

I kept it simple, by keeping this remix pretty close to the original algorithm. I changed the colors, and kept the rectangular stroke, which in the end makes the whole thing look like swirly french fries!

I created a few variations by adjusting numbers and operation symbols in the ‘move’ class of the code. The direction of a curve is determined by a generated angle that is fed into a trig function.




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

Creating an App for UConn Events and Organizations (UConn Connect)

Food sustainability & You

Week 3: Ideation and Prototyping

Designing responsibly: FOMO, notifications, and other drugs

Hario Ceramic and Olive Wood Grinder Review

Three Reasons why We need National Awards for Digital Product and Service Design

Apple Music UX Analysis

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

6 of the most important things to do on Linkedin

Digital Athlete Challenge: Day 6

Rework: Reading experience

Uncovering Treasure in a Sea of Data​: LinkedIn + Adobe Jam Top 10 Finalist