​

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

​

​

todo:

-more fun controls,

-export settings ?:D

- encapsulate as a class/object thing with boundaries

  ->> add more lines

- color changer/picker

- x/y locks on curves

​

​

*/

​

var x,y,tx,ty, vx1, vx2, vy1,vy2, px1,py1 ,px2,py2;

​

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);

  trackAlpha = createSlider(0, 255, 33, 1);

  sizeModifier =  createSlider(0.2, 150, 42, 1);

  shapeSelector = createSelect()

    shapeSelector.option('line');

      shapeSelector.option('circle');

        shapeSelector.option('triangle');

          shapeSelector.option('rect');

  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);

}

​

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)];

}

​

​

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(100,255,200,trackAlpha.value());

  strokeWeight(0.5);

  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();

  }

  // var [t1,t2,t3,t4] = lines[0];

  // 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))

  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)/sizeModifier.value());

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

    switch (shapeSelector.selected()){

        case 'circle':

        circle(a,b,c,d);

        break;

      case 'triangle':

        triangle(a,b,c,d,a,d);

        break;

        case 'rect':

        rect(a,b,c,d);

        break;

        case 'line':

        default:

        line(a,b,c,d);

    }

  }

  t+=0.01;

  if (t > 0.9999 ) {

    t=0;

    shiftPoints();

  }

  strokeWeight(5);

  rect(0,0,400,400);

  rect(2,2,396,396);

}