Back when I was making episodes of Web Components from Space, one of my last experiments was using AI to generate code in languages or environments that are just painful to work with.

WebGL is one of those environments. I'm jealous of my colleague who explored WebGPU and I mean to do the same in the future. It looks much better, although it STILL is experimental browser tech.

So here I am trying to make stuff in WebGL.

In my video series, I'd have AI write a shader for me when I tell it what kind of vibe I want to evoke. It barely worked, but it was fun trying to get it to work!

Either way, I'm keeping it up! I put a WebGL canvas in the footer of my website. Every so often when I write a new blog post, I'll do my best to get the AI to cooperate and make a new shader for me.

I've had super bad luck with Github Copilot and ChatGPT in the past, so now I'm giving Claude.ai a go.

My first prompt was:

"Can you write me a WebGL shader that appears really wide like a banner and evokes feelings of starting fresh?"

I had a bit of trouble with mismatched variable names across my shader code but ended up with 2 circles orbiting each other on the left side. Here's what I got:

A New Shader #

In my latest post, I wrote about playing a MIDI sequence with Tone.js. So in my next Claude.ai prompt:

"please change this shader completely to invoke playing music or playing beats"

I ended up with a pulsing circle on the left side of my banner. I guess Claude REALLY likes circles. I thought it was too boring though, so tried again:

"can we try something that looks like it's visualizing frequency instead?"

Unfortunately, this time I got back non-working code. Something about arrays not being supported in WebGL

precision mediump float;

uniform float time;
uniform vec2 resolution;
uniform float[8] frequencies; // Array of frequency amplitudes

When I complained it didn't work, and asked it to try again, I got back a something that looked like an EQ with frequency bars bouncing up and down. It was pretty decent, but it was confined to the left side of the banner.

I did a couple more iterations before changing the code myself to make the bars span all the way across my banner, playing with size and number of frequency bars a bit.

Ultimately, I'm happy - though it IS a bit ugly. I'll note that I do apply some CSS filters and opacity in my actual footer to make things a bit softer and subtler. Anyway, maybe I'll try suggesting colors in my next go-around.