Gorilla Newsletter 83

Chemical Reactions with Cellular Automata – Hidden Code in PNGs – Generative Puzzles – Optimizing Truchet Tiles for Plotting – Demystifying Generative Autonomy – KIKK 2024 – CSS Wrapped 2024 – Writing Down Every UUID – AI makes Dev Skills more Valuable – Death of the Stubborn Programmer

Gorilla Newsletter 83
A new WIP. Voronoi tessellation solely created through pixel manipulation.

Welcome back everyone 👋 and a heartfelt thank you to all new subscribers who joined in the past week!

This is the 83rd issue of the Gorilla Newsletter - a weekly online publication that sums up everything noteworthy from the past week in generative art, creative coding, tech, and AI.

If it's your first time here, we've also got a discord server now, where we nerd out about all sorts of genart and tech things - if you want to connect with other readers of the newsletter, come and say hi: here's an invite link!

💡
PSA: The prompts for Genuary 2025 are out! In case you want to get a head start on organizing your January for the challenge.

Queue the news 👇

All the Generative Things

1 — Programming the Belousov-Zhabotinsky Reaction: The Belousov-Zhabotinsky (BZ) reaction is a special kind of chemical system in which the reaction repeats itself in cycles rather than reaching a stable equilibrium, also known as a chemical oscillator. Visually the BZ reaction presents itself as swirling, self-organizing spirals and waves that cyclically repeat over time—here's what this looks like:

In code this reaction can actually be captured as a cellular automaton that comes to life in just a few lines of code; Patt Vira tackles this in a recent video of hers, teaching us how to implement it in P5.

Patt points out a short paper by Alasdair Turner back from 2009, that she uses as a basis for the video, and that shows the formulas to create the swirly patterns. In essence each cell of the cellular automaton computes its state based on the values of the surrounding cells, similarly to how reaction diffusion can be modeled as algorithmically.

Over the weekend I ended up playing a little with the code, creating a few broken versions, as well as the animation you see above. As always, really appreciate Patt's efforts in breaking down these algorithms–felt very refreshing to do a coding tutorial for the first time in a while again!

2 — Hiding Code in PNGs with Jos Vromans: Steganography is the practice of concealing messages or information within other text or data. In generative art, a number of artists have adopted the idea of baking the source code that produces an image, into the image itself—partly to make the output a self-contained artwork, but also to be able to algorithmically reproduce the art in case version control goes out of hand.

This particularly makes a lot of sense in the case of SVGs, since SVGs are text based, the source code can simply be embedded as a <!–– comment ––>. For bitmap based image formats, like PNGs and JPEGs, this becomes trickier, but is also feasible; Jos Vromans wrote about the topic in a recent article of his–explaining how source code can be hidden within a PNG file by leveraging a number of smart observations.

Jos Vromans | Blog | Steganography
Jos Vromans | Mathematical Art | Blog post

A PNG is in essence a bitmap of pixel values, where pixels are composed out of three RGB values, each one of them represented by 8 bits. This means that one pixel holds 24 bits of information overall. In the article Jos points out that a change to the least significant bits (LSB) of each RGB component is visually imperceptible, demonstrating it with an interactive example—you need alter quite a few until the image devolves into something unrecognizable.

This basically means that we can substitute the LSBs of an image's pixels without anyone really noticing, and actually store meaningful information instead. If you put one and one together, we can now convert the characters that make up the code into an ASCII encoding and store them in the image. I recommend reading Jos' article for the full details.

3 — Programming a Puzzle Generator in Elm 🧩: Generating puzzles algorithmically is an interesting task, because it seems like something trivial at first but then turns out to be trickier than initially expected. Juri Chomé wrote about the topic, showing us how to program a jigsaw puzzle generator in Elm. In his case he used it to create SVG files to feed into a laser cutter that then cuts out the individual puzzle tiles from a block of wood.

Juri's approach is quite straightforward: he creates a grid, deforms it slightly—so that the edges between tiles are a little slanted—and then replaces these edges with the connector/knob-like shape that you commonly find between two puzzle tiles. To this day, I still don't know what they're actually called. If you aim to create plottable SVGs this is sufficient and does the job, it gets a bit trickier when you want the individual puzzle tiles to know their actual adjacency, as well as the inwardness/outwardness of their attached connectors.

This is what I tackled earlier this year, for a generative artwork I titled Some Parts of Me. The logic for creating the grid ended up being tricky, because I approached it in an object oriented manner; and I actually wrote an full fledged deep dive about the project... that never ended up seeing the light of day. Maybe I'll polish it up at some point and then release it, here's a sneak peak:

But I digress, check out Juri's article, it's insightful even if you aren't an Elm programmer, doubly so if you have a laser cutter at hand—I reckon that these custom puzzles make for an amazing gift!

