let gfx;

const BASE_H = 15;

const BASE_S = 10;

const BASE_B = 100;

let particles;

let r, h, step;

function setup() {

  createCanvas(1000, 1000);

  colorMode(HSB, 100);

  noiseDetail(8, 0.75);

​

  gfx = createGraphics(width, height);

  gfx.colorMode(HSB, 100);

  gfx.background(BASE_H, BASE_S, BASE_B);

​

  texturize(null, 30000);

  image(gfx, 0, 0);

​

  grid = [];

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

    grid[y] = [];

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

      let n = noise(x * 0.01, y * 0.01);

      grid[y][x] = map(n, 0.0, 1.0, 0, TWO_PI);

    }

  }

​

  particles = [];

  for (let _ = 0; _ < 10; _++) {

    particles.push({

      x: int(random(0, width - 1)),

      y: int(random(0, height - 1)),

      r: random(0.25,4),

      h: int(random(0,100)),

    });

  }

​

  // r = 10;

  // h = 100;

  step = 2;

}

​

function draw() {

  image(gfx, 0, 0);

  for (let i = particles.length - 1; i >= 0; i--) {

    let p = particles[i];

    let a = grid[int(p.y)][int(p.x)];

​

    drawSpot(p.x, p.y, p.r, p.h);

​

    p.x += step * cos(a);

    p.y += step * sin(a);

​

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

      particles.splice(i, 1);

  }

  if (particles.length == 0) {

    noLoop();

    console.log("done");

  }

}

​

function texturize(g, density) {

  for (let _ = 0; _ < density; _++) {

    if (g == null) {

      stroke(

        BASE_H,

        BASE_S - random(0, 5),

        BASE_B - random(0, 8),

        random(10, 75)

      );

    } else {

      g.stroke(

        BASE_H,

        BASE_S - random(0, 5),

        BASE_B - random(0, 8),

        random(10, 75)

      );

    }

    x1 = random(0, width);

    y1 = random(0, height);

    theta = random(0, TWO_PI);

    segmentLength = random(2, 5);

    x2 = cos(theta) * segmentLength + x1;

    y2 = sin(theta) * segmentLength + y1;

​

    if (g == null) line(x1, y1, x2, y2);

    else g.line(x1, y1, x2, y2);

  }

}

​

function drawSpot(x, y, radius, hue) {

  gfx.fill(hue, 100, 100, 10);

  // hue.setAlpha(10);

  // gfx.fill(hue);

​

  // ellipse(x, y, radius, radius);

  drawCircle(x, y, radius);

  gfx.noFill();

  let inner = random(6, 10);

  for (let i = radius; i > 0; i -= radius / 3) {

    gfx.stroke(hue, 100, 100, 1);

    // hue.setAlpha(1);

    // gfx.stroke(hue);

    gfx.strokeWeight(i);

    drawCircle(x, y, radius - i);

  }

  for (let i = radius; i > 0; i -= radius / 4) {

    gfx.stroke(hue, 100, 100, 2);

    // hue.setAlpha(2);

    // gfx.stroke(hue);

​

    gfx.strokeWeight(i);

    drawCircle(x, y, radius - i);

  }

  for (let i = 16; i > 0; i -= 4) {

    gfx.stroke(hue, 100, 100, 5);

    // hue.setAlpha(5);

    // gfx.stroke(hue);

​

    gfx.strokeWeight(i);

    drawCircle(x, y, radius - i);

  }

  gfx.strokeWeight(1);

  gfx.stroke(hue, 100, 100, inner);

  // hue.setAlpha(inner);

  // gfx.stroke(hue);

​

  drawCircle(x, y, radius);

​

  // for (let i = 6; i > 0; i--) {

  //   stroke(hue, 100, 100, 3);

  //   strokeWeight(i);

  //   ellipse(x, y, radius - i, radius - i);

  // }

}

​

// https://github.com/freethejazz/generative-watercolor/blob/feature/irregular-blob/src/scripts/index.js

// followon for infoworld article

function getWavyRadiusMultiplier(radius, step) {

  const depthMultiplier = (radius * 2) / 100;

  const frequencyMultiplier = (radius * 2) / 3;

​

  return radius - abs(sin(step * frequencyMultiplier) * depthMultiplier);

}

​

function getExtraNoise(step, radius) {

  const rate = 40; //random(20,40);

  return noise(cos(step / rate) * radius, sin(step / rate) * radius) * 50; //random(10,50);

}

​

function drawCircle(x, y, radius) {

  const step = (2 * PI) / 360;

  gfx.beginShape();

  for (let i = 0; i < TWO_PI; i += step) {

    gfx.vertex(

      x +

        cos(i) *

          (getWavyRadiusMultiplier(radius, i) + getExtraNoise(i, radius)),

      y +

        sin(i) * (getWavyRadiusMultiplier(radius, i) + getExtraNoise(i, radius))

    );

  }

  gfx.endShape(CLOSE);

}

​