2D SDF tests

Size Coding variation

Code

<canvas id="c">
<script>
    c=document.getElementById("c").getContext("2d") // Obtain a canvas context
    t=p=10 /* start the time at 10, and the matrix size as 10 */
    o=t*t
    /* We use various math functions (sin and pow) a few times, so alias to save
    bytes*/
    m=Math
    j=m.pow
    s=m.sin
    /* Run this code every `p` microseconds */
    setInterval(e=>{
        t+=1/o /* */
        c.clearRect(0,0,150,150); /* Clear the screen */
        /* Loop through the 10*10 matrix */
        for(x=0;x<o;x++) {
            k=8*s(j(x%p/p-s(t),2)+j(x/p/p+s(t),2))
            /* Draw a rectange at the correct x position, with a slight offset
            to the y. The rectange varies it's height based on how intense the 
            point is */
            c.fillRect(x%p*p,x,p/2,p/2-k)
        }
    } , p);
</script>
</canvas>

Minified

<canvas id="c"><script>c=document.getElementById("c").getContext("2d"),t=p=10,o=t*t,m=Math,setInterval(e=>{for(t+=1/o,c.clearRect(0,0,150,150),x=0;x<o;x++)j=m.pow,s=m.sin,k=8*s(j(x%p/p-s(t),2)+j(x/p/p+s(t),2)),c.fillRect(x%p*p,x,p/2,p/2-k)},p);</script></canvas>