let cellsize;

// 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",

  "#333333",

  "#666666",

  "#999999",

  "#cccccc",

  "#eeeeee",

  "#ffffff",

];

​

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

​

const dt02 = [

  "#000000", // added

  "#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"];

​

let palettes = [

  "miradors",

  "powerpuff",

  "butterfly",

  "cc239",

  "monochrome",

  "jung hippo",

  "dt02",

  "frozen rose",

  "foxshelter",

  "revolucion",

  "cc245",

];

​

function getRandomPalette() {

  let ret_palette;

  let _palette = random(palettes);

​

  if (_palette == "miradors") ret_palette = miradors;

  else if (_palette == "powerpuff") ret_palette = powerpuff;

  else if (_palette == "butterfly") ret_palette = butterfly;

  else if (_palette == "cc239") ret_palette = cc239;

  else if (_palette == "jung hippo") ret_palette = jung_hippo;

  else if (_palette == "dt02") ret_palette = dt02;

  else if (_palette == "frozen rose") ret_palette = frozen_rose;

  else if (_palette == "foxshelter") ret_palette = foxshelter;

  else if (_palette == "revolucion") ret_palette = revolucion;

  else if (_palette == "cc245") ret_palette = cc245;

  else ret_palette = monochrome;

​

  return ret_palette;

}

​

function drawFlow(_cellsize, x, y, numParticles = 500) {

  let g = createGraphics(_cellsize, _cellsize);

  g.noiseDetail(random(1, 16), random(0.25, 0.85));

​

  let _palette = getRandomPalette();

  let _idx = int(random(_palette.length));

  let curr_palette = [];

  for (let i = 0; i < _palette.length; i++) {

    if (i != _idx) curr_palette.push(_palette[i]);

  }

  let bg_col = _palette[_idx];

​

  let _which = random(["edgy", "flow", "random"]);

​

  let grid = [];

  let z = random(10000);

  for (let _y = 0; _y < g.height; _y++) {

    grid[_y] = [];

    for (let _x = 0; _x < g.width; _x++) {

      let n = g.noise(_x * 0.01, _y * 0.01, z); //, x, y);

​

      if (_which == "flow") grid[_y][_x] = map(n, 0.0, 1.0, 0.0, TWO_PI);

      else if (_which == "random") grid[_y][_x] = random(0, TWO_PI);

      else

        grid[_y][_x] = Math.ceil(

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

        );

    }

  }

​

  particles = [];

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

    particles.push({

      x: random(g.width - 1),

      y: random(g.height - 1),

      life: random(g.width, g.width / 2),

      col: random(curr_palette),

    });

  }

​

  g.background(color(bg_col)); //color(random(255), random(255), random(255)));

  g.noStroke();

​

  while (particles.length > 0) {

    for (let i = 0; i < particles.length; i++) {

      let p = particles[i];

      let angle = grid[Math.floor(p.y)][Math.floor(p.x)];

​

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

      let xstep = scale * cos(angle);

      let ystep = scale * sin(angle);

​

      p.x += xstep;

      p.y += ystep;

      p.life--;

​

      if (

        p.x < 0 ||

        p.x > g.width - 1 ||

        p.y < 0 ||

        p.y > g.height - 1 ||

        p.life <= 0

      ) {

        particles.splice(i, 1);

        continue;

        // p.x = random(0, width); //border_offset, width - border_offset);

        // p.y = random(0, height); //border_offset, height - border_offset);

      }

​

      g.fill(color(p.col));

      g.circle(p.x, p.y, 1);

    }

  }

​

  // drawShadow(0,0,5,color(255));

  fill(0);

  strokeWeight(5);

  stroke(0);

  square(x,y,g.width);

  image(g, x, y);

  g.remove();

}

​

function setup() {

  createCanvas(1000, 1000);

​

  numcells = 10;

  cellsize = width / numcells;

​

  // background

  let np = 10;

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

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

      drawFlow(cellsize, x, y, np);

      np += 5;

    }

  }

  // drawFlow(width, 0, 0);

  // drawFlow(cellsize*2, cellsize, cellsize);

  // drawFlow(cellsize*2, width-cellsize*3, cellsize);

  // drawFlow(cellsize*2, width-cellsize*3, height-cellsize*3);

  // drawFlow(cellsize*2, cellsize, height-cellsize*3);

  // drawFlow(width/2, 0, 0);

  // drawFlow(width/4, 0, 0);

  // drawFlow(width/8, 0, 0);

  // centered

  // drawFlow(width-cellsize*2, cellsize, cellsize);

  // drawFlow(width-cellsize*4, cellsize*2, cellsize*2);

  // drawFlow(width-cellsize*6, cellsize*3, cellsize*3);

  drawFlow(width-cellsize*8, cellsize*4, cellsize*4);

  // random

  // for (let i = 0; i < 6; i++) {

  //   let _cs = int(random(1,4));

  //   let x = cellsize * int(random(numcells-_cs));

  //   let y = cellsize * int(random(numcells-_cs));

  //   drawFlow(cellsize*_cs, x, y);

  // }

}

​

function draw() {

  noLoop();

  // background(220);

}

​

// 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;

  }

}

​