const angToRad = new Map();

const fogPoints = [];

​

const FOG_SIZE = 32;

​

const minRad = 100;

const maxRad = 200;

​

function setup() {

  createCanvas(maxRad * 2, maxRad * 2);

  world();

  fog();

  // noLoop();

}

​

function draw() {

  background(220);

  fill(150, 100, 50);

  stroke(0);

  push();

  translate(width/2, height/2);

  beginShape();

  angToRad.forEach((r, a) => {

    const x = cos(a) * r;

    const y = sin(a) * r;

    vertex(x, y);

  });

  endShape(CLOSE);

  noStroke();

  fogPoints.forEach(p => {

    fill(125, 100, 75);

    circle(p.x, p.y, p.z);

    p.z = getFogRad(p);

  });

  pop();

}

​

function getFogRad(p) {

  let r = dist(p.x, p.y, mouseX - width/2, mouseY - height/2);

  r = map(r, minRad/2, minRad, 0, FOG_SIZE);

  r = constrain(r, 0, FOG_SIZE);

  return r;

}

​

function world() {

  for(let a = 0; a < TAU; a += 0.1) {

    a = roundAng(a);

    let r = noise(cos(a) + 10, sin(a) + 10) * (maxRad - minRad) + minRad;

    angToRad.set(a, r);

  }

}

​

function fog() {

  for(let i = -width/2; i <= width/2; i += FOG_SIZE/2) {

    for(let j = -height/2; j <= height/2; j += FOG_SIZE/2) {

      let s = FOG_SIZE;

      const r = dist(0, 0, i, j);

      const a = roundAng(atan2(j, i));

      const maxR = angToRad.get(a);

      if(maxR < r) {

        continue;

      }

      s = min(FOG_SIZE, (maxR - r) * 2);

      if(s <= 0) {

        continue;

      }

      fogPoints.push(createVector(i, j, s));

    } 

  }

}

​

function roundAng(ang) {

  if(ang < 0) ang += TAU;

  if(ang > TAU) ang -= TAU;

  return round(ang * 10) / 10;

}