100 Days of Generative Art: Week 12

Day 78:

Link to code: https://editor.p5js.org/yetiblue/sketches/6Ni7YT-dC

This was done with the same code foundation that I made day 77 with here . I thought the previous result was too all over the place, so I simplified all the extra shapes, and kept the occasional circle in the center of some squares. Then, instead of a single version of the square pattern, I made a copy of each square with a slight offset.

There’s also a cool parallax effect created with the offset, where it looks both moving up to the top right, or bottom left corner.

Day 79:

Link to code: https://editor.p5js.org/yetiblue/sketches/R-6oterDL

The third day with the circle/polygon generator. Kinda ran out of steam at this point, but changed the shape of the polygon a bit and offset the circle to the top left corner. The one all the way on the right looked a bit like flowers, so I just went with that.

Day 80:

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

Today was Thanksgiving, and I was absolutely stuck on ideas. I found this p5 Pattern Library, via someone else’s Twitter design. I included it in my sketch and eventually decided on the Hexagon generator after getting the hang of how the pattern functions worked.

To introduce a little bit of variability I had each shape rotate within a certain negative and positive range which ended up creating that popping out effect.

Day 81:

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

A random sketch that started off with Circle Packing, and ended up with something super cool looking! The circles sort of look like concrete pillars, and the lines are like graffiti.

The scribble lines were the same outlines of the circles generated below them, but just super stretched in the y-direction to form ovals.

Day 82:

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

Scales + Blurry Scales

I didn’t really go into today with a plan, I was just messing around with the seaweed generator from before, and changed the values for how close each new curve would be drawn (along the x-axis). On top of that, I multiplied the noise value by a much bigger value than before, so the curves would look super squiggly.

To get the blurry effect, I drew a second set of curves that was just slightly offset from the original, and changed the stroke color to something lighter.

Day 83:

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

I was short on time today with trying to travel back to the city after the break, so I ended up creating the designs for today yesterday and kept it simple. I was sticking with the same “seaweed” generator that I’ve used a few times now (including yesterday), and just overlaid rectangles with the same fill as the background on top of the squiggles.

Day 84:

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

This sketch had a healthy dose of luck thrown in. The end result did not match what I thought would happen at all, and I’m still not quite sure what’s going on, but the output is cool!

Basically, I found this sketch once again from Gorillasun, where circular shapes would be generated by smaller dots with varying radius sizes.

I couldn’t really come up with a good idea with that alone, so I decided to throw it into a grid and see what I could do from there. The grid code, initially came from gorillasun as well, but I’d modified it before around three times now. This was probably why the output ended up not being what I expected, and I’m thinking it has something to do with how the X and Y coordinates are generated.

The output looks like a Jackson Pollack painting though with the splatter effect!




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

REACTing to Change

Next.js project integrated with tailwindcss setup

How to Use Redux Middleware to Better Control Your Data and Write Cleaner Code

What is a Redux Store?

Photo by Samantha Gades on Unsplash

Building an E-Commerce application using Java & React

Top 5 Map Libraries for React in 2021

How to create a chatbot in Mattermost with Dialogflow and Google Cloud Functions

Datatables.net with React Js ( custom Delete Buttons)

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

Getting Rich Quick

Top 5 Best Gaming Headphones under $100 in 2022

Behind the scenes of UNT College of Music Production

Why equipping youth with digital skills is an opportunity for tech companies and start-ups in…