let grid;

const cv = "#dad9d5";

let bg;

let pen;

​

// hookes law

let brushSize = 5; //40;

let f = 0.75;

let spring = 0.14;

let friction = 0.15;

let v = 0.5;

let r = 0;

let vx = 0;

let vy = 0;

let splitNum = 20; //100;

let diff = 8;

let x, y;

let step;

const DIM = 1000;

let windowScale;

let circ_r, circ_x, circ_y;

function setup() {

  bg = color(cv);

  pen = color(20, 20, 20, 180);

  createCanvas(DIM, DIM);

  noiseDetail(2, 0.75);

​

  windowScale = DIM / 1000;

​

  grid = [];

  for (let r = 0; r < height; r++) {

    grid[r] = [];

    for (let c = 0; c < width; c++) {

      let n = noise(c * 1, r * 0.01);

      // grid[r][c] = Math.ceil(

      //   (map(n, 0.0, 1.0, 0.0, TWO_PI) * (PI / 4)) / (PI / 4)

      // );

      grid[r][c] = map(n, 0.0, 1.0, 0.0, TWO_PI);

      // grid[r][c] = Math.ceil(

      //         (map(n, 0.0, 1.0, 0.0, TWO_PI) * (PI / 4)) / (PI / 4)

      //       );

    }

  }

​

  // x = int(random(width) - 1);

  // y = int(random(height) - 1);

  background(bg);

  step = 1;

  stroke(pen);

​

  circ_r = random(width / 2, width / 8);

  circ_x = random(circ_r, width - circ_r);

  circ_y = random(circ_r, height - circ_r);

​

  x = int(circ_x + (circ_r / 2) * cos(random(0, TWO_PI)));

  y = int(circ_y + (circ_r / 2) * sin(random(0, TWO_PI)));

​

  p5grain.setup();

  // example: custom granulateSimple implementation

  const amount = 8;

  const alpha = true;

  tinkerPixels((index, total) => {

    const grainAmount = Math.floor(random() * (amount * 2 + 1)) - amount;

    pixels[index] = pixels[index] + grainAmount;

    pixels[index + 1] = pixels[index + 1] + grainAmount;

    pixels[index + 2] = pixels[index + 2] + grainAmount;

    if (alpha) {

      pixels[index + 3] = pixels[index + 3] + grainAmount;

    }

  });

  // granulateSimple(42);

}

​

let paused = false;

let steps = 1500;

let alpha;

let dirs = [

  [-1,-1],

  [1,-1],

  [1,1],

  [-1,1]

]

let dir;

function draw() {

  if (steps > 0) {

    if (!paused) {

      // drawingContext.shadowOffsetX = -2*windowScale;

      // drawingContext.shadowOffsetY = -2*windowScale;

      // drawingContext.shadowBlur = 10*windowScale;

      // drawingContext.shadowColor = "black";

      steps--;

      if (steps == 1499) {

        fill(color("#8a0303")); //color(255, 255, 0));

        noStroke();

        circle(circ_x, circ_y, circ_r);

        noFill();

        stroke(pen);

        dir = random(dirs);

        granulateSimple(42);

      } else {

        let nstep = step * random(0.5, 2.0) * windowScale;

​

        let nextX = random(x/4,x) + /*random(x / 2, x * 2) + */nstep * cos(grid[int(y)][int(x)]);

        let nextY = random(y/4, y) + /*random(y / 2, y * 2) + */nstep * sin(grid[int(y)][int(x)]);

​

        vx += (nextX - x) * spring;

        vy += (nextY - y) * spring;

        vx *= friction;

        vy *= friction;

​

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

        v *= 0.6;

​

        oldR = r;

        r = brushSize - v;

​

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

          oldX = x;

          oldY = y;

          x += dir[0] * vx / splitNum;

          y += dir[1] * vy / splitNum;

          oldR += (r - oldR) / splitNum;

          if (oldR < 1) {

            oldR = 1;

          }

​

          let col = pen;

          col.setAlpha(map(i, 0, splitNum, 255, 0));

          stroke(col);

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

          line(x, y, oldX, oldY);

          strokeWeight(oldR); // ADD

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

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

        }

​

        if (x < 0 || x > width - 1 || y < 0 || y > height - 1) {

          x = int(circ_x + (circ_r / 2) * cos(random(0, TWO_PI)));

          y = int(circ_y + (circ_r / 2) * sin(random(0, TWO_PI)));

          // x = int(random(width) - 1);

          // y = int(random(height) - 1);

          dir = random(dirs);

        }

      }

    }

  } else {

    console.log("done");

    noLoop();

    // granulateSimple(42);

  }

}

​

function mousePressed() {

  paused = !paused;

}

​