Here, take a quick look at this:
I find it kind of mesmerizing, and heck, I'm the one that wrote the thing -
the 'Dreams' visuals, that is, I'm not that good at music (maybe someday)
(Feel free to skip around a bit by the way - everything after the 1h:14m:20s mark is my work)
Everything you're seeing there, the scene and foreground and reactive effects, are created entirely by code. A shader. (you can see more of my shaders here!)
I find that kind of magical.
I'll get into the technical explanation of how that's done in a bit, but first i want to talk a bit about why i find this kind of thing so cool and where it comes from.
I think I've always been fascinated by the things that other people said were impossible - my first thought when presented with an impossible problem is always 'but maybe there's a way?', and usually that's followed by 20 minutes or so of completely losing track of whatever else i was doing to try and come up with any way that maybe it might be done.
It's probably that instinctive curiousity and desire to just somehow make an idea real that led to most advancements in human history, i think - there's a particular kind of person that finds it incredibly rewarding to try and push the boundaries of what's possible, to actively seek out the impossible and try and solve it anyway, and to create things that feel impossible.
In programming and technology, a lot of them can be found in demoscene communities - their roots in creating showcases and, well, demos, for early computer systems. They needed to be marketed somehow, and the more flashy and impressive things you could show off on your amiga or atari, the better. But it's a creative instinct of people in pretty much every field, a desire that's driven by people going 'what if' and being unable to resist acting on it.
Here's a couple of my favourite demos I've come across:
'most bytes ever in a 64k'
'blast processing overdose'
Both of these look pretty cool by themselves, but I want you to have a little bit of an idea of the insane technical feats that they both are, too.
Clean Slate is a 64k demo - a single, 64 kilobyte, executable, that produces almost 5 minutes of music and video - a single frame of which takes up more space than the executable itself!
Overdrive 2 on the other hand, is a SEGA Mega Drive demo - hardware that is notably only meant to be able to draw 2D sprites, with no scaling or rotation, no transparency or blending, and absolutely no 3D of any kind. And yet...
Incredible productions like these are the reason why, when I first came across some demoscene productions
six or seven years ago, my immediate thought was 'woah. i need to learn how to do that.'
- the idea that people were making such incredibly cool things specifically to capture that sense of creating something impossible
was irresistable.
So back to the shaders. One particular category of demoscene event that caught my attention the most was shader livecoding - commonly done as a head to head 25-minute competition to write some kind of graphical effect from scratch, with nothing except a single pixel shader at your disposal.
Shaders, if you're not familiar, are essentially the backbone of all modern graphical rendering. They're used to control how graphical data is presented on your screen (among other things) - literally coloring in all the pixels of your display. Just about everything on your screen right now will be passing through a shader of some kind or other to get there.
Pixel shaders specifically (or 'fragment' shaders as they're also known), take in some arbitrary data from a program that wants to draw some graphics, such as images and colors, and do the work of deciding what color each output pixel should be. Thanks to running on your GPU, they're able to do that for millions of pixels at once at the same time.
And they let you to, truly, anything. You have full control over the exact color that is written to every pixel, so you can make them display whatever you want.. as long as you can figure out how to write the code to do that. But obviously you can't just write logic by hand for every one of those millions of pixels, so how do you do it?
Well, calling it shader code is slightly misrepresentative, because although it's written in C-like languages, the nature of shader code is really more like writing a set of equations. You have some input data, apply some equations and logic (code) on it, and then output the result. Those equations are the same for every single pixel, and the only thing that changes is the input data - so the challenge is writing functions that transform the input data in interesting ways.
I think explaining it like that is also slightly misrepresentative though, because it is still code - just the mindset you have to approach it with and the kinds of intuitions you build are very very different to the world of regular CPU-sided programming.
It's a lot simpler than you might think to create very complex things, at the cost of normally simple things being quite hard - a simple 3D scene written as shader equations could be under a hundred lines (or even just a few lines if you're really creative with it!), but making complex geometry entirely out of equations to put in it becomes very difficult very rapidly.
My shader for automaphonica, Dreams, is about a thousand lines, and that covers everything it does - 3D, 2D, geometry, lighting, music reactivity, etc. I think it's probably the most polished demoscene-style project i've ever made. It also only uses a couple of basic inputs - the position of the current pixel on screen, and the current time. (ignoring the audioreactivity and various static configuration controls).
It's still crazy to me that this kind of thing is even possible in the first place, and i'm really glad i spent the time to learn it. There's something incredibly cool about being able to write just a few lines of equations and conjure complex dreamlike worlds into existance.
I think that's pretty cool.
If you're interested in learning about writing this kind of stuff yourself, i found shadertoy and the articles of its creator, inigo quilez, to be incredibly helpful. There's also fragcoord.xyz, a pretty new site that's similar to shadertoy but with some additional features. Maybe at some point i'll write something up about how to do it myself - if i do, i'll add it here later.
dreaming colourful realities