Processing Logo

/****

 * LOGO

 * twitter.com/mattywillo_

 *

 * made for twitter.com/sableRaph's #WCCChallenge

 * the topic was LOGO to celebrate Processings 20th anniversary

****/

​

console.warn = ()=>{}; //prevents the console warning about duplicate p5 import

new p5(); //causes a warning but allows use of p5 functions before setup, via @gorillasu

​

let step = 0.000001;        //step per frame

let gt = 0.5;             //current timestep

let loop = 0;             //how many times we've looped so far

let dim = 800;            //dimension of the sketch

const pathRes = 100;       //resolution of the lines

const lineWeight = .10065; //thickness of the lines

let cycle = true;         //should we cycle through outputs

let currentOutput = 0;    //starting output

const bezControlPoints = [[0, -.75], [.75, -.75], [.75, .25], [0, .25]];                  //control points for the curve

const stemPoints = [[-.75, .5], [0, -.5]];                                                //control points for the long line

const dashPoints = [[-.75, -.25], [-.5, .25]];                                            //control points for the short line

const colours = [[5/255, 100/255, 1], [30/255, 50/255, 170/255], [130/255, 175/255, 1]];  //colours for each line

​

//these are used to track the cylcing and make sure we don't repeat outputs until we've seen them all

let nextOutput = 0;

let unseenOutputs = [];

​

//ctx is an array of p5 contexts, one for each out

//we could use just two, one for the current and one for the next output,

//but some outputs rely on not clearing the background and would break if we did that,

//so each gets its own output

let ctx;

​

//collideCtx is a p5 context that will be filled with a baked distance field to each shape in the logo

//used for quick bounds and collision checking, see below for details

let collideCtx;

let collidePixels;

​

//some timing functions and a functional composition operator for combining them

const t = {

  invCubic:  (t=>1-(1-t)*(1-t)*(1-t)),

  smoothStep: (t=>t*t*(3-2*t)),

  smootherStep: (t=>t*t*t*(t*(t*6-15)+10)),

  loop: (t=>1-abs((0.5-t)*2)),

  nTimes: (n=>(t=>fract(t*n))),

}

const comp = (...fns)=>fns.reduce((a,b)=>(x=>a(b(x))),(x=>x));

​

//this whole section defines a bunch of functions for calculating and moving points

//probably should be using some of p5's built in features or a vector library,

//but theres nothing too complicated and I find this style easier to work with

​

//return a direction vector between two points

const dirVec = ([x1,y1],[x2,y2])=>[x2-x1,y2-y1];

//return the distance between two points

const dist = ([x1,y1],[x2,y2])=>Math.hypot(x2-x1,y2-y1);

//normalise a vector

const normalise = (x,y)=>{let l = Math.sqrt((x*x)+(y*y)); return l==0?[x,y]:[x/l, y/l];}

//rotate a vector

const flip = (x,y)=>[-y,x];

//point on a cubic bezier (a,b,c,d) at pos t

const bezP = (a,b,c,d,t) => Array.isArray(a)?a.map((x,i)=>bezP(a[i], b[i], c[i], d[i], t)):Math.pow(1-t,3)*a+3*Math.pow(1-t,2)*t*b+3*(1-t)*(t*t)*c+Math.pow(t,3)*d;

//derivative/tangent of a cubic bezier (a,b,c,d) at pos t

const bezT = (a,b,c,d,t) => Array.isArray(a)?a.map((x,i)=>bezT(a[i], b[i], c[i], d[i], t)):-3*Math.pow(1-t,2)*a+3*Math.pow(1-t,2)*b-6*t*(1-t)*b-3*Math.pow(t,2)*c+6*t*(1-t)*c+3*Math.pow(t,2)*d;

//lerp between two vectors by magnitute t

const lerpVec = ([x1,y1],[x2,y2],t) => [x1+t*(x2-x1),y1+t*(y2-y1)];

//move a in direction b by factor f

const moveVec = ([x1,y1],[x2,y2],f)=>[x1+x2*f,y1+y2*f];

//add b to a

const addVec = (a,b)=>moveVec(a,b,1);

//invert vector

const invVec = ([x1,y1])=>[-x1,-y1];

​

​

//generate paths for each shape

