​

goal: create a continuous path of connecting bezier curves and have a point walk across them at dynamic speed. 

​

In the end I want this to look like the windows mystify screensaver

​

*/

​

var x,y,tx,ty, vx1, vx2, vy1,vy2, px1,py1 ,px2,py2,t1,t2,t3,t4,tt1,tt2,tt3,tt4;

​

DISTMAX = 5;

​

var t = 0;

var dx=0.1;

var dy=0.26;

​

var v1 = [];

var v2 = [];

​

var lines = [];

​

function setup() {

  createCanvas(400, 400);

  noFill();

  frameRate(60);

  for (var i = 0; i < 4; i++) {

    v1.push(random(-100,500))

    v2.push(random(-100,500))

  }

  // origin

x = random(-100, 500);

y = random(-100, 500);

​

// target

tx = random(-100, 500);

ty = random(-100, 500);

​

vx1 = random(-100, 500);

vy1 = random(-100,500);

​

vx2 = random(-100,500);

vy2 = random(-100,500);

  [t1,t2,t3,t4] = [50, 50 ,250, 250];

  tt1 = random(min(t1,t3), max(t1,t3))

  tt2 = random(min(t2,t4), max(t2,t4))

  tt3 = random(min(t1,t3), max(t1,t3))

  tt4 = random(min(t2,t4), max(t2,t4))aud

}

​

function shiftPoints(){

  x = tx;

  vx1 = vx2;

  vx2 = x;

  tx = random(-100,500);

  y= ty;

  vy1=vy2;

  vy2=y;

  ty = random(-100,500);

  var tmp;

  v1 = [v1[3], v1[2], v1[0], random(-100,500)];

  v2 = [v2[3], v2[2], v2[0], random(-100,500)];

​

  [t1,t2,t3,t4] = [50, 50 ,250, 250];

  tt1 = random(min(t1,t3), max(t1,t3))

  tt2 = random(min(t2,t4), max(t2,t4))

  tt3 = random(min(t1,t3), max(t1,t3))

  tt4 = random(min(t2,t4), max(t2,t4))

}

​

​

function draw() {

  colorMode(RGB);

  background(0);

  stroke(255);

​

  if ( dist(x,0, tx, 0) < DISTMAX)  {

    tx = random(-100, 500);

  }

  if ( dist(y, 0, ty, 0 ) < DISTMAX ) {

    ty = random(-100, 500);

  }

  // first, mostly hardcoded version

  stroke(50,50,50,50);

  bezier(x,y, vx1, vy1, vx2, vy2, tx, ty);

  px1 = bezierPoint(x,vx1,vx2,tx, t);

  py1 = bezierPoint(y,vy1,vy2,ty, t);

  circle(px1,py1, 5);

  // a more generic version

  // (looks like zip(v1,v2) as arguments...)

  bezier(v1[0], v2[0], v1[1], v2[1], v1[2], v2[2], v1[3], v2[3]);

  px2 = bezierPoint(v1[0],v1[1],v1[2],v1[3], t);

  py2 = bezierPoint(v2[0],v2[1],v2[2],v2[3], t);

  circle(px2,py2, 5);

  lines.push([px1,py1,px2,py2]);

  if (lines.length > 100){

    lines.shift();

  }

​

  for (var i =0 ; i < lines.length; i++){

    var [a,b,c,d] = lines[i];

    colorMode(HSL, 100, 100, 100);

    stroke(i,i+30,i/10+25,i);

    strokeWeight(dist(a,b,c,d)/42);

    bezier(a,b,tt1,tt2,tt3,tt4,c,d);

  }

  t+=0.01;

  if (t > 0.9999 ) {

    t=0;

    shiftPoints();

  }

  strokeWeight(1);

  rect(0,0,400,400);

  rect(2,2,396,396);

}