p = [];

var t = 0;

var dt = 0.005;

var amt = 50;

var marg = .1;

var shape = 'circle';

​

var bezieroffset = 1

​

function setup() {

  createCanvas(400, 400);

  amtS = createSlider(3, 5000, amt);

  amtS.input(updateAmt);

  slider_bezieroffset  = createSlider(1, 5, 1);

  slider_bezieroffset.input(drawAgain);

  sel_shape = createSelect();

  sel_shape.position(10, 430);

  sel_shape.option('random');

  sel_shape.option('circle');

  sel_shape.option('square');

  sel_shape.changed((e) => shape=sel_shape.value());

​

  save_btn = createButton('export to svg');

  save_btn.mouseReleased(reCreateAsSVG);

  save_btn.position(120,430)

  updateAmt();

  colorMode(HSB, 100);

}

​

function drawAgain() {

  bezieroffset=slider_bezieroffset.value();

  push();

  colorMode(RGB);

  background(255,255,255);

  pop();

  t=0;

  drawlines();

}

​

function updateAmt() {

  push();

  colorMode(RGB);

  background(255,255,255);

  pop();

  amt=amtS.value();

  bezieroffset=slider_bezieroffset.value();

  t=0;

  while (p.length > amt && p.length > 0) p.splice(0, 1);

  for (var i = 0 ; i < amt-p.length; i++){

    p.push(createRandomPointBasedOnShape());

  }

}

​

​

function createRandomPointBasedOnShape(){

  var result;

  switch (shape) {

    case 'circle':

      a = random(0, 2*PI)

      x = (width/2) + (100  * cos(a));

      y = (height/2) + (100  * sin(a));

      result = createVector(x,y);

      break;

    case 'square':

      const sides = [

      [1, height],

      [width, 1],

      [0, 1],

      [1, 0],

    ];

​

    const [dx, dy] = sides[Math.floor(Math.random() * 4)];

    var x = constrain(random(width*marg, width-(width*marg)) * dx, width*marg, width-(width*marg));

    var y = constrain(random(height*marg, height-(height*marg)) * dy, height*marg, height-(height*marg));

​

    var bananPos = createVector(x, y);

​

    result = createVector(x, y);

      break;

    case 'random':

    default:

      result = createVector(random(width*marg, width-(width*marg)),

                        random(height*marg, height-(height*marg)));

      break;

  }

  result.z = random()*100;

   return result;

}

function mouseClicked(){

  if (mouseY>height || mouseX<0 || mouseY<0 || mouseX>width) return;

  push();

  colorMode(RGB);

  background(255,255,255);

  pop();

  t=0;

  p.splice(0, p.length);

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

    // todo put mouse coords and clamp within bounds

    p.push(createRandomPointBasedOnShape())

  }

}

​

function drawGUI(){

  push();

  rect(0,0,100,50)

  text(`amt ${amt}`, 2, 12);

  text(`length ${p.length}`, 2, 22);

  text(`t ${t.toFixed(2)}`, 2, 32);

  text(`shape ${shape}`, 2, 42);

  // boredom struck

  translate(61, 10)

  rotate(.2);

  fill('green')

  rect(-2,-10,66,17);

  fill('red')

  text('debug cool',0,0);

  pop();

}

​

