​

function setup() {

  // createCanvas(800,600, WEBGL);

  createCanvas(windowWidth, windowHeight, WEBGL);

  fs = createFilterShader(fs_src);

  // saveGif("magiceye.gif", 12);

}

​

function draw() {

  background(220);

  // rect(-width/2,-height/2,width,height)

  fs.setUniform("sz", 1.);//cos(frameCount));

  fs.setUniform("res", [windowWidth, windowHeight]);

  fs.setUniform("u_time", millis()*0.0001);

  filter(fs)

}

​

function windowResized() {

  resizeCanvas(windowWidth,windowHeight);

}

​

fs_src = `precision mediump float;

varying vec2 vTexCoord;

uniform sampler2D tex0;

uniform float u_time;

uniform vec2 res;

uniform float sz;

​

//https://iquilezles.org/articles/distfunctions2d/

float sdEquilateralTriangle( in vec2 p, in float r )

{

    const float k = sqrt(3.0);

    p.x = abs(p.x) - r;

    p.y = p.y + r/k;

    if( p.x+k*p.y>0.0 ) p = vec2(p.x-k*p.y,-k*p.x-p.y)/2.0;

    p.x -= clamp( p.x, -2.0*r, 0.0 );

    return -length(p)*sign(p.y);

}

float sdCircle( vec2 p, float r )

{

    return length(p) - r;

}

​

// https://iquilezles.org/articles/sdfrepetition/

float repeated(vec2 p, float s, float ut) {

   vec2 r = p - s * ceil(p/s)+.5;

   // return sdEquilateralTriangle(r, 0.2);

  return sdCircle(r, cos(ut*8.*0.25));

​

}

​

​

// corrected limited/finite repetition

float limited_repeated( vec2 p, vec2 size, float s , float ut)

{

    vec2 id = ceil(p/s);

    vec2  o = sign(p-s*id);

    float d = 1e20;

    for( int j=0; j<2; j++ )

    for( int i=0; i<2; i++ )

    {

        vec2 rid = id + vec2(i,j)*o;

    // limited repetition

        rid = clamp(rid,-(size-1.0)*0.5,(size-1.0)*0.5);

        vec2 r = p - s*rid;

        // d = min( d, sdf(r) );

d = min(d, sdCircle(r, cos(ut*8.*0.25)));

    }

    return d;

}

​

​

void main() {

  vec2 uv = vTexCoord;

  vec4 _col = texture2D(tex0, uv);

  vec2 p = (2. * gl_FragCoord.xy - res.xy*2.) / res.y;

  p *= 4.;//9.0;

  p *= -1.;

​

  // float d = limited_repeated(p, vec2(4., 2.), sz, u_time);

  float d = repeated(p, 1.,u_time);// sdEquilateralTriangle( p, 1.0 );

  vec3 col = (d>0.0) ? vec3(0.9,0.6,0.3) : vec3(0.65,0.85,1.0);

  col *= 1.0 - exp(-4.0*abs(d));

  col *= 0.8 + 0.2*cos(60.0*d);

  col = mix( col, vec3(1.0), 1.0-smoothstep(0.0,0.02,abs(d)) );

​

  gl_FragColor = vec4(col, 1.0);

}`;