100 Days of Generative Art: Week 13

Day 85:

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

Inspired by Cezar Mocan, and his 100 Days of Pen Plotter project. It’s nothing too complicated, basically just a simple WEBGL + P5js array of cubes.

I used one of the pieces I made in the first week and altered it. The original design consisted of 3 cubes of cubes, and for this design I altered the positioning of each mini cube as well as duplicated the whole thing so that there would be two columns.

The gaps that mark the spacing between each of the 3 cubes that make up each column is somewhat visible, and I tried to hide it by making the positioning of the mini cubes all jumbled. The sketch also runs as an animation when ‘noLoop’ is commented out, which really helps to create a holistic illusion.

Day 86:

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

I’d come across Alexander Calder’s Balloons a few weeks ago, and sort of tucked it away as something I’d want to do before this project was done. Well, today rolled around, and I didn’t have an idea so this would be it. Luckily, I’d found a sketch that provided a solid foundation for the concept, and I thought I’d make it more like the actual painting.

A sketch for balloons I’d found

I ended up altering the sketch I found by setting the position for each “string” to be randomized across the page so that sometimes it would all be clustered on one side and other time more spread out. I also thought the deformation caused by noise on the strings above was a bit much, so I reduced it slightly and gave it a different range. Now, some of the strings are that bendy, but others are nearly straight. The found sketch also had most of the balloons set to black, with the occasional different-colored blob. I liked Calder’s work where each was different colored, so I lowered the percentage needed for a blob’s fill to be set other than black.

Day 87:

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

This one didn’t really turn out the way I wanted to due to limited time, and just the inherent way that the draw() function works in P5. I gave the function a range across the canvas, and instead of drawing a tree at each randomly picked coordinate, the previous one would be overwritten as soon as it was generated (because draw() gets continuously called). Because of this overwriting, no tree was actually visible.

In the end, I just decided to automate the tree drawing process, and let the draw() function draw a new tree in the center whenever it ran.

Day 88:

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

Tyler Hobbes is probably the greatest flow field artist out there, and his Fidenza pieces are pretty mind blowing. I’ve been making flowfields for a few weeks now, usually on Fridays, and I’ve been trying to achieve Tyler’s “chunky” look ever since I started.

The problems I was running into was: I could make the stroke of lines like these below thicker, but then they would overlap and have a rounded end to the line.

My solution this time was to just add another starting curveVertex point. Previously there had been two: the start and end point which joined together would create a curvy line. With the addition of a third point in a straight line from the starting point, I could not get the thicker “paint stroke” look.

I’m pretty happy with how this turned out, but I’ve yet to figure out how to control the length of each line better, and allow for different stroke thicknesses from line to line using this three point method.

Day 89:

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

Short on time today, so I brought out yesterday’s flow field and tried to alter it in some way. This effect was created with a pretty simple tweak. With the three vertex points, at each point along the initial curve, a secondary line would have to extend out to create the “width” effect I wanted.

The lines above look smudged, because each little line that extends out to the third point, has a different length than its neighbor.

Day 90:

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

Randomly Chose a sketch from Ahmad Moussa’s list on P5js here

This was the starting point. The code had each tentacle of this shape moving ever so slowly, so I decided to jump on that idea and create a jellyfish!

I increased the radius overall and the number of tentacles (each tentacle was created by offsetting via perlin). Then finally, I sped up how fast each tentacle would move.

Changing the color to black and white also gives it a much more striking look — like it’s somewhere in the dark ocean.

Day 91:

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

Ended up creating three different variations on the same sketch from yesterday. I was looking at the code for the original creation, and there was math involved in creating creating the “ends” of each tentacle. By inserting reallllly large numbers, I could get each tentacle to “bend” down or up instead of just expanding outwards.

--

--

--

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

JavaScript Interview Questions

Frontend Stack at ABOUT YOU Desktop Unit

My Phase 4 Project

Write Beautiful OO Classes with TypeScript

First-class citizens custom form components in Angular

Building URL shortener using React, Apollo and GraphQL — Part V: User Authentication

Boost Your Manifest: Add Conditional Logic To Your App’s JSON Manifest

Painless React Forms, Predictions, & More…

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 work with me

The Best Language Learning Hack…No Teacher Ever Taught You

Willingness for Online Learning during the Pandemic

How to get Ai to produce music for you (for free)