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.

2 — Interleaved Gradient Noise: Unlike regular random noise, which can clump or leave gaps, Interleaved Gradient Noise (IGN) is a noise generation technique that ensures each small group of pixels has a balanced mix of sample points — it's a method that can be used whenever you need a per pixel random number in rendering.

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.

3 — Infinite Mondrian grid in GLSL: Xor doesn't only shares cool resources, but is also a certified GLSL code-golfing wizard. In a recent sketch, he showcases a continuously re-arranging Mondrian-esque grid that's done in only 169 characters 🤯

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.

4 — String Art in P5Js: the prolific Patt Vira has continued to churn out one tutorial after another over on her YouTube channel; in a recent one she shows us how to simulate string art with P5. String art is the practice of wrapping a thread around a circular configuration of nails or pins, such that the thread overlaps with itself to create darker and lighter areas and recreates an image in the process — just like what you see in the thumbnail below 👇

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.

5 — Pipo Interfaces for creative sensing: Pipo Interfaces offers a toolkit that makes adding sensors to creative projects simple and accessible, they provide small, affordable modules like for motion tracking, measuring distances, and touch inputs. They're easy to connect wirelessly and can work together or separately in various setups, perfect for creating interactive art installations or devices that depend on creative input.

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.

6 — Interactive GLSL Rubiks Cube: kishimisu's built a fully functional Rubik's cube entirely with GLSL fragment shaders. You can try it out for yourself over on ShaderToy, where they also left us with a copious amount of comments that explain the code!

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!

7 — Grant Kott's Liquid Layers: when I first shared Grant Kott's liquid layers, I didn't know that he had granter plans for it 😛 in a video he shares his development roadmap for what he's going to work on next based on the feedback that he's received.

8 — Raytraced Audio for Realistic 3D Audio: and to cap off, I'm throwing this one in as a wildcard, YouTuber Vercidium spent the last 7 years building a game engine and figured out a way to use raytracing for simulating realistic 3D audio. The video is a non-technical explainer on how it works.

Dev & Web Tech

1 — Item Flow layout concept: the Safari team just dropped a proposal that unifies Flexbox, Grid, and Masonry layouts under one set of properties. Over the course of 2023 and up until the end of 2024 discussion concluded in two competing ideas, where Masonry was either a subset of CSS Grid, or its own layout rule. The people over at WebKit now throw both of these suggestions out the window, and propose a completely different approach.

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.

2 — Minimal CSS-only blurry image placeholders: after surveying some of the different approaches that are popular for creating blurred image placeholders, Jordan Brennan introduces a clever CSS-only method for creating them. His approach makes use of a single custom property, known as LQIPs (low quality image placeholder), that doesn't require an extra markup or JavaScript.

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.

3 — Microsoft Original Source Code: Bill Gates celebrates Microsoft's 50th anniversary, not only by looking back on a semicentury of his brainchild existing and thriving, but also by sharing the original source code he wrote with Paul Allen in 1975 that would become their very first product.

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.

4 — Anime.js Javascript Animation Engine v4: after 5 years in the making Julian Garnier releases his lightweight animation library — v4 of Anime.js boasts a new modular API, scroll-linked animations, draggables, WAAPI support, and so much more. The new landing page is also an artwork in of itself, demonstrating the capabilities of the library:

5 — Kevin Powell vs. Andy Bell CSS Battle: in a recent video our favorite web dev YouTuber Kevin Powell challenges none other than Andy Bell from the Picalilli Blog to a CSS battle. In four 10 minute rounds they're tasked with matching a target layout and design, where the one to finish first wins, or whomever matches the design more closely if the time runs out.

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

1 — Browse No More: Paul Stamatiou, aka Stammy, shares his shift from traditional web browsing to using LLMs for quick answers — while these AI engines save time, he misses the unique and surprising discoveries that come from exploring different websites and forums. He highlights that what gets lost in translation, due to the uniform responses of LLMs, are the personal human touches that made exploring the internet engaging.

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.

2 — GPT-40 Image Mania: you've likely taken notice of the entire studio Ghibli dilemma unfold over on social media in the past week, which I've consciously decided not to engage with.

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 🌸