const TIMEOUT = 500;

let timer;

let maxSize, minSize;

let w, h;

​

const cc239 = ["#e0eff0", "#e3dd34", "#78496b", "#f0527f", "#a7e0e2"];

const NUM_PARTICLES = 500;

let offset;

​

let maingrid;

let windowScale;

​

let bg_gfx;

​

function setup() {

  createCanvas(1000, 1000);

​

  noiseDetail(8, 0.75);

​

  bg_gfx = createGraphics(width, height);

​

  windowScale = width / 1000;

​

  maxSize = width / 3;

  minSize = width / 16;

​

  w = width;

  h = height;

​

  offset = w * 0.01;

  timer = 0;

​

  rects = [];

​

  bg_gfx.background(220);

  // noStroke();

  bg_gfx.noStroke()//color(100, 100, 100, 100));

  bg_gfx.fill(180);

​

  grids = [];

​

  let which = random(["edge", "clean"]);//, "random"]);

  maingrid = [];

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

    maingrid[y] = [];

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

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

      if (which == "edge")

        maingrid[y][x] = Math.ceil(

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

        );

      else maingrid[y][x] = map(n, 0.0, 1.0, 0.0, TWO_PI);

    }

  }

  bg_gfx.drawingContext.shadowOffsetX = 0;

    bg_gfx.drawingContext.shadowOffsetY = 0;

    bg_gfx.drawingContext.shadowBlur = 10;

    bg_gfx.drawingContext.shadowColor = color(20);

  // bg_gfx.stroke(20);

  bg_gfx.rect(offset,offset,width-2*offset,height-2*offset);

  bg_gfx.stroke(color(20,20,20,100));

  ystep = offset;

}

let step = 0;

let ystep;

​

let grids;

​

function draw() {

  if (step == 0) {

    bg_gfx.strokeWeight(0.5*windowScale);

​

    for (let _2 = 0; _2 < 5; _2++) {

      let perc_x = map(ystep, 0, height, 0.1, 0.01);

      for (let _ = 0; _ < w * perc_x; _++) {

        let x = random(offset, w-offset);

        drawPoint(x, ystep, bg_gfx);

      }

​

      image(bg_gfx, 0, 0);

      if (ystep >= height-offset) {

        bg_gfx.strokeWeight(1*windowScale);

        step++;

        break;

      } else ystep++;

    }

  } else if (step == 1) {

    let valid = true;

​

    drawingContext.shadowOffsetX = 0;

    drawingContext.shadowOffsetY = 0;

    drawingContext.shadowBlur = 10;

    drawingContext.shadowColor = color(20);

​

    let rw = random(minSize, maxSize);

    let rh = random(minSize, maxSize);

    let rx = random(offset, w - rw - offset);

    let ry = random(offset, h - rh - offset);

​

    for (let r of rects) {

      if (rectCollision(r.x, r.y, r.w, r.h, rx, ry, rw, rh)) {

        valid = false;

        break;

      }

    }

​

    if (!valid) {

      timer++;

    } else {

      timer = 0;

​

      let bgcol = random(cc239);

      // fill(color(bgcol));

      // rect(rx, ry, rw, rh);

      rects.push({ x: rx, y: ry, w: rw, h: rh });

​

      let which = random(["edge", "clean", "random"]);

​

      let _g = [];

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

        _g[y] = [];

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

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

          if (which == "edge")

            _g[y][x] = Math.ceil(

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

            );

          else if (which == "random") _g[y][x] = random(0, TWO_PI);

          else _g[y][x] = map(n, 0.0, 1.0, 0.0, TWO_PI);

        }

      }

​

      let particles = [];

      for (let _ = 0; _ < random(NUM_PARTICLES / 4, NUM_PARTICLES); _++) {

        let col = random(cc239);

        if (col == bgcol) col = 20;

​

        particles.push({

          x: random(0, rw),

          y: random(0, rh),

          life: random(50, 250)*windowScale,

          col: col,

        });

      }

​

      let gfx = createGraphics(rw, rh);

      let _bc = color(bgcol);

      _bc.setAlpha(random(80, 220));

      gfx.background(_bc);

      image(gfx, rx, ry);

      grids.push({

        grid: _g,

        particles: particles,

        rx: rx,

        ry: ry,

        rw: rw,

        rh: rh,

        bg: bgcol,

        gfx: gfx,

      });

    }