const paths = [

  [...Array(pathRes)].map((x,i)=>({

    point: bezP(...bezControlPoints, i/(pathRes-1)),

    normal: flip(...normalise(...bezT(...bezControlPoints, i/(pathRes-1)))),

  })),

  [...Array(pathRes)].map((x,i)=>({

      point:lerpVec(...stemPoints, i/(pathRes-1)),

      normal: flip(...normalise(...dirVec(...stemPoints))),

  })),

  [...Array(pathRes)].map((x,i)=>({

      point:lerpVec(...dashPoints, i/(pathRes-1)),

      normal: flip(...normalise(...dirVec(...dashPoints))),

  })),

]

​

//generate a polygon bounds for each shape

//takes a list of objects {point:..., normal:...}, and a weight, and returns bounds for a polygon

const genBounds = (p,w)=>p.reduce((acc,v)=>[moveVec(v.point, v.normal, w), ...acc, moveVec(v.point, v.normal, -w)], []);

const bounds = paths.map(p=>genBounds(p,lineWeight));

​

//samples the collision texture and returns distance to each shape

//negative numbers are inside the shape

const collide = ([x,y])=>{

  if(x>1||x<=-1||y>1||y<=-1) { return [2,2,2]; }

  let d = dim*pixelDensity();

  let off = floor((floor((-y*.5+.5)*d) * d + floor((x*.5+.5)*d))*4);

  return [collidePixels[off], collidePixels[off+1], collidePixels[off+2]].map(i=>i/255*2-1);

}

​

//takes a p5 context and draws the background grid

const drawGrid = (ctx)=>{

  for(let i = -1; i < 1; i+=.25) {

    ctx.stroke(200/255);

    ctx.strokeWeight(2/dim);

    ctx.line(-1, i, 1, i);

    ctx.line(i, -1, i, 1);

  }

}

​

//array of outputs

//each element is a function that takes a p5 context and draws a frame to it

//several of them use a wrapper function to create state that is maintained between frames

//for example:

//(()=>{let state=0; return (ctx)=>{/*CODE TO DRAW HERE*/}})()

//will return a function that has a persistent variable "state" between invocations

