let grid;

let particles;

let points;

let numparticles = 500;

let palette = ["#ff71ce", "#01cdfe", "#05ffa1", "#b967ff", "#fffb96"];

const Y_AXIS = 1;

const X_AXIS = 2;

let main_point_col, main_point_col2;

function setup() {

  createCanvas(3000, 3000);

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

  angleMode(RADIANS);

​

  grid = [];

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

    grid[y] = [];

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

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

      let a = int(map(n, 0.0, 1.0, 0, TWO_PI));

      grid[y][x] = {

        n: n,

        // visited: false,

        a: a,

      };

    }

  }

  main_point_col = color(random(palette));

  main_point_col2 = color(random(palette));

​

  particles = [];

  points = {};

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

    let life = int(random(width / 2, width));

    particles.push({

      x: int(random(width - 1)),

      y: int(random(height - 1)),

      l: life,

      ol: life,

    });

    // if (random() > 0.7)

    points[i] = [];

  }

​

  background(220);

  setGradient(

    0,

    0,

    width,

    height,

    color(random(palette)),

    color(random(palette)),

    Y_AXIS,

    null

  );

  stroke(color(20, 20, 20, 80));

}

​

let ptid = 0;

function draw() {

  // stroke(20);

​

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

    let p = particles[i];

​

    // point(p.x, p.y);

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

    if (points.hasOwnProperty(i)) points[i].push({ x: p.x, y: p.y, a: a });

​

    p.x += cos(a);

    p.y += sin(a);

​

    p.l--;

​

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

      particles.splice(i, 1);

    }

  }

​

  if (particles.length == 0) {

    if (ptid < numparticles) {

      let r = random(255);

      // fill(color(r,0,r));

      // noStroke();

      // stroke(color(r,0,r))

      let rad = random(3, 8);

      let rad2 = rad / 2;

​

      let col1 = color(r, 0, r);

      let col2 = color(20);

​

      for (let i = 0; i < points[ptid].length; i++) {

        if (points.hasOwnProperty(ptid)) {

          let col = lerpColor(

            col1,

            col2,

            map(i, 0, points[ptid].length, 1.0, 0.0)

          );

​

          stroke(col);

          fill(col);

          let p = points[ptid][i];

​

          if (random() > 0.75)

            drawPoint(

              p.x,

              p.y,

              random(width * 0.01, width * 0.05),

              int(random(0, 15))

            ); //100)));

          /*

          if (random() > 0.7) {

            push();

            translate(p.x, p.y);

            rotate(p.a);

            let llen = random(1, 5);

            line(-llen, -llen, llen, llen);

            pop();

          } else {

            ellipse(

              p.x + rad2 + random(-3, 3),

              p.y + rad2 + random(-3, 3),

              rad + random(-2, 2),

              rad + random(-2, 2)

            );

          }

          */

          // circle(p.x+rad2, p.y+rad2,rad);

        }

      }

      ptid++;

    } else {

      asciize();

      console.log("done");

      noLoop();

    }

  }

}

​

function drawPoint(x, y, spr, num) {

  point(x, y);

  for (let _ = 0; _ < num; _++) {

    let d = random(-spr,spr);

    let col = lerpColor(main_point_col2, main_point_col, map(abs(d),0,spr*2,0.0,1.0));

    stroke(col);

    point(x + d, y + d);

    // point(x + random(-spr, spr), y + random(-spr, spr));

  }

}

​

//https://editor.p5js.org/codingtrain/sketches/ytK7J7d5j

function asciize() {

  const density = "Ñ@#W$9876543210?!abc;:+=-,._ ";

  textFont("Courier");

  txtSize = 12;

  htxtSize = txtSize / 2;

  textSize(txtSize);

  loadPixels();

  textAlign(CENTER, CENTER);

  const len = density.length;

  for (let j = htxtSize; j < height; j += htxtSize) {

    for (let i = htxtSize; i < width; i += htxtSize) {

      const idx = (i + j * width) * 4;

      const r = pixels[idx + 0];

      const g = pixels[idx + 1];

      const b = pixels[idx + 2];

​

      stroke(color(r, g, b));

      const avg = (r + g + b) / 3;

      const cidx = floor(map(avg, 0, 255, len, 0));

      const c = density.charAt(cidx);

      text(c, i, j);

    }

  }

  /*

    gloria.loadPixels();

  for (let j = 0; j < gloria.height; j++) {

    let row = "";

    for (let i = 0; i < gloria.width; i++) {

      const pixelIndex = (i + j * gloria.width) * 4;

      const r = gloria.pixels[pixelIndex + 0];

      const g = gloria.pixels[pixelIndex + 1];

      const b = gloria.pixels[pixelIndex + 2];

​

      const avg = (r + g + b) / 3;

​

      const len = density.length;

      const charIndex = floor(map(avg, 0, 255, len, 0));

​

      const c = density.charAt(charIndex);

      if (c == " ") row += " ";

      else row += c;

    }

    createDiv(row);

    */

}

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

      }

    }

  }

}

​