100 Days of Generative Art Week 10:

Day 64:

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

This sketch was for an assignment where we would collab with someone else in the class and emulate their style with our own projects. My partner is doing abstract designs in C4D, so I thought a flow field would work pretty well.

I looked up a different algorithm than the one I’d been using, to see if I could transfer over some of the tricks I’d learned with that one.

What the original looked like

The original sketch had the origin of different paths scattered randomly as well as a more random line shape.

I wanted to have the lines all either come out of either the sides or top & bottom, so I changed the bounds of the width from (-width) to (width/8). The negative value would automatically go to the opposite side and start there. This way, the lines would work there way towards the center from the outsides.

As for the path, I added TAU multiplied by a value to the noise, and randomized the angle every time a path drew.

Day 65:

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

Building off a Phylloaxis algorithm from before. Essentially, the spiral shape is determined by the golden ratio multiplied by a rather large constant ranging from 7000 to 9929299.

Each time drawSpiral() is called, a random value from that range is sent.

Day 66:

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

Created with the polygon generator I used for my citrus sketch. This time I changed the number of points to 10 instead of 6, and offset each row to have more of an overlap compared to the previous grid.

I also applied a mapping function to cause sideways translation that tracks to the movement of the mouse cursor. This in combination with a semi-transparent background allows for a blurring effect whenever the grid moves!

Day 67:

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

Kind of a blargh day — The idea in my head did not translate well into the real world haha.

I initially wanted to use my Mondrian algorithm to create columns like the ones above, but then apply a blur like with paint. The fill would’ve been monochromatic so the columns would look like shaded strips of light and dark.

I couldn’t get the blur I wanted with pixel density so the idea came to a screeching halt. I was running out of time, so I thought I’d just make blurry stained glass :/

Day 68:

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

Another edition of flow-field friday!

This time, I divided the canvas into 3 sections. The center and then the border stuff to the left and right of the center.

In the middle, I ran the “regular” flow field with noise multiplied by TAU*20 or so.

On the outsides, however, the angle after it’d been multiplied by TAU*10, was randomized to give the disjointed look, and further multiplied by TAU to create a larger top area with a short “stem”.

Day 69:

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

This was a fun one

I started off with a circle packing sketch, which I thought was quite boring. Now, in classic fashion, I started messing around with values and instead of having circles generated in random spots like this:

I made all the circles generate in the center of the canvas.

Then, there was a ‘minDist’ variable which I didn’t really know how it worked code-wise but it seemed like it calculated available space between other circles and adjusted the radius of the new drawn circle.

I set the radius of the new circle to ‘-=’ minDist so that starting from the largest outside circle, the rest would “fall inwards”

Then I added a bit of random size adjustments of 10-ish pixels to each radius, so there’d be a shaking effect. Once I did that, I thought the circles looked like there were spinning. This led to the idea of a vinyl record player!

Day 70:

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

Same idea as the day before, but this was something I’d thought of while messing around earlier. I added a simple sine wave generator which stored values in an array. The radius of all the circles would have the values of that array added on to create the expanding and contracting animation.




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

Simplest way to add a root user on a target Linux machine

These 5 Functional Features of JavaScript Make Your Code Modular, Maintainable, Extensible, and…

Understanding the JavaScript — The History

AWS Microservices Architecture Introduction (React + SpringBoot)

How JavaScript works: Proxy and Reflect

If you think GatsbyJS is only a static site generator, you are missing the point

React App — Quick guide on setting up a development environment

Taking the Microsoft adaptive card to the next level.

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

100 Days of Generative Art: Week 13

How to Create a 360-Degree Video Experience with Unity

Type of Email Attacks

Red Hat follows Modular based Documentation. A lifesaver for its users indeed!