const outputs = [

  // THE STANDARD ONE

  (ctx)=>{

    ctx.background(242/255,247/255,255);

    drawGrid(ctx);

    ctx.noStroke();

​

    bounds.forEach((b,bi)=>{

      ctx.fill(...colours[bi]);

      ctx.beginShape(TESS);

      b.forEach((p,i)=>ctx.vertex(...p.map((v,j)=>v)))

      ctx.endShape(CLOSE);

    });

  },

  // THE WIBBLY WOBBLY ONE

  (ctx)=>{

    ctx.background(242/255,247/255,255);

    drawGrid(ctx);

    ctx.noStroke();

​

    bounds.forEach((b,bi)=>{

      ctx.fill(...colours[bi]);

      ctx.beginShape(TESS);

      b.forEach((p,i)=>ctx.vertex(...p.map((v,j)=>v+(sin(p[0]*p[1]*PI*8*(comp(t.smoothStep, t.loop)(gt)*2-1))*0.1))))

      ctx.endShape(CLOSE);

    });

  },

  // THE SPIN TO WIN ONE

  (ctx)=>{

    ctx.background(242/255,247/255,255);

    drawGrid(ctx);

    ctx.noStroke();

​

    ctx.push();

    for(let k = 0; k < lerp(0, 20, comp(t.invCubic, t.loop)(gt)); k++) {

      ctx.scale(lerp(1.00,0.95,t.loop(gt)));

      ctx.rotate(lerp(0,2,t.smoothStep(gt))*PI);

      bounds.forEach((b,bi)=>{

        ctx.noStroke();

        ctx.fill(...colours[bi]);

        ctx.beginShape(TESS);

        b.forEach((p,i)=>ctx.vertex(...p.map((v,j)=>v)))

        ctx.endShape(CLOSE);

      });

    }

    ctx.pop();

  },

  // THE LINE ONE

  (ctx)=>{

    ctx.background(242/255,247/255,255);

    drawGrid(ctx);

​

    ctx.push();

    for(let k = 0; k < 30; k++) {

      ctx.rotate(0.005*PI);

      ctx.scale(1-0.05*(sin(gt*PI*k)*.5+.5));

      bounds.forEach((b,bi)=>{

        ctx.stroke(...colours[bi]);

        ctx.strokeWeight(0.005);

        b.forEach((p,i)=>ctx.line(...p, ...b[(i+1)%b.length]));

      });

    }

    ctx.pop();

  },

  // THE BLUE ONE

  (ctx)=>{

    ctx.background(242/255,247/255,255);

    ctx.noStroke();

​

    for(let k = 60; k > 0; k--) {

      ctx.push();

      ctx.scale(Math.pow(lerp(.95,.97,gt),k));

      ctx.translate(lerp(-0.01, -0.04, gt)*k, lerp(-0.04, -0.01, gt)*k);

      ctx.fill(...colours[k%3]);

      ctx.beginShape();

      ctx.vertex(-1,-1);

      ctx.vertex(1,-1);

      ctx.vertex(1,1);

      ctx.vertex(-1,1);

      bounds.forEach((b,bi)=>{

        ctx.beginContour();

        b.slice().reverse().forEach((p,i)=>ctx.vertex(...p.map((v,j)=>v)))

        ctx.endContour();

      });

      ctx.endShape(CLOSE);

      ctx.pop();

    }

  },

  //THE OTHER LINE ONE

  (ctx)=>{

    ctx.background(242/255,247/255,255);

    // drawGrid(ctx);

    ctx.noFill();

​

    ctx.push();

    ctx.scale(lerp(0.1,0.5,comp(t.smoothStep, t.loop)(gt)));

    ctx.push();

    for(let k = 0; k < lerp(80,30,comp(t.smoothStep, t.loop)(gt)); k++) {

      ctx.scale(1.02);

      ctx.translate(0.005*(sin(gt*k)*.5+.5), 0.005*(cos(gt*k)*.5+.5));

      bounds.forEach((b,bi)=>{

        ctx.stroke(...colours[bi]);

        ctx.strokeWeight(0.003);

        b.forEach((p,i)=>ctx.line(...p.map(x=>x+sin(gt*PI+x)*.1), ...b[(i+1)%b.length]));

      });

    }

    ctx.pop();

    ctx.pop();

  },

  //THE CRISS CROSS ONE

  (ctx)=>{

    ctx.background(242/255,247/255,255);

    drawGrid(ctx);

    ctx.noFill();

​

    bounds.forEach((b,bi)=>{

      ctx.stroke(...colours[bi]);

      ctx.strokeWeight(0.005);

      b.forEach((p,i)=>ctx.line(...p, ...b[(b.length-i+1)%b.length]));

      b.forEach((p,i)=>ctx.line(...p, ...b[(b.length-i-1)%b.length]));

    });

  },

  //THE CURLY ONE

  (ctx)=>{

    ctx.background(242/255,247/255,255);

    drawGrid(ctx);

    ctx.noFill();

​

    ctx.push();

    for(let k = 0; k < 10; k++) {

      ctx.scale(0.95);

      ctx.translate(0.05*sin(gt*k),0.05*sin(gt*k));

      bounds.forEach((b,bi)=>{

        ctx.stroke(...colours[bi]);

        ctx.strokeWeight(0.005);

        b.forEach((p,i)=>ctx.curve(...b[(b.length-i+1)%b.length], ...p, ...b[(i+1)%b.length], ...b[(b.length-i-1)%b.length]))

      });

    }

    ctx.pop();

  },

  //THE BOIDS ONE

  (()=>{

    let boids = [...Array(300)].map(()=>({

      // point: [1-random(-.1,.1),1-random(-.1,.1)],

      point: random([[0,0], [1,0], [0,1], [1,1]]),

      heading: [random(),random()],

      colour: colours[Math.random()*colours.length | 0],

    }));

    let speed = 0.02;

​

    return (ctx)=>{

      let sepF = lerp(.7,.8,noise(loop,1));

      let aliF = lerp(.4,.8,noise(loop,2));

      let cohF = lerp(.4,.8,noise(loop,3));

​

      ctx.background(242/255,247/255,255, 0.005);

      // ctx.background(242/255,247/255,255, 1);

      ctx.noStroke();

      ctx.fill(0);

      boids.forEach(b=>{

        near = boids.filter(a=>dist(a.point,b.point)<0.1);

        sepDir = normalise(...(near.reduce((acc,a)=>addVec(acc,dirVec(a.point,b.point)), [0,0])));

        aliDir = normalise(...near.reduce((acc,a)=>addVec(acc,a.heading), [0,0]));

        cohDir = normalise(...dirVec(b.point, near.reduce((acc,a)=>lerpVec(acc,a.point, 0.5), near[0].point)));

        b.heading = [0,0];

        b.heading = moveVec(b.heading, sepDir, sepF);

        b.heading = moveVec(b.heading, aliDir, aliF);

        b.heading = moveVec(b.heading, cohDir, cohF);

        b.heading = normalise(...b.heading);

        collisions = collide(moveVec(b.point, b.heading, speed));

        if(collisions.some(x=>x<0)) { b.heading = invVec(b.heading); }

        b.point = moveVec(b.point, b.heading, speed);

        b.point = b.point.map(i=>i>1||i<-1?-i:i);

        ctx.fill(...b.colour);

        // ctx.fill(...colours[collisions.indexOf(min(...collisions))])

        ctx.ellipse(...b.point, 0.06, 0.06);

      });

    };

  })(),

  //THE BOIDS ONE, BUT INSIDE THIS TIME

  (()=>{

    let boids = [...Array(300)].map(()=>({

      point: random(paths.flat()).point,

      heading: [random(),random()],

      colour: colours[Math.random()*colours.length | 0],

    }));

    let speed = 0.01;

    let sepF = .5;

    let aliF = .5;

    let cohF = .5;

​

    return (ctx)=>{

​

      ctx.background(242/255,247/255,255,0.01);

      ctx.noStroke();

      ctx.fill(0);

      boids.forEach(b=>{

        near = boids.filter(a=>dist(a.point,b.point)<0.05);

        sepDir = normalise(...(near.reduce((acc,a)=>addVec(acc,dirVec(a.point,b.point)), [0,0])));

        aliDir = normalise(...near.reduce((acc,a)=>addVec(acc,a.heading), [0,0]));

        cohDir = normalise(...dirVec(b.point, near.reduce((acc,a)=>lerpVec(acc,a.point, 0.5), near[0].point)));

        b.heading = [0,0];

        b.heading = moveVec(b.heading, sepDir, sepF);

        b.heading = moveVec(b.heading, aliDir, aliF);

        b.heading = moveVec(b.heading, cohDir, cohF);

        collisions = collide(moveVec(b.point, b.heading, speed));

        if(collisions.every(x=>x>0)) { b.heading = invVec(b.heading); }

        b.point = moveVec(b.point, b.heading, speed);

        b.point = b.point.map(i=>i>1||i<-1?-i:i);

​

        ctx.fill(...b.colour);

        ctx.ellipse(...b.point, 0.01, 0.01);

      });

    };

  })(),

  //THE WAVY LINE ONE

  (ctx)=>{

    ctx.background(242/255,247/255,255, 0.05);

    ctx.strokeWeight(0.002);

    for(let i = -.95; i < .95; i+=0.1) {

      let p = [-.95,i];

      for(let j = -.95; j < .95; j+= 0.01) {

        let q = p;

        p = lerpVec([-.95,i], [.95,i], map(j, -.95, .95, 0, 1));

        let c = Math.min(...collide(p));

        p[1] = p[1] + sin(p[0]*lerp(20,40, gt))*(c<0?t.loop(gt)*.1:t.loop(1-gt)*.01);

        ctx.line(...q, ...p);

      }

    }

  },

  //THE OTHER WAVY LINE ONE

  (ctx)=>{

    ctx.background(242/255,247/255,255, 0.05);

    ctx.strokeWeight(0.002);

    for(let i = -.95; i < .95; i+=0.05) {

      let p = [-.95,i];

      for(let j = -.95; j < .95; j+= 0.01) {

        let q = p;

        p = lerpVec([-.95,i], [.95,i], map(j, -.95, .95, 0, 1));

        let col = collide(p);

        let c = Math.min(...col);

        ctx.stroke(...colours[col.indexOf(min(...col))])

        p[0] = p[0] + sin(p[1]*10)*(c>0?t.loop(gt)*.1:t.loop(1-gt)*-.01);

        p[1] = p[1] + sin(p[0]*10)*(c>0?t.loop(gt)*.1:t.loop(1-gt)*-.01);

        ctx.line(...q, ...p);

      }

    }

  },

  //THE DOTTY WAVY ONE

  (ctx)=>{

    ctx.background(242/255,247/255,255);

    for(let i = 0; i <= 1; i+=0.05) {

      let a = lerp(-1,1, i);

      let b = lerp(-1,1, i);

      for(let j = 0.05; j <= 1; j+= 0.05) {

        let p = lerpVec([a, -1], [b, 1], j);

        let q = lerpVec([a, -1], [b, 1], j+0.05);

        let col = collide(p);

        let colour = [0,0,0];

        colour[0] = col[0]>0?col[0]:-col[0]/lineWeight;

        colour[1] = col[1]>0?col[1]:-col[1]/lineWeight;

        colour[2] = col[2]>0?col[2]:-col[2]/lineWeight;

​

        mc = min(...col);

        p[1] = p[1] + (sin(mc*20*gt)*.5+.5)*0.05;

        p[0] = p[0] + (cos(mc*20*gt)*.5+.5)*0.05;

        q[0] = q[0] + (cos(q[0]*2*gt)*.5+.5)*0.5;

        p[0] = p[0] + (sin(q[1]*2*gt)*.5+.5)*0.05;

​

        ctx.stroke(colour);

        ctx.strokeWeight(0.075);

        ctx.line(...p,...q);

      }

    }

  },

  //THE FLOW FIELD ONE

  (()=>{

    let boids = [...Array(3000)].map(()=>({

      point: [random(2)-1,random(2)-1],

      heading: [0,0]

    }));

    let speed = 0.005;

​

    return (ctx)=>{

      let nmag = lerp(1,100,noise(loop));

      let doff = lerp(0,2,noise(loop+gt));

      ctx.background(242/255,247/255,255, 0.01);

      ctx.noStroke();

      ctx.fill(0);

      boids.forEach((b,i)=>{

        collisions = collide(moveVec(b.point, b.heading, speed));

        let d = noise(...b.point.map(x=>x*nmag))+doff;

        b.heading[0] = b.heading[0] + cos((d*2-1)*PI)*.1;

        b.heading[1] = b.heading[1] + sin((d*2-1)*PI)*.1;

        b.heading = normalise(...b.heading);

        b.point = moveVec(b.point, b.heading, speed);

        b.point = b.point.some(i=>i>1||i<-1)||collisions.some(x=>x<0)?[random(2)-1,random(2)-1]:b.point;

        ctx.fill(...colours[i%3]);

        ctx.ellipse(...b.point, 0.005, 0.005);

      });

    };

  })(),

  //THE FLOW FIELD ONE BUT INSIDE

  (()=>{

    let boids = [...Array(3000)].map(()=>({

      point: [random(2)-1,random(2)-1],

      heading: [0,0]

    }));

    let speed = 0.005;

​

    return (ctx)=>{

      let nmag = lerp(1,100,noise(loop));

      let doff = lerp(0,2,noise(loop+gt));

      ctx.background(242/255,247/255,255, 0.01);

      ctx.noStroke();

      ctx.fill(0);

      boids.forEach((b,i)=>{

        collisions = collide(moveVec(b.point, b.heading, speed));

        let d = noise(...b.point.map(x=>x*nmag))+doff;

        b.heading[0] = b.heading[0] + cos((d*2-1)*PI)*.1;

        b.heading[1] = b.heading[1] + sin((d*2-1)*PI)*.1;

        b.heading = normalise(...b.heading);

        b.point = moveVec(b.point, b.heading, speed);

        b.point = b.point.some(i=>i>1||i<-1)||collisions.every(x=>x>0)?[random(2)-1,random(2)-1]:b.point;

        ctx.fill(...colours[i%3]);

        ctx.ellipse(...b.point, 0.005, 0.005);

      });

    };

  })(),

  //THE DANCING DOTS ONE

  (ctx)=>{

    ctx.background(242/255,247/255,255);

    ctx.noStroke();

    for(let i = -1; i <= 1; i+=0.075) {

      for(let j = -1; j <= 1; j+= lerp(0.05, 0.075, sin(gt*PI*4)*.5+.5)) {

        let sep = lerp(0, 0.03, sin(gt*i*20*PI+gt*j*50*PI)*.5+.5)

        let col = collide([i,j]);

​

        ctx.fill(...colours[1].map(x=>col[1]>0?1-col[1]:x));

        ctx.ellipse(i+sep,j+sep, col[1]>0?0.05*-col[1]:0.05);

        ctx.fill(...colours[2].map(x=>col[2]>0?1-col[2]:x));

        ctx.ellipse(i+sep,j-sep, col[2]>0?0.05*-col[2]:0.05);

        ctx.fill(...colours[0].map(x=>col[0]>0?1-col[0]:x));

        ctx.ellipse(i-sep,j-sep, col[0]>0?0.05*-col[0]:0.05);

      }

    }

  },

]