function reCreateAsSVG(){

  svg = createGraphics(400,400, SVG);

  svg.noFill();

  svg.colorMode(HSB, 100);

​

  var x,y, p2,p3,p4;

    for (var [i,v] of p.entries()){

      v.z+=random()/10

      svg.push()

      svg.stroke(noise(v.z)*100, 75, 85);

      svg.circle(v.x,v.y,5);

    switch(bezieroffset) {

      case 1:

        p1=p[(i+1)%p.length];

        // x = bezierPoint(v.x, p[(i+1)%p.length].x, p[(i+1)%p.length].x, p[(i+1)%p.length].x, t);

        // y = bezierPoint(v.y, p[(i+1)%p.length].y, p[(i+1)%p.length].y, p[(i+1)%p.length].y, t);

        svg.bezier(v.x, v.y, p1.x, p1.y , p1.x, p1.y, p1.x, p1.y);

        break;

      case 2:

        p1 =p[(i+1)%p.length];

        p2 = p[(i+2)%p.length];

        // x = bezierPoint(v.x, p[(i+2)%p.length].x,p2.x, p1.x, t);

        // y = bezierPoint(v.y, p[(i+2)%p.length].y, p[(i+2)%p.length].y, p[(i+1)%p.length].y, t);

        svg.bezier(v.x, v.y, p2.x, p2.y , p2.x, p2.y, p1.x, p1.y);

        break;

      case 3:

        default:

        p1 = p[(i+1)%p.length];

        p2 = p[(i+2)%p.length];

        p3 = p[(i+3)%p.length];

        // x = bezierPoint(v.x, p[(i+1)%p.length].x, p[(i+2)%p.length].x, p[(i+3)%p.length].x, t);

        // y = bezierPoint(v.y, p[(i+1)%p.length].y, p[(i+2)%p.length].y, p[(i+3)%p.length].y, t);

        svg.bezier(v.x, v.y, p1.x, p1.y , p2.x, p2.y, p3.x, p3.y);

        break;

        case 4:

        p3 = p[(i+3)%p.length];

        // x = bezierPoint(v.x, width/2, width/2, p[(i+3)%p.length].x, t);

        // y = bezierPoint(v.y, height/2, height/2, p[(i+3)%p.length].y, t);

        svg.bezier(v.x, v.y, width/2, height/2 , width/2, height/2, p3.x, p3.y);

        break;

        case 5:

        p3 = p[(i+3)%p.length];

        x = bezierPoint(v.x, random()*50,random()*400, p[(i+3)%p.length].x, t);

        y = bezierPoint(v.y,random()*400, random()*50, p[(i+3)%p.length].y, t);

        svg.bezier(v.x, v.y, random()*50, random()*400 , random()*400, random()*50, p3.x, p3.y);

        break;

      } //endswitch

​

    svg.pop();

​

​

  } //end forloop

  image(svg,0,0);

  save(svg, 'bezier curves.svg')

  print('saved barely! (feature is a WORK IN PROCESS.)');

}

​

function drawlines(){

    for (var [i,v] of p.entries()){

    var x,y;

    switch(bezieroffset) {

      case 1:

        x = bezierPoint(v.x, p[(i+1)%p.length].x, p[(i+1)%p.length].x, p[(i+1)%p.length].x, t);

        y = bezierPoint(v.y, p[(i+1)%p.length].y, p[(i+1)%p.length].y, p[(i+1)%p.length].y, t);

        break;

      case 2:

        x = bezierPoint(v.x, p[(i+2)%p.length].x, p[(i+2)%p.length].x, p[(i+1)%p.length].x, t);

        y = bezierPoint(v.y, p[(i+2)%p.length].y, p[(i+2)%p.length].y, p[(i+1)%p.length].y, t);

        break;

      case 3:

        default:

        x = bezierPoint(v.x, p[(i+1)%p.length].x, p[(i+2)%p.length].x, p[(i+3)%p.length].x, t);

        y = bezierPoint(v.y, p[(i+1)%p.length].y, p[(i+2)%p.length].y, p[(i+3)%p.length].y, t);

        break;

        case 4:

        x = bezierPoint(v.x, width/2, width/2, p[(i+3)%p.length].x, t);

        y = bezierPoint(v.y, height/2, height/2, p[(i+3)%p.length].y, t);

        break;

        case 5:

        x = bezierPoint(v.x, random()*50,random()*400, p[(i+3)%p.length].x, t);

        y = bezierPoint(v.y,random()*400, random()*50, p[(i+3)%p.length].y, t);

        break;

    }

    v.z+=random()/10

    // print(noise(v.z)*255)

    push()

    stroke(noise(v.z)*100, 75, 85);

    point(x,y);

    if (t==0) circle(v.x, v.y, 5);

    pop();

​

  }

}

function draw() {

  drawlines();

  // ignore this

  // push();

  // noFill();

  // rect(width*marg,height*marg, width-2*(width*marg), height-2*(height*marg));

  // pop();

  t+=dt;

  drawGUI();

}