​

let ptsx = [];

let ptsy = [];

let ptsxy = [];

let ptso = [];

let numPts = 0;

let sMouse = {x: 0, y: 0};

​

function clearPts() {

  ptsx = [];

  ptsy = [];

  ptsxy = [];

  ptso = [];

  numPts = 0;

}

​

function addPt(x,y) {

  ptsx.push(x);

  ptsy.push(y);

  ptsxy.push([x,y]);

  ptso.push({x,y});

  numPts++;

}

​

function shiftPt() {

  ptsx.shift();

  ptsy.shift();

  ptsxy.shift();

  ptso.shift();

  numPts--;

}

​

function readPt(i) {

  let r = Math.random();

  if (r < 0.333) {

    return {x: ptsx[i], y: ptsy[i]};

  }

  else if (r < 0.666) {

    let [x,y] = ptsxy[i];

    return {x, y};

  }

  else {

    return ptso[i];

  }

}

​

function writePt(i, x, y) {

  ptsx[i] = x;

  ptsy[i] = y;

  ptsxy[i] = [x,y];

  ptso[i] = {x, y};

}

​

function changeMode() {

  clearPts();

}

​

function setup() {

  createCanvas(400, 400);

  modeSelect = createSelect();

  modeSelect.position(10, 10);

  modeSelect.option('dashed');

  modeSelect.option('living');

  modeSelect.option('spicy');

  modeSelect.option('circle1');

  modeSelect.option('circle2');

  modeSelect.option('spiral');

  modeSelect.changed(changeMode);

}

​

function mousePressed() {

  clearPts();

  sMouse = {x: mouseX, y: mouseY};

}

​

function draw() {

  background(220);

  if (mouseIsPressed) {

    let f = 0.7;

    sMouse = {x: f*sMouse.x + (1-f)*mouseX, y: f*sMouse.y + (1-f)*mouseY};

    addPt(sMouse.x, sMouse.y);

  }

  if (modeSelect.value() === 'dashed' && numPts >= 2) {

    strokeWeight(1);

    stroke(0);

    let dashLength = map(Math.sin(millis() / 8000 * TWO_PI), -1, 1, 0, 1);

    dashLength = dashLength**2;

    dashLength = map(dashLength, 0, 1, 5, 100);

    let c = 0;//(millis() / 200) % dashLength;

    let drawing = true;

    let i = 0;

    let p = readPt(0);

    while (i < numPts-1) {

      let p0 = readPt(Math.floor(i));

      let p1 = readPt(Math.floor(i+1));

      let currentSeg = dist(p0.x, p0.y, p1.x, p1.y);

      let availableD = currentSeg * (1 - fract(i));

      let newP;

      if (c + availableD < dashLength) {

        i = Math.floor(i+1);

        newP = p1;

        c += availableD;

        if (drawing) {

          line(p.x,p.y, newP.x,newP.y);

        }

      }

      else {

        let di = (dashLength - c) / currentSeg;

        i = map(dashLength, c, c+availableD, i, Math.floor(i+1));

        let f = fract(i);

        newP = {x: p1.x*f + p0.x*(1-f), y: p1.y*f + p0.y*(1-f)};

        if (drawing) {

          line(p.x,p.y, newP.x,newP.y);

        }

        c = 0;

        drawing = !drawing;

      }

      p = newP;

    }

  }

  if (modeSelect.value() === 'living') {

    strokeWeight(1);

    stroke(0);

    for (let j = 0; j < 20; j++) {

      if (numPts - j - 2 < 0) break;

      let p0 = readPt(numPts - 1 - j - 1);

      let p1 = readPt(numPts - 1 - j);

      line(p0.x,p0.y, p1.x,p1.y);

    }

  }

  if (modeSelect.value() === 'spicy') {

    strokeWeight(1);

    stroke(0);

    for (let i = 0; i < numPts - 1; i++) {

      let p0 = readPt(i);

      let p1 = readPt(i+1);

      writePt(i, 

              p0.x + map(Math.random(),0,1,-1,1),

              p0.y + map(Math.random(),0,1,-1,1));

      writePt(i+1, 

              p1.x + map(Math.random(),0,1,-1,1),

              p1.y + map(Math.random(),0,1,-1,1));

      line(p0.x,p0.y, p1.x,p1.y);

    }

  }

  if (modeSelect.value() === 'circle1') {

    let r = Math.min(width,height)*0.45;

    let cx = width/2;

    let cy = height/2;

    let p = {x: cx + r, y: cy};

    let nsegs = Math.floor(map(noise(millis()/1000)**4, 0, 1, 3, 100))

    for (let i = 1; i <= nsegs; i++) {

      let theta = map(i, 0, nsegs, 0, TWO_PI);

      let newP = {x: cx + r*Math.cos(theta), y: cy + r*Math.sin(theta)};

      line(p.x,p.y, newP.x,newP.y);

      p = newP;

    }

  }

  if (modeSelect.value() === 'circle2') {

    let r = Math.min(width,height)*0.45;

    let cx = width/2;

    let cy = height/2;

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

      let theta1 = Math.random() * TWO_PI;

      let theta2 = Math.random() * TWO_PI;

      line(

        cx+r*Math.sin(theta1),

        cy+r*Math.cos(theta1),

        cx+r*Math.sin(theta2),

        cy+r*Math.cos(theta2));

    }

  }

  if (modeSelect.value() === 'spiral') {

    let THETA = map(mouseX, 0, width, 1, 100);

    let f = map(mouseY, 0, height, 0, 1);

    let maxR = THETA*(1-f) + 1.1**(THETA*f);

    let cx = width/2;

    let cy = height/2;

    let p = {cx,cy};

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

      let theta = map(i, 0, 500, 0, THETA);

      let r = map(theta*(1-f) + 1.1**(theta*f), 0, maxR, 0, width/2);

      let newP = {x: cx + r*Math.cos(theta), y: cy + r*Math.sin(theta)};

      line(p.x,p.y, newP.x,newP.y);

      p = newP;

    }

  }

}