​

//this shader creates the flicker and transition effect

let outShaders = [

`

attribute vec3 aPosition;

varying vec2 uv;

​

void main() {

  gl_Position = vec4(aPosition*2.-1., 1.0);

  uv = aPosition.xy;

  uv.y = 1.-uv.y;

}

`,

`

precision mediump float;

varying vec2 uv;

uniform sampler2D texA, texB;

uniform float t,ft;

#define PI 3.14159265358979323846

​

//noise from gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83

float rand(vec2 c){

  return fract(sin(dot(c.xy ,vec2(12.9898,78.233))) * 43758.5453);

}

​

float noise(vec2 p, float freq ){

  float unit = 1./freq;

  vec2 ij = floor(p/unit);

  vec2 xy = mod(p,unit)/unit;

  // xy = 3.*xy*xy-2.*xy*xy*xy;

  xy = .5*(1.-cos(PI*xy));

  float a = rand((ij+vec2(0.,0.)));

  float b = rand((ij+vec2(1.,0.)));

  float c = rand((ij+vec2(0.,1.)));

  float d = rand((ij+vec2(1.,1.)));

  float x1 = mix(a, b, xy.x);

  float x2 = mix(c, d, xy.x);

  return mix(x1, x2, xy.y);

}

​

float pNoise(vec2 p, int res){

  float persistance = .5;

  float n = 0.;

  float normK = 0.;

  float f = 4.;

  float amp = 1.;

  int iCount = 0;

  for (int i = 0; i<50; i++){

    n+=amp*noise(p, f);

    f*=2.;

    normK+=amp;

    amp*=persistance;

    if (iCount == res) break;

    iCount++;

  }

  float nf = n/normK;

  return nf*nf*nf*nf;

}

​

//somewhat inspired by shadertoy.com/view/ldXGW4

//but adapted to flicker between two textures and also split the image when it flickers instead of just scrolling

void main() {

  vec2 auv = uv;

​

  float xoff = pNoise(vec2(t*15.,uv.y*20.),1)*.01 + pNoise(vec2(t, uv.y*500.),1)*.01;

  float yflick = abs(sin(t)*4.)*(1.-step(pNoise(vec2(t*2.5,1.),1),.2))*(1.-step(pNoise(vec2(t*5.5,uv.y),1),.1))*.5;

  float yflip = abs((ft)*4.)*(1.-step(pNoise(vec2(ft*15.0,1.),1),.1))*(1.-step(pNoise(vec2(ft*10.,1.),1),.1))*.5;

​

  bool flip = auv.y+yflip>1.0;

  auv.x = uv.x+xoff;

  auv.y = uv.y+yflick+yflip;

  auv.y = mod(auv.y, 1.);

​

  vec3 c = vec3(0);

​

  if(flip) {

    c = vec3(texture2D(texB, auv+vec2(.01,0)).x, texture2D(texB, auv).y, texture2D(texB, auv-vec2(.01,0)).z);

  } else {

    c = vec3(texture2D(texA, auv+vec2(.01,0)).x, texture2D(texA, auv).y, texture2D(texA, auv-vec2(.01,0)).z);

  }

​

  c -= sin(uv.y*1200.0)*0.1;

  gl_FragColor = vec4(c,1);;

}

`

];

