Gorilla Newsletter 97
**Welcome back everyone** 👋 **and a heartfelt thank you to all new subscribers who joined in the past week!**
> This is the 97th 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 —****A flowing WebGL gradient, deconstructed**: top of the list this week is a massive shader tutorial by Alex Harri. He teaches us how to program colorful and flow-y gradients in WebGL, explaining each individual line of code in minute detail.
Link to Tutorial
**2 —****Painting with Evolutionary Algorithms**: Matt DesLauriers' been playing with SNES — no, not the _Super Nintendo Entertainment System_ — but rather the evolutionary optimization algorithm "Separable Natural Evolutionary Strategy", that's designed to solve high-dimensional black-box problems efficiently.
In a nutshell, evolutionary algorithms are useful when it comes to solving, or optimizing problems where the ‘fitness’ function is either unknown or too complex to be modeled directly.
In a post he recently shared, he tasks 200 randomly colored and positioned rectangles to self-assemble into a re-creation of an image of the Mona Lisa, in an attempt to match it as closely as possible.
0:00
/0:14
1×
Link to Post
Using SNES for something like evolving rectangles to match a target image, you'd first start by defining a solution as a long list of numbers—for example, each rectangle might have 7 values (x and y coordinate position, size in width and height, and RGB colors), so 200 rectangles means 1400 values per solution.
SNES then samples random candidate solutions, rendering these sets of rectangles into an image, and comparing to the target image via pixel-wise difference to get a fitness score — which is then used to figure out how to improve. Obviously there's also a numerical distribution and a type of natural gradient involved to make this happen.
Link to Paper
For a much more technical explanation of how this works I recommend reading through the paper that originally introduced the family of algos "Exponential Natural Evolution Strategies" by T Glasmachers et. al., which is directly referenced by Matt in his generously open-sourced implementation over on GitHub:
GitHub - mattdesl/snes: Separable Natural Evolution Strategy in JavaScriptSeparable Natural Evolution Strategy in JavaScript - mattdesl/snesGitHubmattdesl
**3 —****Hydra Tutorial Series for Everyone**: Hydra is a live-coding environment for creating real-time visuals using JavaScript (that compiles to WebGL under the hood). The syntax is inspired by analog modular synthesis, in which chaining or patching transformations (functions in this case) together can generate varying visual results.
Try it out for yourself here
Naoto Hieda is a creative coder that's primarily been using Hydra for his artistic experiments. Naoto treats YouTube as an open notebook, to experiment in public such that each video acts like a performative creative session in which ideas are allowed to flow naturally. Naoto has recently restarted a tutorial series for beginners, with the only requirement to be able to type in some way:
Hydra Tutorial Series for EveryoneThis series isn’t a conventional step-by-step coding tutorial. It’s more about Naoto showing how he explores ideas, tries things and learns through doing. He makes mistakes, remixes things, and follows unexpected paths.CreativeApplications.NetFilip
Naoto tries to give back to the community by creating these kinds of educative materials — in just a few years Hydra has attracted a global community around it. The software tool was introduced a few years ago by Olivia Jack, if you'd like an excellent intro and the backstory behind Hydra I recommend giving this JSConf talk from 2019 a watch:
**4 —****Network Maintenance – A Node in the Living System**: is an art installation created by Jonas Lund that features a number of wall-mounted devices, that require regular interaction from visitors to stay active.
Each device has a screen and controls where viewers need to press buttons or respond to patterns to keep device active and alive, simultaneously contributing to the health of the entire network of interconnected devices.
Network Maintenance – A node in the living systemNetwork Maintenance is a series of networked wall-mounted devices that explore the relationship between ownership, care, and collective responsibility. Each device consists of a custom construction housing, a display, and number of analog controls. The device function as a node in an interconnectedCreativeApplications.Netssssyan
Inspired by quantum mechanics, where entangled particles influence each other, the screens display the network’s health, showing things like stability and connectivity depending on how participants engage with them. If people stop interacting, the devices begin to decay.
The installation is currently on display at Art Düsseldorf with OFFICE IMPART — which I will have to go and see since I'm based here 😆 conceptually the artwork invites people to think about how we’re all interconnected, and highlights how our individual efforts can help sustain a larger community.
**5 —****A better Method for shading split Quads**: a recent article from AMD introduces a new method to preserve smoothness over the common edge that's formed by splitting quadrilaterals into two triangles.
Bilinear interpolation on a quadrilateral using Barycentric coordinatesA new algebraic method for hardware-accelerated bilinear interpolation on convex quadrilaterals is presented, using the Barycentric coordinate feature of modern GPUs.AMD GPUOpen
Modern graphics hardware is entirely geared towards handling triangle meshes, whereas 3D artists apparently prefer using quads for modelling assets. The issue that ensues when quads are displayed on screen, is that they get split into two triangles, creating a visible line or seam across the diagonal. This often causes noticeable visual problems during shading, texturing, and lighting.
The core problem is that graphics hardware only understands triangles and barycentric coordinates (the standard way graphics hardware calculates positions and properties inside triangles), whereas artists expect bilinear blending to happen on their quads (bilinear interpolation being the natural way to blend properties across a four-sided shape).
The novelty of the article: AMD basically found a formula that converts between these two systems and that can interpolate color and texture across the two triangles seamlessly, pretending that it's still a quad. The maths is also directly implemented in the graphics pipeline, which makes it quite efficient.
**6 —****Shaders in SQL**: we reach new levels of what you would call "cursed" with George's GLSQL shader 😅
Link to Post
I have no idea what's going on here, but in one of the replies he states that he's:
> Software rendering with sqlite as the compute engine. Every stage of the pipeline is its own table. Blit the framebuffer table with winapi at the end.
My interpretation of this: he's rebuilt a rendering pipeline as a series of data transformations (what SQL was actually designed for), such that each rendering stage is represented by its own table.
Naturally, it's dramatically slower that GLSL — but if we can have DOOM in TypeScript types, then why not have GLSL in SQL?
Digging into some of the other replies on the post, I came across this other gem; apparently some crazy person has previously also made a raytracer in SQL, because why the heck not 😆 here's the GitHub repo for that project.
GitHub - chunky/sqlraytracer: Everyone writes a Raytracer eventually. This is mine.Everyone writes a Raytracer eventually. This is mine. - chunky/sqlraytracerGitHubchunky
I eagerly await further updates from George and his SQL powered shader renderer — ideally a juicy blog post for me to share on the newsletter!
## Dev & Web Tech
**1 —****Better typography with text-wrap pretty**: I was a bit confused by this article from the WebKit team — I had assumed that the `text-wrap: pretty` rule was already a feature of most browsers, but apparently it's up to each individual browser vendor to implement their own text-wrapping algorithm for rule. Here, Jen Simmons explains how they go about implementing the algo:
Better typography with text-wrap prettySupport for text-wrap: pretty just shipped in Safari Technology Preview, bringing an unprecedented level of polish to typography on the web.WebKitJen Simmons
Jen goes over some of the considerations that make for a text's readability, like the impact orphan words, hyphenation, and the right-end rag of a text-block can have, comparing to other options like `text-wrap: balance` that's great for making headlines look neat and tidy, and shares insights on how the other browsers are adopting the feature.
She also points out that text-wrapping is actually an innocuously difficult optimization problem — over on Hacker News there were some interesting discussions on the topic that are worth digging into 👇
Link to Hacker News Item
**2 —****Overengineering anchor links**: I'm of the strong opinion that every blog/article on the web should have a TOC (Table of Content) — not just to give a quick visual overview of the text's different sections — but also as a handy navigation element.
If you ever tried building your own TOC, and tried to have the section title in the table highlighted in tandem with the one that's currently displayed on screen, you'll quickly realize that you've run into a big pile of different problems. Mats Erdkamp tackles this task and demonstrates a highly over-engineered approach to building one:
Overengineered anchor links - 35®Learn about the ‘overengineered anchoring’ pattern, a technique to improve the user experience of scrollable content.35Mats Erdkamp
Mats not only ends up using virtual headings — hidden headings that are positioned differently on the page than their real counterparts — but also builds a custom mapping function that leverages of a full fledged optimization algorithm (SQLS).
As ingenious as it is, it's most likely overkill for all practical purposes (if you just want to highlight section titles in a TOC). That said, I'll likely try and recreate it whenever I get back to revamping my blog's design.
**3 —****Default styles for h1 elements are changing**: Browsers are updating how they style `<h1>` headings inside sections, articles, navs, and asides. Previously, when an `<h1>` was placed within a `<section>`, it would automatically look like an `<h2>` so that it fits into the hierarchy.
Now, all `<h1>` tags will have the same size regardless of where they are placed. This change means websites that depended on these automatic styles might now display headings inconsistently or even fail website performance checks. Simon Pieters from the MDN Web Docs explains:
Default styles for h1 elements are changing | MDN BlogBrowsers are starting to roll out changes in default UA styles for nested section headings. This post describes the incoming changes, how to identify if it’s an issue on your websites, and hints for conformant and better-structured pages.MDN Web DocsSimon Pieters
**4 —****Gumroad is now open-source... or is it?**: earlier this month Gumroad celebrated its 14th birthday. For the occasion they announced that the platform's code-base has been open-sourced!
Link to Announcement
Well, that's what they claim at least, when inspecting the license of the GitHub repository things look a little different, as it's distributed under a custom license that sets limits on who can use the code for monetization purposes, which doesn't directly agree with what's generally understood as "open source". Dan Brown examines what's going on with the license in a post of his:
No, Gumroad Did Not Become Open Source Today · Danb BlogAdvisory: I am not a legal expert and there could likely be inaccuracies in this post. Today Gumroad announced that they’ve become open source, with this being echoed by the founder and on social sites like Hacker News:Danb Blog
**5 —****Tweaking Text Level Styles, Reprised**: Adrian Roselli shares a comprehensive guide to properly using and styling text-level HTML elements including `<mark>`, `<del>`, `<ins>`, and `<s>`, with detailed information about their default browser styles, recommended enhancements, print considerations, and screen reader behavior across different platforms.
Tweaking Text Level Styles, ReprisedIn 2017 I wrote Tweaking Text Level Styles (terrible name in retrospect) and I made regular updates over the years. Stop reading it. Remove it from your bookmarks. Unlink it from your posts. Print it onto paper and then burn it. Demo <mark> <del> <ins> <s> Wrap-up The conclusions and…Adrian RoselliJedi
He also makes abundantly clear that it's a replacement to his 2017 post on the same topic.
**6 —****Et tu, Grammarly?**: after receiving repeated complaints from users about his website being oddly styled, David Bushell was forced to investigate. It turned out that the Grammarly browser extension was injecting styles that interefered with the site’s own native design.
Et tu, Grammarly?The one where I deploy counter defencesdbushell.comDavid Bushell
Turns out that Grammarly was using a CSS variable named `--rem`, which clashed with David’s own use of it for font sizing — resolving the conflicts boiled to changing the variable's name 🤷
Moral of the story... don't trust browser extensions?
**7 —****The Best Programmers I Know**: to cap off this section, Matthias Endler wrote a cool piece about the qualities that make out a top-notch programmer.
The Best Programmers I Know | Matthias EndlerI have met a lot of developers in my life. Late…Matthias EndlerMatthias Endler
Two big points he mentions, that I can only agree with, is that the best programmers:
1. Understand the tools they use on a fundamental level. As simple as that, they know the in and out of the tools they use to build things.
2. Never stop learning, stay ahead of the curb, and share their knowledge with others. Couldn't agree more, that some of the best programmers I admire are also great educators.
## AI Corner
**1 —****Why I stopped using AI Code Editors**: I've mentioned this a couple of times already, but when you start relying on AI code assistants too much, you're robbed of your intuition, and the ability to tap into your own "auto-pilot mode". Luciano Nooijen wrote a thoughtful piece about the deterioration of his programming skills in the context of these code assistants:
Why I stopped using AI code editors · Luciano NooijenIn the past I used AI code editors for all of my programming, but I stopped using it and recommend others to consider this as wellLuciano Nooijen
**2 —****Google is winning on every AI Front**: while it might seem that Google's DeepMind has been falling behind in the AI race (that's been my impression at least), Alberto Romero from the Algorithmic Bridge wrote a massive post on why this is apparently not the case.
He shares a big list on how most of DeepMind's models currently rank highly on the benchmarks compared to the rest of the competition — benchmark-maxxing or not, it makes for quite an impressive list:
Google Is Winning on Every AI FrontNeither OpenAI nor Anthropic have a chance at this pointThe Algorithmic BridgeAlberto Romero
## Music for Coding
Lazarus is a brand new animated series produced by Adult Swim, currently with a rating of 7.8 on IMDb. Aesthetically it's reminiscent to Cowboy Bebop if you're a fan of that show, but with it's own unique visual identity.
What's special is the soundtrack that was commissioned for it; produced by none other than Bonobo, who's one of my favorite artists. The soundtrack is reminiscent of some of Bonobo's early stuff, gritty, rich, and simply a joy to listen to. Honestly also a perfect fit for coding:
Check out Bonobo's YouTube channel for the rest of the tracks.
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:
Gorilla Newsletter 96The Art of Pen Plotting - Interleaved Gradient Noise - Mondrian Shader - String Art in P5 - PIPO Creative Interfaces - GLSL Rubik’s Cube - CSS Item Flow Concept - CSS LQIPs - Microsoft OG Source Code - Anime.js v4 -Gorilla SunAhmad Moussa
You can also find a backlog of all previous issues here:
Newsletter - Gorilla SunWeekly recap of Gorilla Articles, Art and other interesting things from the world of generative art and creative coding.Gorilla Sun
**Cheers, happy coding, and again, hope that you have a fantastic week! See you in the next one!**
**~ Gorilla Sun 🌸**
