Gorilla Newsletter 96

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

This is the 96th 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 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!

That said, cue the news 👇

All the Generative Things

1 — The Art of Pen Plotting: Jerad Maplethorp wrote a beautiful piece about how pen plotting evolved into a form of art; while pen plotters weren't originally intended for the purpose of bringing code-generated doodles onto paper — much rather for the creation of precise blueprints and circuit diagrams — the programmable drawing machines are now central to a modern artform.

At the forefront we find pioneers like Frieder Nake, Vera Molnar, and Manfred Mohr (among many others) that all in their own ways came into contact with pen plotters back in the 50s, unknowingly laying the ground-work for what would become a global art movement today.

Now we see artists do all sorts of interesting things with the machines, like Licia He's watercolor shenanigans, Adam Fuhrer's daily postcard sized doodles, or Daniel Catt's various experiments to name a few of my favorites.

In fact, Jerad's blog only came to my attention through the most recent issue of Daniel Catt's newsletter, who's also one of the artists that I admire for his efforts in documenting his processes and endeavours so systematically for others to learn from. In issue #058 he updates us again about what he's been up to, and includes a kind shoutout right at the very top! 😄

As we keep ping-pong-ing shoutouts back and forth, it's starting to feel a little like a good old web-ring! Guess it's your turn now Jerad 🔫 there's also a couple more posts on Jerad's site worth checking out; fittingly titled Ink & Algorithms, it revolves entirely around the pen plotting practice.

Jorge Jimenez from the Activision team originally created IGN to improve how games render smooth images during Temporal Anti-Aliasing (TAA), a technique that combines pixel information from past frames and the current frame to remove jaggies in the current frame.

During TAA pixels are sampled across several frames and then combined into a single image, and this sampling is done according to a noise distribution. IGN helps Temporal Anti-Aliasing (TAA) by spreading out pixel samples evenly across frames.

At least that's what I pieced together from the article. I also thought that the noise pattern's aesthetics were kinda interesting, and could probably be used for some genart purposes. Xor, through whom I discovered the article also shares what dithering looks like using IGN.

I never feel that just sharing these is enough, hence I tried to dive in and understand what's going on. Obviously because I'm an absolute GLSL noob, the first step was formatting the code into something readable and thentranslating it into a poor-man's shader version in P5 that I'm capable of wrapping my head around:

Play around with the code for yourself here | On the right you can see a zoomed out version that shows how the canvas is subdivided into rectangular regions.

In essence, it's an elaborate sine wave based SDF that quantizes the canvas into individual rectangular regions, where each pixel is processed through with number of discrete, non-linear transformations to create the segmented color boundaries.

I still don't have a complete mental model of how it works, but I think I just need to play around with the code a bit more. As always, de-tsubuyakifying these is such an incredibly rewarding exercise.

Way back when I first got started with creative coding I tried my hand at this algo, but I never actually got very far — turns out the secret sauce here is a greedy approach.

In essence, for each pin we run a loop that finds the darkest possible pixel path to another pin by summing up the individual pixel values of an underlying grayscale image. Once that path is found we slightly brighten the values of the image's pixels, and slowly consume it until we've spun a maximal number of threads.

What sets Pipo apart is a user-friendly web interface, that lets you adjust settings directly from your phone without additional software; meaning that you can quickly tweak how your sensors respond, like changing MIDI notes or setting detection ranges. Plus, since it's open source and built with common platforms like Arduino, you can customize and expand your toolkit as needed.

While checking in which issue of the newsletter I had mentioned them before, it turns out that they got a spot in the hall of fame for making it into a single digit issue number of the newsletter, namely #5, where I shared their stellar video on creative shader coding. If you haven't seen that one yet, it's a must watch!

Dev & Web Tech

The suggestion isn’t to combine all of Flexbox with all of Grid — but rather to create a new set of properties and values to “replace” specifically the flex-flow and grid-auto-flow properties. (You will always be able to use the older syntax if you prefer.) Think how originally the Alignment properties and thegap property were defined to work only in one layout system, and then later got modified and extended to work in multiple layout contexts.

Jordan LQIP appriach packs image information — in this case a base color and a 3x2 grid of brightness components — into a 20-bit integer which is then decoded using pure CSS techniques like bit shifting and masking. He provides a bunch of interactive examples on the page to play around with.

Additionally, the post discusses the challenges of achieving smooth gradients and seamless blending using CSS radial gradients. He implements quadratic easing to mimic bilinear interpolation, ensuring that the placeholders look natural and blend well with the final images. This innovative method not only reduces the need for bulky scripts but also showcases the power of CSS in handling complex visual tasks efficiently.

The article is a retrospective of how the two of them wrote a BASIC interpreter for the Altair 8800 over the span of two months, which would also mark the birth of Microsoft.

Worth pointing out is the excellent ASCII themed design of the page, with a subtle text hover/click effect that makes the individual letters flicker before they return to what they were, in addition to a really cool dither-esque load-in animation on the images included in the text.

Turns out that seemingly simple layouts can sometimes be quite tricky to whip up from scratch. It was also interesting to see the different approaches that the two of them took to match the target layout, and how they were both entirely different to my own initial ideas, showing me that my CSS brain is wired in an entirely different way 😅

I think this really highlights the beauty and versatility of CSS — a big toolbox that lets you mix and match different rules to achieve the same thing in multiple ways. If you'd like to challenge your friends and/or colleagues to a round or two of CSS battle, you can do so here.

AI Corner

Using LLMs for quick answers is largely the same approach I have adopted in the past years — for example, I never really enjoyed StackOverflow, and now there's really no reason to visit the site anymore because I can just quickly ask ChatGPT why my div isn't centered; but at the same time I'm missing out on tapping into exchanges other brains have had on the internet before me, or picking up on tangential information that might be useful and interesting in of itself.

Stammy believes that one way to improve these AI systems would be by adding thoughtful personalization, allowing them to understand individual preferences without being overwhelming.

As always, FireShip was quick to make a video on the topic; all of this ensued after OpenAI added an image generator to their GPT-4o model, that might be a little too good for its own sake.

For instance, it's really good at character continuity, text rendering that was up to this point a big weak point for all image gen models. Obviously it's also really good at turning your favorite memes into the style that you desire — particularly studio Ghibli that somehow escaped OpenAI's content guardrails.

Music for Coding

For some late night coding and reading I often enjoy listening to some minimal techno; and a recent discovery of mine in the genre is HOZHO, a portuguese producer and DJ who's created somewhat of his own niche labeled as Melodark Minimal. His album Yin Yang is such an effortless listen, that's really perfect for fueling thinking tasks without being distracting.

And that's a wrap — 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 also got a Discord now, let me shamelessly plug it here again. If you've read this far, thanks a million! And in case you're still hungry for more generative art things, you can check out last week's issue of the newsletter here:

You can also find a backlog of all previous issues here:

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

~ Gorilla Sun 🌸