​

//this shader generates the collision/distance texture for the shapes

//red = distance to bezier

//green = distance to long stroke

//blue = distance to short stroke

//all three are calculated as polygons

//we could treat the two rectangles as...rectangles, but this shader is only run once so it's Good Enough

let collideShaders = [

  outShaders[0],

`

precision mediump float;

#define PI 3.14159265358979323846

#define N `+pathRes*2+`

​

uniform vec2 polyA[N], polyB[N], polyC[N];

varying vec2 uv;

​

//adapted from iquilezles.org to work with glsl es < 3

float polygon(vec2 p, vec2[N] v )

{

    float d = dot(p-v[0],p-v[0]);

    float s = 1.0;

    vec2 e = v[N-1] - v[0];

    vec2 w =    p - v[0];

    vec2 b = w - e*clamp( dot(w,e)/dot(e,e), 0.0, 1.0 );

    d = min( d, dot(b,b) );

    bvec3 c = bvec3(p.y>=v[0].y,p.y<v[N-1].y,e.x*w.y>e.y*w.x);

    if( all(c) || all(not(c)) ) s*=-1.0;

    for( int i=1; i<N; i++ )

    {

        vec2 e = v[i-1] - v[i];

        vec2 w =    p - v[i];

        vec2 b = w - e*clamp( dot(w,e)/dot(e,e), 0.0, 1.0 );

        d = min( d, dot(b,b) );

        bvec3 c = bvec3(p.y>=v[i].y,p.y<v[i-1].y,e.x*w.y>e.y*w.x);

        if( all(c) || all(not(c)) ) s*=-1.0;

    }

    return s*sqrt(d);

}

​

void main() {

  vec2 p = uv*2.-1.;

  float r = polygon(p, polyA);

  float g = polygon(p, polyB);

  float b = polygon(p, polyC);

  r = r<0.?(1.+r)*.5:r*.5+.5;

  g = g<0.?(1.+g)*.5:g*.5+.5;

  b = b<0.?(1.+b)*.5:b*.5+.5;

  // r = r<0.?(1.+r/`+lineWeight+`)*.5:r*.5+.5;

  // g = g<0.?(1.+g/`+lineWeight+`)*.5:g*.5+.5;

  // b = b<0.?(1.+b/`+lineWeight+`)*.5:b*.5+.5;

  gl_FragColor = vec4(r,g,b,1);;

}

`];

