const X_AXIS = 2;

​

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

let palettes = [

  "miradors",

  "powerpuff",

  "butterfly",

  "cc239",

  "monochrome",

  "jung hippo",

  "dt02",

  "frozen rose",

  "foxshelter",

  "revolucion",

  "cc245",

];

let _palette;

let palette;

let bg;

let referenceSize = 1000;

let hasMaxSize = false;

​

let particles;

const numParticles = 500;

let targets;

let grid;

​

​

function setup() {

  createCanvas(1000, 1000);

  angleMode(RADIANS);

  noSmooth();

  noiseDetail(random(2,16), random(0.25,0.75));

  pixelDensity(1);

​

  grid = [];

  let rCutoff = random(1, height - 1);

  let cCutoff = random(1, width - 1);

  let _dir = random([true, false]);

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

    grid[r] = [];

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

      let n = noise(c * 0.001, r * 0.001, 0);

​

      // edgy

      if (c < width/3)//cCutoff)

        //width / 2)

        grid[r][c] = Math.ceil(

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

        );

      // classic

      else if (c < (width*2)/3)

        grid[r][c] = random(0,TWO_PI);

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

    }

  }

​

  _palette = random(palettes);

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

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

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

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

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

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

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

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

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

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

  else palette = monochrome;

​

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

  bg = palette[_idx];

  palette.splice(_idx, 1);

​

  particles = [];

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

  //   let s = 20;

  //   particles.push({

  //     x: random(s,width-s),

  //     y: random(s,height-s),

  //     s: s,

  //     col: random(palette),

  //     tgtX: random(s,width-s),

  //     tgtY: random(s,height-s),

  //     easing: 0.05,

  //   })

  // let d1 = 50;

  // let d2 = 25;

  // let _r = d1/2;

  // particles.push({

  //   // x: random(d1,width-d1),

  //   // y: random(d1,height-d1),

  //   d1: d1,

  //   d2: d2,

  //   rad: _r,

  //   oCol: random(palette),

  //   iCol: random(palette),

  //   step: PI/random(64,128),

  //   theta: random(TWO_PI),

  //   r: random(width/4,(width/2)-d1),

  // })

  // }

   border_offset = width * 0.1;

​

  let s = 2;

  targets = [

    { x: border_offset, y: border_offset },

    { x: width - border_offset, y: border_offset },

    { x: width - border_offset, y: height - border_offset },

    { x: border_offset, y: height - border_offset },

  ];

​

  particles.push({

    x: targets[0].x,

    y: targets[0].y,

    tgtX: targets[1].x,

    tgtY: targets[1].y,

    s: s,

    idx: 0,

    col: random(palette),

    easing: random(0.03, 0.01),

  });

  particles.push({

    x: targets[1].x,

    y: targets[1].y,

    tgtX: targets[2].x,

    tgtY: targets[2].y,

    s: s,

    idx: 1,

    col: random(palette),

    easing: random(0.03, 0.01),

  });

  particles.push({

    x: targets[2].x,

    y: targets[2].y,

    tgtX: targets[3].x,

    tgtY: targets[3].y,

    s: s,

    idx: 2,

    col: random(palette),

    easing: random(0.03, 0.01),

  });

  particles.push({

    x: targets[3].x,

    y: targets[3].y,

    tgtX: targets[0].x,

    tgtY: targets[0].y,

    s: s,

    idx: 3,

    col: random(palette),

    easing: random(0.03, 0.01),

  });

  for (let p of particles) {

    p.onGrid = false;

  }

​

  noStroke();

  frameRate(60);

  background(color(bg));

​

  setGradient(

    border_offset,

    border_offset,

    width - 2 * border_offset,

    height - 2 * border_offset,

    color(random(palette)),//bg),

    color(random(palette)),

    Y_AXIS,

    null

  );

}

​

function setNewTarget(p) {

  p.idx++;

  if (p.idx > 3) p.idx = 0;

​

  let nextID = p.idx + 1;

  if (nextID > 3) nextID = 0;

​

  p.tgtX = targets[nextID].x;

  p.tgtY = targets[nextID].y;

}

​