4 — Creating and Optimizing Plottable Truchet Tile Patterns: while we're talking about laser cutting and plotting, catching up with Daniel Catt's newsletter, I learned that issue #50 is actually the third part of a series throughout which gives a detailed breakdown of a really cool Truchet tile generator, that's optimized for plotting purposes.

📙 #050 - Kaleidoscopic Workflow
At last, I’ve got my act together enough to post the third part of this little pen plotting adventure from newsletters #047 and #048 - with some online code, which I’ll link in just a moment.

Highly recommend subscribing to Daniel's newsletter ✨

In issue #47 Daniel explains how Truchet patterns work and how to go about programming them. In #48 he explains how to optimize the generated patterns for the plotter, so that the machine can trace out continuous lines rather than drawing out individual tiles one at a time. And in this most recent issue, he explains the grid based Truchet pattern can be turned into a snowflake kind of shape by leveraging a cool Kaleidoscope effect.

Really cool stuff, at this point in time I am strategically planning the acquisition of my first plotting device 🤞

5 — Demystifying Generative Autonomy: It's been a minute since I've featured a piece by Monk on here, but only because I've not had the bandwidth to keep up with the consistent stream of excellent writing over on Le Random. This one's important though because it's the fourth part in the Demystifying Generative Art series that Monk started last year, with which he aims to create a complete framework for understanding and evaluating generative art.

Demystifying Generative Autonomy
This is Part IV in a series on building a framework for appreciating generative art. In Part I, “Demystifying Generative Art,” Peter Bauman (Monk Antony) builds the case for such a framework. In Part II, “Demystifying Generative Aesthetics,” Bauman examines generative outputs—the results of generative systems. In Part III, “Demystifying Generative Systems,” he examines generative systems themselves. Now in Part IV, Bauman investigates another framework component, autonomy—control within generative systems. The essay includes Bauman’s discussions with Christiane Paul, Matt DesLauriers, Sougwen Chung and Zach Lieberman.

In this massive analysis, Monk tackles the philosophical component of his framework, namely autonomy. A big part of what makes generative art special as an artform, has to do with how practicing artists relinquish control over the art making process to some extent. And this is reflected by how much of the contemporary discourse around the artform is about the machine as a collaborator rather than simply a medium. Monk provides a logical breakdown of everything that's involved.

6 — KIKK Festival 2024 Recordings: KIKK is an international festival that celebrates the creative dimension of digital cultures and new technologies. The event takes places every year in Namur, Belgium, and brings together those that are interested in the intersection of art and technology. The recordings of the 2024 edition's talks have just been uploaded to YouTube a few days ago if you want to check them out.

One of the talks features Marcin Ignac, founder of Variable.io a generative design and data visualisation studio, and co-creator of Nodes.io—naturally, that makes Marcin an accomplished generative artist. He showcases some of the projects he's worked on and lets us in on his practice, with more than a few really interesting nuggets in throughout.

He briefly talks about his 2022 fxhash project Urban Flora, which I remember being mesmerized by when it first came out. He provides some details about the algorithm that powers the project, explaining that it is in fact created with Nodes.io. He reveals that the hollow geometric structures, that are central to each artwork, are created according to Conway's polyhedron notation.

This notation essentially describes a family of symmetric 3D shapes that can be derived from a seed polyhedron (a starting shape) through modifications, such as slicing and cutting edges for example.

7 — 6 Lessons I learned working at an Art Gallery: not directly related to generative art, but a worthwhile read for all the aspiring artists following along. Henrik Karlsson reflects on his three-and-a-half-year experience working at an art gallery, and explains how he turned, what many would consider a mediocre job, into a worthwhile opportunity to grow professionally.

Tech & Web Dev

1 — CSS Wrapped 2024: It's been an amazing year for CSS, and just like last year, the Chrome DevRel team recaps all CSS developments over the past 12 months in a mega-compilation, where each feature is accompanied by an interactive codepen.

CSS Wrapped 2024
Join the Chrome DevRel team and a skateboarding Chrome Dino on a journey through the latest CSS launched for Chrome and the web platform in 2024.

Here's the couple of the new features that I am personally excited about:

  • Cross-Document View Transition: I haven't used this one yet, but it seems like the most exciting one out of the bunch. You've probably visited a website before where transitions between different pages happens seamless, usually with a quirky animation. Previously this was difficult to do, or required an animation library like GSAP to take care of it, now it's possible to support it with CSS.
  • Scroll-Driven Animations: Scroll-driven animations on the other hand, is the new feature that I've seen being hyped the most this year. Now you can basically tie animations directly to a user's scrolling behavior—which you might want to keep in mind before you bust out GSAP the next time.
  • @property: The @property rule made a big buzz this year, and were hailed as next-gen CSS variables. We had a look in issue # of the newsletter, but in brief its a more refined way to define CSS variables that allows the assignment of a specific type, and initial value, and inheritance rules! This subsequently enables things that were previously impossible to do, such as animating colored gradients for instance.