let outShader, collideShader;

​

function draw() {

​

  //if we have no more unseen outputs, refill the array and remove the current output from the list

  if(!unseenOutputs.length) {

    unseenOutputs = [...Array(outputs.length)].map((_,i)=>i);

    unseenOutputs.splice(unseenOutputs.indexOf(currentOutput),1);

  }

​

  //if we're about to loop, increment loop and pick a new output

  if(gt+step*deltaTime > 1) {

    loop+=1;

    // if(loop%2){

    if(cycle) {

      currentOutput = nextOutput;

      nextOutput = random(unseenOutputs);

      unseenOutputs.splice(unseenOutputs.indexOf(nextOutput),1);

    }

    // }

  }

​

  gt = (gt+step*deltaTime)%1;

​

  //run the draw functions for the current and next output, passing them their matching context

  outputs[currentOutput](ctx[currentOutput]);

  outputs[nextOutput](ctx[nextOutput]);

​

  //set the uniforms for the shader draw a rectangle

  //comment these 6 lines and uncomment the following line to see the output with no flicker

  outShader.setUniform("texA", ctx[currentOutput]);

  outShader.setUniform("texB", ctx[nextOutput]);

  outShader.setUniform("t", gt);

  outShader.setUniform("ft", gt>.75?(gt-.75)*4:0);

  shader(outShader);

  rect(0,0,0);

  // image(ctx[currentOutput], -dim*.5, -dim*.5);

}

