let b1 = true;

let b2 = false;

let brushSize = 40;

let f = 0.5;

let spring = 0.4; //Spring constant(Larger value means stronger spring)

let friction = 0.45;

let v = 0.5;

let r = 0;

let vx = 0;

let vy = 0;

let splitNum = 100; //splitNum : Number of divisions from old coordinates to new coordinates

let diff = 3; //diff : Misalignment of different lines

​

function setup() {

  createCanvas(windowWidth - 100, windowHeight);

  background("#0e00ff");

  frameRate(60);

​

  button1 = createButton("B1");

  button2 = createButton("B2");

  button1.position(windowWidth - 80, 10);

  button2.position(windowWidth - 80, 80);

​

  button1.mousePressed(() => {

    b1 = true;

    b2 = false;

  });

​

  button2.mousePressed(() => {

    b1 = false;

    b2 = true;

  });

}

​

function draw() {

  if (mouseIsPressed && b1 === true) {

    if (!f) {

      f = true;

      x = mouseX;

      y = mouseY;

    }

    vx += (mouseX - x) * spring;

    vy += (mouseY - y) * spring;

    vx *= friction;

    vy *= friction;

​

    v += sqrt(vx * vx + vy * vy) - v;

    v *= 0.35;

​

    oldR = r;

    r = brushSize - v;

    var num = random(0.1, 0.8);

    var num2 = random(0.1, 0.8);

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

      oldX = x;

      oldY = y;

      x += vx / splitNum;

      y += vy / splitNum;

      oldR += (r - oldR) / splitNum;

      if (oldR < 1) {

        oldR = 1;

      }

      strokeWeight(oldR + diff); // AMEND: oldR -> oldR+diff

      line(x + num, y + num, oldX + num, oldY + num);

      strokeWeight(oldR); // ADD

      stroke("255, 255, 255, 70");

      line(x + diff * num2, y + diff * num2, oldX + diff * num2, oldY + diff * num2); // ADD

      line(x - diff * num, y - diff * num, oldX - diff * num, oldY - diff * num); // ADD

    }

  } else if (f) {

    vx = vy = 0;

    f = false;

  }

​

  if (mouseIsPressed && b2 === true) {

    // set the color and brush style

    stroke(0, 0, 0, 255);

    strokeWeight(1);

    const width = 5;

​

    // set the number of times we lerp the line in the for loop

    const lerps = 16;

​

    // repeat the slanted line with lerping

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

      // find the lerped x and y coordinates between the mouse points

      const x = lerp(mouseX, pmouseX, i / lerps);

      const y = lerp(mouseY, pmouseY, i / lerps);

​

      // draw a slanted line

      line(x - width, y - width, x + width, y + width);

    }

  }

}

​

function touchMoved() {

  return false;

}

​