let _palette;

let offset;

let palette;

let gfx;

let paused = false;

let grid, particles;

let circ_r;

let currZ = 0;

let bg;

​

function setGrid() {

  if (frameCount < 1) {

    // first setup

    grid = [];

    let hw = int(gfx.width / 2);

    let hh = int(gfx.height / 2);

​

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

      grid[r] = [];

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

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

​

        if (circCollision(c, r, hw, hh, 1, circ_r + random(width/4))) {

          // inside circle

          grid[r][c] = { angle: map(n, 0.0, 1.0, 0.0, TWO_PI), circ: true }; //2*TWO_PI

        } else {

          // outside circle

          grid[r][c] = {

            angle: Math.ceil(

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

            ),

            circ: false,

          };

        }

      }

    }

  } else {

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

      for (let c = 0; c < gfx.height; c++) {

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

        if (grid[r][c].circ) {

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

        } else {

          Math.ceil((map(n, 0.0, 1.0, 0.0, 2 * TWO_PI) * (PI / 4)) / (PI / 4));

        }

      }

    }

  }

}

​

function setup() {

  createCanvas(1000, 1000);

  noiseDetail(8, 0.75);

​

  offset = width * 0.01;

  _palette = random(palettes);

  palette = getPalette(_palette);

​

  let idx = random(palette.length - 1) | 0;

  bg = palette[idx];

  palette.splice(idx, 1);

  background(220);

​

  gfx = createGraphics(width - 2 * offset, height - 2 * offset);

  gfx.background(color(bg));

  gfx.strokeWeight(1);

​

  // drawShadow(0,0,0,0,gfx;);

  imageMode(CENTER);

​

  circ_r = gfx.width / 8;

​

  setGrid();

​

  particles = [];

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

    particles.push({

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

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

      color: random(palette),

      size: random(0.5, 1.5),

    });

  }

  textFont("Courier");

  textSize(48);

  textAlign(CENTER, CENTER);

}

​

let drawStep = 0;

function draw() {

  if (!paused) {

    background(220);

​

    if (drawStep == 0) {

      gfx.beginShape(TRIANGLE_FAN);

      // gfx.fill(color(bg))

      gfx.noFill();

      gfx.vertex(particles[0].x, particles[0].y);

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

        let p = particles[i];

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

        let angle = g.angle;

        let step = 5.0;

        let xstep = step * cos(angle);

        let ystep = step * sin(angle);

​

        p.x += xstep;

        p.y += ystep;

​

        // p.x = int(p.x);

        // p.y = int(p.y);

​

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

          p.x = random(0, gfx.width) | 0;

          p.y = random(0, gfx.height) | 0;

          // particles.splice(i,1);

        } else {

          let c = color(p.color);

          c.setAlpha(random(40, 80));//120));

          if (g.circ) gfx.strokeWeight(1.0);

          //gfx.strokeWeight(p.size);

          else {

            gfx.strokeWeight(0.25);

            // c.setAlpha(random(40, 120));

          }

          gfx.stroke(c);

          gfx.vertex(p.x, p.y);

          // drawPoint(p.x, p.y, gfx);

​

          // if (g.circ) { /// maybe draw the flow after the bg?

          //   gfx.stroke(0);

          //   gfx.strokeWeight(5);

          //   drawPoint(p.x, p.y, gfx);

          // }

        }

      }

      gfx.endShape();

​

      drawShadow(0, 0, 10, color(20));

      image(gfx, width / 2, height / 2);

​

      if (frameCount % 100 == 0) {

        currZ++;

        // setGrid();

      }

​

      if (frameCount > 500) {

        //2500) {

        // console.log("done");

        // noLoop();

        drawStep++;

      }

    } else if (drawStep == 1) {

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

        particles.push({

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

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

          color: random(palette),

          size: random(0.5, 1.5),

        });

      }

      drawStep++;

    } else {/*

      // drawShadow(0, 0, 10, color(random(palette)),gfx);

      if (false) {

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

        let p = particles[i];

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

        let angle = g.angle;

        let step = 10.0;

        let xstep = step * cos(angle);

        let ystep = step * sin(angle);

​

        p.x += xstep;

        p.y += ystep;

​

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

          p.x = random(0, gfx.width) | 0;

          p.y = random(0, gfx.height) | 0;

          // particles.splice(i,1);

        } else {

          let c = color(p.color);

          if (g.circ) {

            c.setAlpha(random(220, 255));

            gfx.strokeWeight(1.0);

            //gfx.strokeWeight(p.size);

          // } else {

          //   gfx.strokeWeight(0.25);

          //   c.setAlpha(random(20, 80));

          // }

          gfx.stroke(c);

          // gfx.vertex(p.x, p.y);

          drawPoint(p.x, p.y, gfx);

          }

          // if (g.circ) { /// maybe draw the flow after the bg?

          //   gfx.stroke(0);

          //   gfx.strokeWeight(5);

          //   drawPoint(p.x, p.y, gfx);

          // }

        }

      }

      // gfx.endShape();

​

      drawShadow(0, 0, 10, color(20));

      image(gfx, width / 2, height / 2);

​

      if (frameCount > 2000) {*/

        console.log("done");

        noLoop();

      // }

    }

  }

}

