// - clustering?

// - more interesting motion ig

let path = [];

let stepslider;

let zoomLvl = 0;

let zoomPos = [0,0];

let coord = 0;

let leftorright = -1;

​

function setup() {

  createCanvas(500, 500);

  background(255);

  stepslider = createSlider(1, 25, 2);

  stepslider.style('width', width+'px');

  createButton('reset zoom').mousePressed(resetZoom);

  createButton('csv').mousePressed(saveCSV);

  //generate path here all at once

  path = [[0,random()*height]]

}

​

function draw() {

  background(255);

  for(let i=0;i<5;i++){

  coord+=0.1; //literally just adjust this number to make them more hairlike

  let step = stepslider.value();

  let dir  = noise(coord)*PI + PI/2 * leftorright;

  // path.push([

  //   max(min( path[path.length-1][0] + cos(dir)*step, width),0),

  //   max(min( path[path.length-1][1] + sin(dir)*step, height),0)  ])

  path.push([

    path[path.length-1][0] + cos(dir)*step,

    path[path.length-1][1] + sin(dir)*step ])

  if(path[path.length-1][0] > width){

    path.push([width,random()*height]);

    leftorright = 1;

  }

  if(path[path.length-1][0] < 0){

    path.push([0,random()*height])

    leftorright = -1;

  }

  drawPath(); //draws the path

  }

}

​

//drawing functions

​

function drawPath(){

  push()

  stroke(0);

  translate(-0.5*width*(2**zoomLvl-1),-0.5*height*(2**zoomLvl-1));

  scale(2**zoomLvl);

  strokeWeight(1/(2**zoomLvl));

  if(mouseIsPressed && mouseX<width && mouseY<height){

    zoomPos[0] += mouseX-pmouseX;

    zoomPos[1] += mouseY-pmouseY;

  }

  translate(zoomPos[0],zoomPos[1]);

  // for(let i=1;i<path.length;i++){

  //   line(path[i-1][0],path[i-1][1],path[i][0],path[i][1]);

  // }

  noFill();

  beginShape();

  for(let i=1;i<path.length;i++){

    vertex(path[i][0],path[i][1]);

  }

  endShape();

  pop();

  noStroke();

  fill(255);

  rect(0,0,120,50);

  fill(0);

  text("zoomlvl: " + zoomLvl, 10, 15)

  text("stitch count: " + path.length, 10, 25)

  text("fps: " + floor(frameRate()), 10, 35)

}

​

function mouseWheel(event){

  zoomLvl += Math.sign(event.deltaY) *0.3;

}

​

function resetZoom(){

  zoomLvl = 0;

  zoomPos = [0,0];

}

​

function saveCSV(){

  let table = new p5.Table();

  table.addColumn('x');

  table.addColumn('y');

  for(let i=0;i<path.length;i++){

    let newRow = table.addRow();

    newRow.setString('x', path[i][0]);

    newRow.setString('y', path[i][1]);

  }

  saveTable(table, 'path.csv');

}