​

var x = [];

var y = [];

var list2D = [];

var list2DPoints = [];

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(0);

  stroke(255);

  //noFill();

  for (let i = 0; i < x.length-1; i++) {

    var xRand = random(5)

    var yRand = random(5)

    strokeWeight(10/dist(x[i] + 10, y[i] + 10, x[i+1] + 10, y[i+1] + 10));

    line(x[i] + xRand, y[i] + yRand, x[i+1] + xRand, y[i+1] + yRand)

  }

}

​

function mouseDragged() {

    if(x.length < 100){

    x.push(mouseX);

    y.push(mouseY);

    list2D.push([mouseX, mouseY]);

    list2DPoints.push(new point2D());

    //list2DPoints.push(new point2D());

  }else{

    //reset after length goes over 100

    x.shift();

    y.shift();

    list2D.shift();

    list2DPoints.shift();

  }

}

​

class point2D {

  constructor() {

    this.x = mouseX;

    this.y = mouseY;

  }

  render(){

    curveVertex(this.x, this.y);

  }

}