I had some loose thoughts of what I was going to work on today: I could convert a python paper trading crypto bot into rust, work on turning tweets to music, read some crypto currency code, read some well formed libraries, read a book on DNS, or work on a selenium project and perhaps turn it into an ML project about auto generating css.

After suffering from food coma and social fatigue around 2pm I remembered someone mentioning shaders. Ahh. So I fired up trusty google and settled on this excellent tutorial using shadertoy.com (which I also love). I also book marked this site on shaders, which also looks interesting.

So what is a shader? It is a process that runs an algorithm on generating a pixel color on all pixels at ONCE in PARALLEL on the GPU.  Shaders take two variables called shader variables.  They are both vectors: the xy location of the pixel and the rgba value of the pixel. There are other variables that are passed from the CPU to the GPU like screen size and time and these are called uniforms. I sort of like to think of them as globals.   I imagine that this is how a quantum computer will talk to a classical computer.

My first goal was to develop an intuition around the pixel.   How does changing the r,b,g values affect the color on an intuitive level.

The gray scale – so how do we translate rgb into gray scale. As I was going through the tutorial I was hoping for a deeper intuition around the pixel and rgb.  The inspiration hit me when I realized that gray values are when the r,g,b all have the same value. So the question is how to turn rgb into the same value. This is is not so hard, we can average, average the highest and lowest, take the middle, the mode, interpolate and best fit, you get the idea – but really just pick a damn value and make it the same for the r,g,b.  If we want to green screening we are relating the r and b to g – (ie  g  > r+b )

My second goal was to develop an in intuition around periodicity and change.  For this I fired up R which I have not used since the great credit crises of 2008.    If we want to generate periodic effects we can use sine and cosine. But really, what is happening when we apply this to a pixel. Looking at the graphs in R gave me a better sense – but i feel like my intuition is still not there – I must draw this out manually or something.

Section two was about shaders with threejs which I have worked with  a ton – although  not with the shader code.

Section three was about lighting and while at this point I feel like I have a good understanding of what a shader is and how to work with uniforms.  The part on lighting touches upon normalization and more pixel intuition. I feel like I learned a bunch of neat tricks.

I’m not sure if I’ll do anything more with shaders- but maybe it would be nice to develop a deeper sense of graphics programming with shaders.