function draw() {

  noStroke();

  drawShadow(0,0,30,220,null);

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

    let p = particles[i];

    if (!p.onGrid) {

      let dx = p.tgtX - p.x;

      let dy = p.tgtY - p.y;

​

      p.x += dx * p.easing;

      p.y += dy * p.easing;

​

      if (dx ** 2 + dy ** 2 <= (p.s * 0.25) ** 2) {

        setNewTarget(p);

      }

​

      fill(p.col);

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

​

      if (random() > 0.98) p.s = random(2, 5);

      if (int(random(0,1000)) > 990) particles.splice(i,1);

    } else {

      // flow particle

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

​

      let scale = 5;//14.0;

      let xstep = scale * cos(angle);

      let ystep = scale * sin(angle);

​

      p.x += xstep;

      p.y += ystep;

​

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

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

      }

​

      let c = color(p.col);

      c.setAlpha(180);

      if (

        p.x <= border_offset ||

        p.x >= width - border_offset ||

        p.y <= border_offset ||

        p.y >= height - border_offset /*-offset*/

      ) {

        c = color(p.ocol);

        c.setAlpha(40);

      }

      fill(c);

​

      if (random() > 0.99)

        ellipse(

          p.x + random(-2, 2), // * 4,

          p.y + random(-2, 2), // * 4,

          p.s + random(-12, 12), // * 4,

          p.s + random(-12, 12) // * 4,

        );

​

      // gfx.fill(color(0,255,0,a))

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

        circle(

          p.x + random(-2, 2), // * 4,

          p.y + random(-2, 2), // * 4,

          p.s + random(-2, 2) // * 4

        );

      }

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

    }

​

    if (particles.length < numParticles && random() > 0.98) {

      if (random() > 0.7) {

        particles.push({

          x: random(1, width - 1),

          y: random(1, height - 1),

          tgtX: 0, //targets[0].x,

          tgtY: 0, //targets[0].y,

          s: random(1, 10),

          idx: -1,

          col: random(palette),

          easing: random(0.03, 0.01),

          onGrid: true,

          ocol: random(palette),

        });

      } else {

        let idx = int(random(0,3));

        let nextIdx = idx+1;

        if (nextIdx > 3) nextIdx = 0;

        particles.push({

          x: targets[idx].x,

          y: targets[idx].y,

          tgtX: targets[nextIdx].x,

          tgtY: targets[nextIdx].y,

          s: random(1, 4),

          idx: idx,

          col: random(palette),

          easing: random(0.03, 0.01),

          onGrid: false,

        });

      }

    }

  }

  dither(null);

}

​

function ccCollision(c1x, c1y, c2x, c2y, c1r, c2r) {

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

  if ((c2x - c1x) ** 2 + (c2y - c1y) ** 2 <= (c1r + c2r) ** 2) return true;

  return false;

}

​

function index(g, x, y) {

  if (g == null) return (x + y * width) * 4;

  else return (x + y * g.width) * 4;

}

​

function DivideBy255(value) {

  return (value + 1 + (value >> 8)) >> 8;

}