Sadly Firefox, my browser of choice, still lags significantly behind Chrome.

2 — What do the State of CSS and HTML surveys tell us?: on a related note, if you've missed the State of CSS 2024 and the State of HTML 2024 surveys that came out earlier this year, you've got some catching up to do! If you only care about the notable findings that the two surveys bring forth, then the Google DevRel team got us covered again—Rachel Andrew provides a nice little compact recap:

What do the State of CSS and HTML surveys tell us? | Blog | web.dev
A look at the survey results from the State of HTML and State of CSS surveys.

3 — Writing down every UUID: if you enjoyed the esoteric One Million Checkboxes website from a few months ago, then you're in for a treat. Nolen Royalty is back with another interesting, large scale exploration: this time he created a website to list out every possible UUID, and makes them searchable. For what purpose, you ask? Probably for the heck of it—he breaks down how he created this webpage in a complementary explainer.

Writing down (and searching through) every UUID · eieio.games
I couldn’t remember every UUID so I wrote them all down

AI Corner

1 — Why AI is making Dev Skills mode Valuable, not Less: having an AI powered coding assistant conjure up a fully working prototype at the snap of a finger feels like having superpowers—what previously took several hours now can be done in a matter of minutes. However, it all comes crumbling down when the smart assistant also hallucinates an esoteric bug, that it simply can't solve on its own again. When this happens, and the code spirals out of control, you're ultimately left with no other choice than jumping into the thicket and figure it out on your own.

A recent article by Steve Sewell describes this beautifully, as it perfectly captures this experience. Steve also provides a useful graphic to illustrate the problematic at hand:

The beautiful thing here is that it makes dev skills just that much more valuable—only if you have the necessary knowledge will you be able to go in and fix whatever is at the root of this pit of death. Also, let's not even get started talk about building maintainable codebases.

2 — The Death of the Stubborn Developer: another installment in the recent surge of articles discussing the impact or Chat-Oriented Programming, or CHOP as the author Steve Yegge calls it, on the programming landscape. The main problematic that CHOP introduces is that it automates much of the trivial tasks that previously were handed to junior devs, consequently breaking the circuit through which junior devs traditionally gain experience.

But the danger isn't limited to just those that are at the start of their career, but also those in higher positions, if they are reluctant to adopt the chat driven paradigm. This makes me think of something John Maeda stated about the transformative effect of AI, that I think is very relevant here.

The good programmers will only get better and the novice programmers will have a chance at creating computational works that would have been previously impossible for them to achieve in their lifetime.
The death of the stubborn developer
How stubborn developers are getting left behind by refusing to adopt chat-oriented programming (CHOP) as their primary development approach.

The key take-away: developers and companies must adapt to CHOP to stay competitive in the evolving software landscape, as it represents a major shift in how coding is done today and in the near future.

Music for Coding

This week I've been listening nonstop to Sempiternal, Bring Me the Horizon's fourth studio album. It's definitely on the heavier side and might not be for everyone, but I found it incredibly refreshing. From what I’ve read, the album is quite polarizing actually—it marks a major shift in the band’s sound, with them adopting a more melodic approach. I can’t speak to the contrast with their earlier work since I have yet to listen to their other albums, but this one really resonated with me:

And that's it from me—hope you've enjoyed this week's curated assortment of genart and tech shenanigans!

Now that you find yourself at the end of this Newsletter, consider forwarding it to some of your friends, or sharing it on the world wide webs - more subscribers means that I get more internet points, which in turn allows me to do more internet things!

Otherwise come and say hi over on TwiX, Mastodon, or Bluesky and since we've got also got a discord now, let me shamelessly plug it here again. If you've read this far, thanks a million! If you're still hungry for more generative art things, you can check out last week's issue of the newsletter here:

Gorilla Newsletter 82
Punch Out Model Synthesis - Analytical Anti-Aliasing - Mathematical Art Exhibition - The Aesthetics of Source Code - Graphics Programming Conference 2024 Recordings - RYBitten - Painting with Plotters - Advent of Code - Native Dual Range Input - Creators vs. AI

And a backlog of all previous issues can be found here:

Newsletter - Gorilla Sun
Weekly recap of Gorilla Articles, Art and other interesting things from the world of generative art and creative coding.

Cheers, happy coding, and again, hope that you have a fantastic week! See you in the next one!

~ Gorilla Sun 🌸