​

function keyPressed() {

  if (key === " ") paused = !paused;

}

​

// https://p5js.org/reference/#/p5/drawingContext

function drawShadow(x, y, b, c, g = null) {

  if (g == null) {

    drawingContext.shadowOffsetX = x;

    drawingContext.shadowOffsetY = y;

    drawingContext.shadowBlur = b; // * scale;

    drawingContext.shadowColor = c;

  } else {

    g.drawingContext.shadowOffsetX = x;

    g.drawingContext.shadowOffsetY = y;

    g.drawingContext.shadowBlur = b; // * scale;

    g.drawingContext.shadowColor = c;

  }

}

​

// chromotome palettes

const miradors = ["#020202", "#ff6936", "#fddc3f", "#0075ca", "#03bb70"];

const powerpuff = ["#201010", "#5dece1", "#ea50c4", "#47e752", "#130d0d"];

const butterfly = ["#191e36", "#f40104", "#f6c0b3", "#99673a", "#f0f1f4"];

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

​

const monochrome = [

  // "#000000",

  "#111111",

  "#333333",

  "#666666",

  "#999999",

  "#cccccc",

  "#eeeeee",

  "#ffffff",

];

​

const jung_hippo = ["#ffffff", "#fe7bac", "#ff921e", "#3da8f5", "#7ac943"];

​

const dt02 = [

  // "#000000", // added

  "#111111",

  "#eee3d3",

  "#302956",

  "#f3c51a",

];

​

const frozen_rose = ["#f2e8e4", "#2a358f", "#e9697b", "#1b164d", "#f6d996"];

​

const foxshelter = ["#dddddd", "#ff3931", "#007861", "#311f27", "#bab9a4"];

​

const revolucion = [

  "#2d1922",

  "#ed555d",

  "#fffcc9",

  "#41b797",

  "#eda126",

  "#7b5770",

];

​

const cc245 = ["#f6f4ed", "#0d4a4e", "#ff947b", "#ead3a2", "#5284ab"];

​

function getPalette(p) {

  if (p == "miradors") return miradors;

  else if (p == "powerpuff") return powerpuff;

  else if (p == "butterfly") return butterfly;

  else if (p == "cc239") return cc239;

  else if (p == "jung hippo") return jung_hippo;

  else if (p == "dt02") return dt02;

  else if (p == "frozen rose") return frozen_rose;

  else if (p == "foxshelter") return foxshelter;

  else if (p == "revolucion") return revolucion;

  else if (p == "cc245") return cc245;

  else return monochrome;

}

let palettes = [

  "miradors",

  "powerpuff",

  "butterfly",

  "cc239",

  "monochrome",

  "jung hippo",

  "dt02",

  "frozen rose",

  "foxshelter",

  "revolucion",

  "cc245",

];

​

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

  if (g == null) {

    if (random() > 0.25) point(x, y);

    else {

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

        point(x + random(-1, 1), y + random(-1, 1));

      }

    }

  } else {

    if (random() > 0.25) g.point(x, y);

    else {

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

        g.point(x + random(-1, 1), y + random(-1, 1));

      }

    }

  }

}

​

//(x2-x1)^2 + (y2-y1)^2 <= (r1+r2)^2

function circCollision(x1, y1, x2, y2, r1, r2) {

  let l = (x2 - x1) ** 2 + (y2 - y1) ** 2;

  let r = (r1 + r2) ** 2;

​

  return l <= r;

}

​