​

function setup() {

  createCanvas(dim, dim, WEBGL);

  colorMode(RGB, 1);

  setAttributes('antialias', true);

  noiseSeed(9)

​

  outShader = createShader(...outShaders);

​

  //create and render the collision texture

  collideShader = createShader(...collideShaders);

  collideCtx = createGraphics(dim, dim, WEBGL);

  //there seems to be a bug in p5js where if we create a shader with createShader instead of loadShader

  //it will only work in the main context, and can't be rendered to an off screen buffer

  //setting _renderer like this seems to fix the problem?

  collideShader._renderer = collideCtx._renderer;

  collideCtx.colorMode(RGB, 1);

  collideCtx.scale(dim/2.);

  collideCtx.shader(collideShader);

  collideShader.setUniform("polyA", bounds[0].flat());

  collideShader.setUniform("polyB", bounds[1].flat());

  collideShader.setUniform("polyC", bounds[2].flat());

  collideCtx.rect(0,0,0);

  collideCtx.loadPixels();

  collidePixels = collideCtx.pixels;

​

  //create a context for each output

  //I prefer to work in a -1...1 coordinate system and a 0...1 colour system

  //so I transform each output here

  ctx = Array(outputs.length).fill(0).map(_=>createGraphics(dim, dim));

  ctx.forEach(p5=>{

    p5.colorMode(RGB, 1);

    p5.scale(dim/2.);

    p5.translate(1, 1);

  });

​

  //generate the unseenOutput array, remove the current output and pick the next output

  unseenOutputs = [...Array(outputs.length)].map((_,i)=>i);

  unseenOutputs.splice(unseenOutputs.indexOf(currentOutput),1);

  nextOutput = Math.random()*outputs.length|0;

  unseenOutputs.splice(unseenOutputs.indexOf(nextOutput),1);

}

​