​

    if (timer > TIMEOUT) {

      console.log("rectangle placement done");

      step++;

​

      drawingContext.shadowOffsetX = 0;

      drawingContext.shadowOffsetY = 0;

      drawingContext.shadowBlur = 0;

    }

  } else {

    image(bg_gfx, 0, 0);

​

    done = true;

    for (let gi = 0; gi < grids.length; gi++) {

      let g = grids[gi];

​

      drawingContext.shadowOffsetX = 0;

      drawingContext.shadowOffsetY = 0;

      drawingContext.shadowBlur = 0;

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

        let p = g.particles[pi];

​

        let x = int(p.x);

        let y = int(p.y);

​

        let angle;

        let _alpha = 255;

        if (p.x >= 0 && p.x < g.rw && p.y >= 0 && p.y < g.rh)

          angle = g.grid[y][x];

        else {

          let _x = int(g.rx + p.x);

          let _y = int(g.ry + p.y);

          _alpha = 100;

          if (

            _x > 0 &&

            _y > 0 &&

            _y < maingrid.length &&

            _x < maingrid[0].length

          ) {

            angle = maingrid[_y][_x];

          } else angle = false;

        }

​

        if (angle != false) {

          let scale = 1.0 * windowScale; //random(0.25, 3); //5); //14.0;

          let xstep = scale * cos(angle);

          let ystep = scale * sin(angle);

​

          let _c = color(p.col);

          _c.setAlpha(_alpha);

​

          if (_alpha == 100) {

            // outside gfx

            bg_gfx.strokeWeight(1.0*windowScale);

            bg_gfx.stroke(_c);

            bg_gfx.point(p.x + g.rx, p.y + g.ry);

          } else {

            // inside gfx

            g.gfx.strokeWeight(1.0*windowScale);

            g.gfx.stroke(_c);

            g.gfx.point(p.x, p.y);

          }

​

          p.x += xstep;

          p.y += ystep;

​

          p.life--;

        }

        if (p.life <= 0 || !angle)

          // || p.x < 0 || p.x > g.rw || p.y < 0 || p.y > g.rh)

          g.particles.splice(pi, 1);

​

        if (g.particles.length > 0) done = false;

      }

​

      drawingContext.shadowOffsetX = 0;

      drawingContext.shadowOffsetY = 0;

      drawingContext.shadowBlur = 10;

      drawingContext.shadowColor = color(20);

      image(g.gfx, g.rx, g.ry);

    }

​

    if (done) {

      console.log("done");

      noLoop();

    }

  }

}

​

// http://jeffreythompson.org/collision-detection/rect-rect.php

function rectCollision(r1x, r1y, r1w, r1h, r2x, r2y, r2w, r2h) {

  if (

    r1x + r1w + offset >= r2x && // r1 right edge past r2 left

    r1x <= r2x + r2w + offset && // r1 left edge past r2 right

    r1y + r1h + offset >= r2y && // r1 top edge past r2 bottom

    r1y <= r2y + r2h + offset // r1 bottom edge past r2 top

  )

    return true;

  return false;

}

​

function drawPoint(x, y, g = null) {

  if (g == null) {

    point(x, y);

    if (random() > 0.7) {

      for (let _ = 0; _ < random(1, 5); _++) {

        point(x + random(-3, 3) * windowScale, y + random(-3, 3) * windowScale);

      }

    }

  } else {

    g.point(x, y);

    if (random() > 0.7) {

      for (let _ = 0; _ < random(1, 5); _++) {

        g.point(

          x + random(-3, 3) * windowScale,

          y + random(-3, 3) * windowScale

        );

      }

    }

  }

}

​