🌱 faking shaders

This is how a sawtooth function looks from "above":

The y value is stored as opacity in a single dimension! Now we can plot a function for each block/pixel:

The following variables can be used:

• t = time in seconds
• i = block index between 0 and 1
• x = x between 0 and 1
• y = y between 0 and 1

The returned value is expected to be within 0 and 1. Each line is another color channel:
[cyan, magenta, yellow]%i

Here are some examples to copy paste:

(x-.5)*(y-.5)*(Math.sin(t*2)*8+16)%1

(y**x*(120+t))%1

(Math.cos((1-x)*y*43+t*4)+1)/2
(Math.sin((1-x)*y*32+t*4)+1)/2
(Math.sin(t)+1)/8

Math.ceil((x-.5)**2+(y-.5)**2-t/8%.1)/2
Math.ceil((x-.5)**2+(y-.5)**2-t/8%.2)/2
Math.ceil((x-.5)**2+(y-.5)**2-t/6%.3)/2

This way of rendering is very similar to what a shader would do, but we don't need to use WebGL. Of course, this is much slower, but that's not the point.