thndl

Baroque fractal divide lines

Sun, 30 Apr 2023 08:42:42 +0300

Julia sets make an interesting visual building block that can be combined with other kinds of transforms to create different shapes.

Here they are used to create some baroqueish page divide lines.

Python gets down to (the) Metal

Wed, 26 Apr 2023 16:42:42 +0300

Are you a mac & Python person?

Do you have a few trillion numbers to mulitply together?

But are you also a busy person who doesn’t have all day to wait for the results?

If the answer for all these questions is “Yes!”, then this post might just be for you.

Doodling with shaders

Wed, 12 Apr 2023 19:00:00 +0300

Just an animated doodle.

Baroque divide lines come alive

Sat, 22 Feb 2020 15:42:42 +0300

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.

4 bits ought to be enough for anyone

Thu, 20 Feb 2020 21:42:42 +0300

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.

4KB Rust & WASM: Finding functions

Sat, 08 Feb 2020 21:42:42 +0300

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.

Making fruit loops dance with Rust & WASM in 4KB

Mon, 03 Feb 2020 21:42:42 +0300

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.

Raking through the embers

Tue, 26 Sep 2017 21:42:42 +0300

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

Embers (inline)

Sat, 02 Sep 2017 19:42:42 +0300

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.

Embers

Thu, 31 Aug 2017 09:42:42 +0300

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)

Triangle Waves

Wed, 30 Aug 2017 21:42:42 +0300

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.

Sketching a logo with shaders

Thu, 24 Aug 2017 09:42:42 +0300

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.

thndl v3

Fri, 19 May 2017 19:41:06 +0300

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.

Some live coding with python

Tue, 07 Oct 2014 09:42:00 +0300

I've worked on a few different live coding environments in the past, but now I thought I would try to make something simple with Python that could later maybe form the basis for a bigger tool.

How DNG compresses raw data with lossless JPEG92

Sat, 04 Oct 2014 09:42:00 +0300

The Back Story

For the last year, I've been developing a cross-platform (i.e. Linux, Mac and Windows) Python-based desktop application called "MlRawViewer".

It was born out of the troubles I had working with the large raw video files produced using Magic Lantern with my Canon 7D (see Life Without Artifacts for more details).

Life Without Artifacts

Tue, 24 Sep 2013 09:42:00 +0300

Practically every film or video you watch these days is made up from thousands of 8x8 blocks of pixels described by a tiny stream of bits taking up just a fraction of the size of the original uncompressed data.

When the bitrate is high and the compression was done well (for example in a BluRay film), it can be almost impossible to tell this while the image is changing and you aren't sitting close to the screen.

RAW, a new way of recording the world

Sat, 21 Sep 2013 09:42:00 +0300

1:1 crop from a 7D RAW video frame. Processed with RawTherapee (sharpening, noise reduction).

A while ago I bought a Canon 7D DSLR camera to use for taking pictures and making videos. It's had a good life so far, producing thousands of pictures and many videos from different events.

Filming shaders

Fri, 05 Apr 2013 09:42:00 +0300

Some of the most interesting shaders are self contained 4 dimensional worlds defined entirely by maths. With a powerful GPU rendering them in real time at 60 frames per second, they can look utterly stunning.

But what to do in case you don't have the most powerful GPU to enjoy these?

Well, if you are willing to give up on interaction, another option is to render the shader frames to a file and create a video from them.

Crunching Rays in your Browser

Wed, 27 Mar 2013 09:42:00 +0300

Shader recap

Thu, 29 Nov 2012 09:42:00 +0300

So far I've posted 9 articles here covering different techniques for making OpenGL shaders.

For those of you that have been following and trying things out, I thought this might be a good place for a recap.

I introduced the different built-in functions of GLSL as we needed them to achieve different goals, but at some point you might have been wishing for a compact reference to all the available functions.

More noise

Fri, 23 Nov 2012 09:42:00 +0300

Now we have a function which can give us a random-ish looking number between 0-1 for every pixel we render with a shader.

By using floor as we did earlier with continuous numbers, we can now have a random number for each different region of the image.

Noise from numbers

Thu, 22 Nov 2012 09:42:00 +0300

Sometimes, a little noise is all you need to go from synthetic to organic.

The world is unpredictable, and that makes it interesting.

The same rules applies to shaders - unpredictable output makes for more interesting and natural-looking results. So how do you make a shader output unpredictable results?

Continuously discrete

Mon, 05 Nov 2012 09:42:00 +0300

Smooth looking images have every pixel quite similar to the ones all around them, while still being different enough to form a picture that isn't just one solid colour.

When a shader program is used to make an image, it is typically fed with input values (say x and y coordinates) that are only slightly different for each pixel.

If those slight differences are preserved in the calculations the shader makes, the output image will be smooth.

Interesting images however need changes in them. Tools like step, mod and abs are good for creating those, but still they tend to generate quite predictable images, which are actually not so interesting.

Going round in squircles

Mon, 29 Oct 2012 09:42:00 +0300

If you were an N9 user, you might have noticed something about the shapes of many of the icons it used.

They weren't quite the usual squares, or even rectangles with rounded corners, but another shape called (I kid you not) a squircle, which if that wikipedia link is to be believed, is a kind of "superellipse".

Here's a picture of a squircle (in red) and a similar sized rounded rectangle (in green) so you can see the subtle differences:

Mixing it up a bit

Mon, 29 Oct 2012 09:42:00 +0300

With just a few shader functions like length, mod and max, I can make simple repeating shapes like squares, circles, and lines. With stretching and skewing of the coordinates, these can be moulded in all kinds of interesting ways.

But still, when I'm trying to create a more complex image, more techniques are needed.

One function that opens up a whole new world of possibilities is the GLSL blending function mix.

The Art of Repepetition

Mon, 22 Oct 2012 09:42:00 +0300

Sometimes, differences everywhere aren't what you need. Constraints, like limited memory, bandwidth or performance, call for a different strategy.

Filling large areas of space when you can't pick a unique colour for each point means mastering the art of repetition.

Square shaped shaders

Tue, 16 Oct 2012 09:42:00 +0300

We already saw how the GLSL (that's the OpenGL Shader Language) built-in function "length" can be used to calculate the distance of a point from the centre (0,0) - great for making circles.

GLSL has many other built in functions. Lets use a couple of those to make squarish shapes.:

vec2 r=abs(c.xy);
f=vec4(r,0.,1.)

Learning to shade

Wed, 10 Oct 2012 09:42:00 +0300

A*(Note: ThNdl v1.0 had the live shader editor. thndl_3, which you are reading now, doesn't. Sorry)*

So far on ThNdl, I've shown you some simple OpenGL shaders, and teased you with some not-so-simple ones.

If the whole idea of shaders is new to you, you might be wondering how you can learn more about them. I think, as with most things, the best way to learn is by doing.

The Pixel Swarm

Wed, 03 Oct 2012 09:42:00 +0300

Until quite recently, I was working a lot with Qt. One of the best and most fun features in the latest version - Qt5 - is the QML ShaderEffect, which lets you easily draw and animate almost anything to the screen using just a tiny OpenGL shader program.

If you aren't familiar with shaders, they are small programs - typically only a few lines of code - which are run directly on a GPU. But, be warned... once you start learning and writing them it's hard to stop!