On twitter I suggested that my future blog posts would be sprinkled with animated shaders in the space between paragraphs.

Some people (quite reasonbly) though this was a joke. But I actually had in mind a modern take on the ornate section divide lines you might find in an old book.

(more)

It is time for our 4KB audio visual experiment with Rust & WASM to get a shader on the screen.

To do that while staying within the strict byte budget, we are going to go back to the future by making a virtual machine with a 4-bit instruction set.

(more)

In the last post, we put together a minimal WASM file using Rust that runs directly in the browser. Next we need to make it do something by giving it a way to find and call javascript functions.

(more)

I’ve been exploring Rust+WebAssembly recently. Here is an experiment made with those - my friend said it looked like thousands of fruit loops dancing to “music”. It runs in your browser (and maybe even your phone). One file, just 4092 bytes.

(more)

Let’s build up the “Juhannus Embers” GLSL fragment shader step-by-step to see how wandering particles emerge from an almost stateless system.

(more)

This is the same “Juhannus Embers” shader I posted earlier, but this time I upgraded my own lightweight WebGL javascript library (so far called “gle.js”) to support animations so that it can be shown running without the embedded shadertoy player. Because the shadertoy player is quite fully featured, and more inteded for desktop browsers, it has some trouble on some mobile devices. The gle.js player is quite slim, so it may work slightly better on mobile. (more)

This was a small experiment to create a simple particle engine in a fragment shader that could run with good performance on mobile devices. I will describe in more detail how it works in a future post, but you can examine the source already on shadertoy. It’s built around triangle waves which I showed in the last post. (Unfortunately the embedded player may not work on all devices)

One of my favourite little shader techniques is to take continuous linear values, and turn them into oscillating triangle waves. Oscillation is useful in all kinds of cases. It can create repetition in space, or repeating animation over time. The most common way to generate oscillation is with the trigonometry function sin, which creates the well known smooth sine wave shape. But sin can sometimes be a little expensive, and other times that smoothness and non-linearity is not exactly what you want. (more)

When twitter avatars recently went from square to circular, even though my old image had a circle in the centre, the cropping they picked meant it ended up looking even more ugly than before.

So now seemed like a good time to update it, and at the same time replace the old thndl logo with something fresher.

As usual, my go-to tool for this kind of thing is not to sketch in a drawing app, but instead to write a little shader program. You can already see the result in the top left corner of your page, but this is the short story of how it was constructed.

(more)

It has been more than 2 years since the last post here on thndl, and the technology world has moved on noticeably during that time. When I first started writing thndl, shaders were a bit exotic, and WebGL wasn’t widely supported.

(more)