const X_AXIS = 2;

let innerW, innerH;

let grid;

let numParticles;

​

let _scale;

​

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

}

let palette;

​

function setup() {

  createCanvas(1000, 1000);

​

  _scale = width / 1000;

​

  numParticles = random(100, 500) * _scale; //5000);

​

  innerW = width * random([0.25, 0.5, 0.8]);

  innerH = height * 0.8;

​

  background(220);

​

  noiseDetail(8, 0.75);

​

  palette = getRandomPalette();

​

  rectMode(CENTER);

  stroke(0);

  fill(20);

  rect(width / 2, height / 2, innerW, innerH);

​

  grid = [];

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

    grid[r] = [];

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

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

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

      // grid[r][c] = map(n, 0.0, 1.0, 0.0, TWO_PI*4);

    }

  }

​

  // background

  let g = createGraphics(innerW, innerH);

  setGradient(

    0,

    0,

    innerW,

    innerH,

    color(random(palette)),

    color(random(palette)),

    Y_AXIS,

    g

  );

  dither(g);

  image(g, width / 2 - innerW / 2, height / 2 - innerH / 2);

​

  let particles = [];

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

  //     let life = random(1500);

​

  // let placement = random(["border-random", "border", "random"]);

  // console.log(placement);

  // if (placement == "border-random") {

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

    let s = random([0, 1, 2, 3]);

    let life = random(200) * _scale; //1500);

    let r, c;

​

    r = random(height);

    c = random(width);

​

    // if (s == 0) {

    //   r = 0;

    //   c = int(random(0, innerW));

    // } else if (s == 1) {

    //   r = innerH - 1;

    //   c = int(random(0, innerW));

    // } else if (s == 2) {

    //   c = 0;

    //   r = int(random(0, innerH));

    // } else {

    //   c = innerW - 1;

    //   r = int(random(0, innerH));

    // }

    particles.push({

      r: r,

      c: c,

      x: c,

      y: r,

      col: random(palette), //0,100),

      life: life,

      olife: life,

      vx: random(-2, 2),

      vy: random(-2, 2),

    });

  }

  //   } else if (placement == "border") {

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

  //       for (let r = 0; r < innerH; r++) {

  //         let life = random(200)*_scale; //1500);

  //         particles.push({

  //           r: r,

  //           c: 0,

  //           col: random(palette), //0,100),

  //           life: life,

  //           olife: life,

  //         });

  //         particles.push({

  //           r: r,

  //           c: innerW - 1,

  //           col: random(palette), //0,100),

  //           life: life,

  //           olife: life,

  //         });

  //       }

  //       for (let c = 0; c < innerW; c++) {

  //         let life = random(1500)*_scale;

  //         particles.push({

  //           r: 0,

  //           c: c,

  //           col: random(palette), //0,100),

  //           life: life,

  //           olife: life,

  //         });

  //         particles.push({

  //           r: innerH - 1,

  //           c: c,

  //           col: random(palette), //0,100),

  //           life: life,

  //           olife: life,

  //         });

  //       }

  //     }

  //   } else {

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

  //       let r = random(innerH);

  //       let c = random(innerW);

  //       let life = random(200)*_scale; //1500);

​

  //       particles.push({

  //         r: r,

  //         c: c,

  //         col: random(palette),

  //         life: life,

  //         olife: life,

  //       });

  //     }

  //   }

  // particles.push({

  //   r:r, c:c,

  //   col: random(palette),//0,100),

  //   life: life,

  //   olife: life

  // });

  // }

​

  let startleft = width / 2 - innerW / 2;

  let starttop = height / 2 - innerH / 2;

​

  noStroke();

  while (particles.length > 0) {

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

      let p = particles[i];

​

      if (

        p.y < starttop ||

        p.y >= height - starttop ||

        p.x < startleft ||

        p.x >= width - startleft

      ) {

        p.y += p.vy;

        p.x += p.vx;

        let _col = color(p.col);

        _col.setAlpha(40);

        fill(_col);

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

      } else {

        let angle = grid[Math.floor(p.r)][Math.floor(p.c)];

​

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

        let xstep = scale * cos(angle);

        let ystep = scale * sin(angle);

​

        p.c += xstep;

        p.r += ystep;

        p.x += xstep;

        p.y += ystep;

        p.life--;

​

        if (

          p.c < 0 ||

          p.c > innerW - 1 ||

          p.r < 0 ||

          p.r > innerH - 1 ||

          p.life <= 0

        ) {

          if (random() > 0.75) {

            let _col = color(p.col);

            for (let _y = starttop + p.r; _y < innerH / 2 + height / 2; _y++) {

              _col.setAlpha(

                map(_y, starttop + p.r, innerH / 2 + height / 2, 255, 0)

              );

              stroke(_col);

              point(p.c + startleft - xstep, _y);

            }

          }

          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 col = color(p.col);

        col.setAlpha(map(p.life, p.olife, 0, 255, 0));

        // fill(col);

        // drawPoint(startleft + p.c, starttop + p.r, map(p.life, p.olife, 0, 12, 5), p.col);

        drawPoint(startleft + p.c, starttop + p.r, 4 * _scale, p.col);

​

        // circle(startleft + p.c, starttop + p.r, map(p.life, p.olife, 0, 12, 0.25));

      }

    }

  }

​

  // dither(null);

}

​

function drawPoint(x, y, s, col) {

  // fill(color(col));

  // if (random() > 0.5) circle(x, y, s);

  // else square(x, y, s);

  let _c = color(col);

  stroke(_c);

  point(x, y);

​

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

    _c.setAlpha(random(40, 80));

    stroke(_c);

    strokeWeight(random(0.2, 0.75) * _scale);

    point(x + random(-2, 2) * _scale, y + random(-2, 2) * _scale);

  }

​

  //   let c1 = color(col);

  //   let c2 = color(col);

​

  //   c1.setAlpha(random(10,100));

  //   c2.setAlpha(random(10,100));

​

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

  //     fill(random([c1,c2]));

  //     ellipse(x+random(-0.5,0.5),y+random(-0.5,0.5), s+random(-0.5,0.5),s+random(-1.5,1.5));

  //   }

}

​

function draw() {

  // background(220);

  noLoop();

}

​

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

  let referenceSize = 1000;

  let hasMaxSize = false;

  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 newr = (DivideBy255(oldr) * 255) | 0;

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

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

​

        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;

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

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

​

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

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

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

​

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

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

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

​

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

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

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

          }

        }

      }

    }

    updatePixels();

  } else {

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

    g.loadPixels();

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

      for (let x = _scale; x < g.width - _scale; 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 newr = (DivideBy255(oldr) * 255) | 0;

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

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

​

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

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

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

​

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

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

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

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

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

​

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

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

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

​

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

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

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

​

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

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

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

          }

        }

      }

    }

    g.updatePixels();

  }

}

​

// p5

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

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

      }

    }

  }

}

​

// p5

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

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

      }

    }

  }

}

​