This morning I sat down to draw and develop an intuitive sense of rgb/time (think sin/cos), and shaders. I was promptly hit by a massive anxiety attack (which is not my go to form of mental illness), and after two podcasts, two books, a nap, I still had the residual effects hours later.

I decided to pour a half bottle of Guinness into a nice mason jar and refocus.

So what do I mean by time and what the hell am I doing anyway, and why is this blog post entitled shaders in elm??? It will all come together –but perhaps not in one blog post.

As a recap, I think I write about this elsewhere, a shader is a piece of code that renders all pixels in parallel because it runs on the GPU. So if you have code that says something like

color_of_pixel = rgb(sin(current-time),sin(current-time),0)

it will be executed on all the pixels at the same time.

Great we can set colors, how can we make this animate, or how can we make the colors change.

This is where time comes in because animation is change over time and the way that we can change the pixel colors is by using current time as a variable.

A common way to use time to create an abstract animation is to use sine and cosine with the current time as the input. The reason this works so well is that these functions follow a regular pattern and are bounded. If you want to quickly create a shader animation set the color to something generated by a trigonometric function based on the current time. I realize that this is perhaps not the best explanation so I did some googling and found this great article.

So what I want to investigate is how does a continuous cyclical number (which i am calling time), when used as an input for generating a color, work on an intuitive level?

How does the color change when it is the format rgba? When you use time to alter r,g,b,and the alpha layer, one at a time, or all together, or staggered.

To answer this question i thought that instead of doing sketches maybe i should study functions in R. But then I thought – just do shader studies – but in ELM (because why use a language I actually am familiar with?).

So that is where I am now. I just installed elm-webgl, as well as the linear-algebra package, I took the shader example code and ran elm react and  I am all set running shaders on elm.  Tomorrow shader studies begin:

 

Another level of complexity I think about is the pixel location.  What happens when we use the current pixel location a variable, and how we can develop intuition about that.. Some thing like:

color_of_pixel = rgb(sin(current-time mod pixelx),sin(current-time mod pixely),0)

or something equally nuts, hopefully I can tackle it in my shader studies.