function dither(g) {

  if (g == null) {

    let _scale = Math.ceil(1, map(width, 0, referenceSize, 0, 1, hasMaxSize));

    loadPixels();

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

      for (let x = _scale; x < width - _scale; x++) {

        let oldr = pixels[index(g, x, y)];

        let oldg = pixels[index(g, x, y) + 1];

        let oldb = pixels[index(g, x, y) + 2];

​

        let factor = 1.0; //min(1.0, map(width, 0, referenceSize, 0, 1, hasMaxSize));//1.0;

        // let newr = round((factor * oldr) / 255) * (255);// / factor);

        // let newg = round((factor * oldg) / 255) * (255);// / factor);

        // let newb = round((factor * oldb) / 255) * (255);// / factor);

​

        let newr = (DivideBy255(factor * oldr) * 255) | 0; // / factor);

        let newg = (DivideBy255(factor * oldg) * 255) | 0; // / factor);

        let newb = (DivideBy255(factor * oldb) * 255) | 0; // / factor);

​

        pixels[index(g, x, y)] = newr;

        pixels[index(g, x, y) + 1] = newg;

        pixels[index(g, x, y) + 2] = newb;

​

        for (let _y = 1; _y <= _scale; _y++) {

          for (let _x = 1; _x <= _scale; _x++) {

            pixels[index(g, x + _x, y)] += ((oldr - newr) * 7) >> 4; /// 16.0;

            pixels[index(g, x + _x, y) + 1] += ((oldr - newr) * 7) >> 4; /// 16.0;

            pixels[index(g, x + _x, y) + 2] += ((oldr - newr) * 7) >> 4; /// 16.0;

​

            pixels[index(g, x - _x, y + _y)] += ((oldr - newr) * 3) >> 4; /// 16.0;

            pixels[index(g, x - _x, y + _y) + 1] += ((oldr - newr) * 3) >> 4; /// 16.0;

            pixels[index(g, x - _x, y + _y) + 2] += ((oldr - newr) * 3) >> 4; /// 16.0;

​

            pixels[index(g, x, y + _y)] += ((oldr - newr) * 5) >> 4; /// 16.0;

            pixels[index(g, x, y + _y) + 1] += ((oldr - newr) * 5) >> 4; /// 16.0;

            pixels[index(g, x, y + _y) + 2] += ((oldr - newr) * 5) >> 4; /// 16.0;

​

            pixels[index(g, x + _x, y + _y)] += ((oldr - newr) * 1) >> 4; /// 16.0;

            pixels[index(g, x + _x, y + _y) + 1] += ((oldr - newr) * 1) >> 4; /// 16.0;

            pixels[index(g, x + _x, y + _y) + 2] += ((oldr - newr) * 1) >> 4; /// 16.0;

          }

        }

      }

    }

    updatePixels();

  } else {

    g.loadPixels();

​

    for (let y = 0; y < g.height - 1; y++) {

      for (let x = 1; x < g.width - 1; x++) {

        let oldr = g.pixels[index(g, x, y)];

        let oldg = g.pixels[index(g, x, y) + 1];

        let oldb = g.pixels[index(g, x, y) + 2];

​

        let factor = 1.0;

        let newr = round((factor * oldr) / 255) * (255 / factor);

        let newg = round((factor * oldg) / 255) * (255 / factor);

        let newb = round((factor * oldb) / 255) * (255 / factor);

​

        g.pixels[index(g, x, y)] = newr;

        g.pixels[index(g, x, y) + 1] = newg;

        g.pixels[index(g, x, y) + 2] = newb;

​

        g.pixels[index(g, x + 1, y)] += ((oldr - newr) * 7) / 16.0;

        g.pixels[index(g, x + 1, y) + 1] += ((oldr - newr) * 7) / 16.0;

        g.pixels[index(g, x + 1, y) + 2] += ((oldr - newr) * 7) / 16.0;

​

        g.pixels[index(g, x - 1, y + 1)] += ((oldr - newr) * 3) / 16.0;

        g.pixels[index(g, x - 1, y + 1) + 1] += ((oldr - newr) * 3) / 16.0;

        g.pixels[index(g, x - 1, y + 1) + 2] += ((oldr - newr) * 3) / 16.0;

​

        g.pixels[index(g, x, y + 1)] += ((oldr - newr) * 5) / 16.0;

        g.pixels[index(g, x, y + 1) + 1] += ((oldr - newr) * 5) / 16.0;

        g.pixels[index(g, x, y + 1) + 2] += ((oldr - newr) * 5) / 16.0;

​

        g.pixels[index(g, x + 1, y + 1)] += ((oldr - newr) * 1) / 16.0;

        g.pixels[index(g, x + 1, y + 1) + 1] += ((oldr - newr) * 1) / 16.0;

        g.pixels[index(g, x + 1, y + 1) + 2] += ((oldr - newr) * 1) / 16.0;

        g.updatePixels();

      }

    }

  }

}

​

function setGradient(x, y, w, h, c1, c2, axis, g) {

  if (g == null) {

    noFill();

​

    if (axis === Y_AXIS) {

      // Top to bottom gradient

      for (let i = y; i <= y + h; i++) {

        let inter = map(i, y, y + h, 0, 1);

        let c = lerpColor(c1, c2, inter);

        stroke(c);

        line(x, i, x + w, i);

      }

    } else if (axis === X_AXIS) {

      // Left to right gradient

      for (let i = x; i <= x + w; i++) {

        let inter = map(i, x, x + w, 0, 1);

        let c = lerpColor(c1, c2, inter);

        stroke(c);

        line(i, y, i, y + h);

      }

    }

  } else {

    g.noFill();

​

    if (axis === Y_AXIS) {

      // Top to bottom gradient

      for (let i = y; i <= y + h; i++) {

        let inter = map(i, y, y + h, 0, 1);

        let c = lerpColor(c1, c2, inter);

        g.stroke(c);

        g.line(x, i, x + w, i);

      }

    } else if (axis === X_AXIS) {

      // Left to right gradient

      for (let i = x; i <= x + w; i++) {

        let inter = map(i, x, x + w, 0, 1);

        let c = lerpColor(c1, c2, inter);

        g.stroke(c);

        g.line(i, y, i, y + h);

      }

    }

  }

}

​

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

  }

}

​