process

I took a quick wander through the neighborhood between classes last week, and ended up at Walt Whitman Park just between rain showers. The hexagonal pavers were drying in this really interesting way: different patches of the path were drying at different rates, but each individual paver was also drying in exactly the same way, from the center to the edges.

A pattern, you say? With predictable, consistently-scaled outcomes?? :)

Hexagonal pavers in Walt Whitman Park

Main inspiration image

Photo of a path made of hexagonal pavers in Walt Whitman Park

A wider view of the overall pattern

Three weathered spigots on the side of a building with pleasing, contrasting colors

Some beautiful industrial color from the same walk! Saving here for future projects

5-color palette

coolors.co palette, link for full size

I’m so fascinated by how much time and effort is needed to code relationships and processes that just happen all the time in the world around us — and that the logic we are so painstakingly naming and breaking and fixing in class is happening in these real-world situations as well (cf. Mimi continually calling us back to our bodies + actual senses in class when we put too much faith in our reasoning alone and start floating away from the question entirely)! Our bodies know so much — we know the logic, even when we don’t know how to articulate it (with or without a computer expecting very precise instructions on the other side). It’s as much charming as it is challenging, these little kind of math poems we’re typing up to describe why + how so that the computer is able to help us get to the what we are intuitively reaching for.

(Also, could not help but laugh that my first thought was to wonder if the rain’s interaction with the ground could be considered decoupled, and exactly when a counter for the drying process actually having begun would kick in for any one paver 😂)

step by step

p5.js sketch of overlapping rectangles

p5.js sketch of evenly-spaced white rectangles

p5.js sketch of diagonal red lines

p5.js sketch of an uneven blue line

p5.js sketch of tangled blue lines

p5.js sketch of a line of interlocking blue hexagons

p5.js sketch of waterfalling hexagons

p5.js sketch of thin blue arcs

p5.js sketch of a hexagonal blue grid

p5.js sketch of a jagged blue pattern

p5.js sketch of a hexagonal blue grid, but one leg of each hexagon is going the wrong way

p5.js sketch of a low-contrast red hexagonal grid

p5.js sketch of a red and green hexagonal grid

p5.js sketch of a hexagonal grid with multiple different red colors

p5.js sketch of a very dense hexagonal blue grid

(Geometry is hard!!)


project

I didn’t end up playing with fill after all this week, and instead focused on visibility/invisibility with the mouse interaction. It was so fun to dissect such a concrete (lol) example in such an abstract way!

Challenges this week:

https://editor.p5js.org/dkitp/sketches/uCMJ8G2TT