let grid;

let particles;

let paused = false;

const Y_AXIS = 1;

const X_AXIS = 2;

// chromotome / tsu_arcade

const tsu_arcade = [

  "#cfc7b9",

  "#4aad8b",

  "#e15147",

  "#f3b551",

  "#cec8b8",

  "#d1af84",

  "#544e47",

];

const winter_night = ["#ebebeb", "#122438", "#dd672e", "#87c7ca"];

const colors = [tsu_arcade, winter_night];

​

const numParticles = 560;

let font;

let scale;

​

let frameCutoff = 500; //0;

​

let txts = [

  { txt: "i wonder", size: 72, width: 0, timer: 0, cooldown: 0 },

  {

    txt: "I remember my grandparents being frugal.",

    size: 72,

    width: 0,

    timer: 0,

    cooldown: 0,

  },

  {

    txt: "They would use every piece of an animal.",

    size: 72,

    width: 0,

    timer: 0,

    cooldown: 0,

  },

  {

    txt: "They would wash plastic bags to reuse.",

    size: 72,

    width: 0,

    timer: 0,

    cooldown: 0,

  },

  {

    txt: "They would never spend money frivolously.",

    size: 72,

    width: 0,

    timer: 0,

    cooldown: 0,

  },

  {

    txt: "Nothing would go to waste.",

    size: 72,

    width: 0,

    timer: 0,

    cooldown: 0,

  },

  {

    txt: "I wonder what stories we'll tell our grandchildren.",

    size: 72,

    width: 0,

    timer: 0,

    cooldown: 0,

  },

  {

    txt: "I wonder if they'll think we're crazy for avoiding crowds.",

    size: 72,

    width: 0,

    timer: 0,

    cooldown: 0,

  },

  {

    txt: "I wonder if they'll understand the horror of other people.",

    size: 72,

    width: 0,

    timer: 0,

    cooldown: 0,

  },

  {

    txt: "I wonder if they'll understand why we hold them tight.",

    size: 72,

    width: 0,

    timer: 0,

    cooldown: 0,

  },

  {

    txt: "I wonder if an errant cough will send them into a panic attack.",

    size: 72,

    width: 0,

    timer: 0,

    cooldown: 0,

  },

  { txt: "I wonder.", size: 72, width: 0, timer: 0, cooldown: 0 },

];

​

function preload() {

  font = loadFont("m5x7.ttf");

}

​

let palette;

function setup() {

  createCanvas(1000, 1000);

  scale = 1.0;

  // createCanvas(3840,2160);

  border_offset = width * 0.03;

​

  palette = random(colors);

​

  let _rs = int(random(500000));

  let _ns = int(random(500000));

  console.log(`Random seed [${_rs}], Noise seed [${_ns}]`);

  randomSeed(_rs);

  noiseSeed(_ns);

​

  noiseDetail(8, 0.75);

​

  textSize(72);

  textFont(font);

  textAlign(CENTER, CENTER);

​

  for (let k in txts) {

    txts[k].width = textWidth(txts[k]);

    txts[k].color = random(palette);

  }

​

  grid = [];

  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 / 2)

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

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

        );

      // classic

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

    }

  }

​

  particles = [];

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

    particles.push({

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

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

      color: random(palette),

      size: random(0.5, 2.0),

    });

    // if (random() > 0.9) particles[i].size = 12;

  }

​

  frameRate(60);

  background(0);

​

  setGradient(

    border_offset,

    border_offset,

    width - 2 * border_offset,

    height - 2 * border_offset,

    color(0),

    color(20),

    Y_AXIS

  );

​

  // dither(null);

  // noStroke();

  // fill(20);

  // rect(

  //   border_offset,

  //   border_offset,

  //   width - 2 * border_offset,

  //   height - 2 * border_offset

  // );

​

  // grid

  let numcells = 40;

  let cellsize = (width - border_offset * 2) / numcells;

​

  let gx = border_offset;

  let gy = border_offset;

  textAlign(CENTER, CENTER);

  textSize(cellsize + cellsize / 2);

​

  let superstring = "";

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

    superstring += txts[i].txt + "..";

  }

​

  drawLines();

  let iter = 0;

  drawShadow(0, 0, 10, color(255), null);

  let grid2 = [];

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

    grid2[r] = [];

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

      let _n = noise(c,r);

      let _col = color(map(_n, 0.0, 1.0, 0, 255));

      // let idx = int(map(_n, 0.0, 1.0, 0, palette.length-2));

      // console.log(palette, idx)

      // _col = color(palette[idx]);

      // let _col = color(random(255)); //palette));

      // _col.setAlpha(random(10, 40));

      // fill(_col);

      // square(gx, gy, cellsize);

​

      // if (random() > 0.75) 

        // fill(220);

      // else 

        fill(0);

      text(superstring[iter], gx + cellsize / 2, gy + cellsize / 2);

​

      gx += cellsize;

​

      iter++;

      if (iter > superstring.length - 1) iter = 0;

    }

    gy += cellsize;

    gx = border_offset;

  }

​

​

​

  textAlign(LEFT, CENTER);

  // first wonder

  let _x = border_offset / 2;

  let _y = border_offset / 2;

  let ts = 72;

  textSize(ts);

  let tw = textWidth(txts[0].txt);

  // fill(random(palette));

  // rect(_x, _y, tw, ts / 2);

  // fill(40);

  // drawShadow(0, 0, 10, color(255), null);

  // text(txts[0].txt, _x, _y + ts / 8);

​

  //   let offsets = (height-border_offset*3) / txts.length;

​

  //   _y += offsets;//72;// + random(0,72);

  //   for (let i = 1; i <= txts.length-2; i++) {

  //     tw = textWidth(txts[i].txt);

​

  //     while (tw > width - border_offset*2) {

  //       ts--;

  //       textSize(ts);

  //       tw = textWidth(txts[i].txt);

  //     }

​

  //     fill(random(palette));

  //     rect(_x, _y, tw, ts/2);

  //     fill(40);

  //     drawShadow(0,0,10,color(255),null);

  //     text(txts[i].txt, _x, _y+ts/8)

​

  //     _y += offsets;//ts;

  //   }

​

  // _y += random(72, 72 * 2);

​

  //   let _y = random(border_offset, border_offset * 2);

  //   for (let t in txts) {

  //     let tw = textWidth(t);

  //     let _x = random(border_offset, border_offset * 2);

​

  //     if (_y > height - 72) _y = random(height / 2, height - 72);

  //   }

​

  // last

  ts = 48;

  textSize(ts);

  tw = textWidth(txts[txts.length - 1].txt);

​

  _x = width - tw - border_offset / 2;

  _y = height - border_offset / 2 - ts / 2;

​

  tw = textWidth(txts[txts.length - 1].txt);

  fill(random(palette));

  rect(_x, _y, tw, ts / 2);

  fill(40);

  drawShadow(0, 0, 10, color(255), null);

  text(txts[txts.length - 1].txt, _x, _y + ts / 8);

​

  dither(null);

  textAlign(CENTER,CENTER);

  textSize(cellsize);

  iter = 0;

  gx=border_offset;

  gy = border_offset;

  // drawShadow(0, 0, 10, color(255), null);

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

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

      fill(220);

      text(superstring[iter], gx + cellsize / 2, gy + cellsize / 2);

​

      gx += cellsize;

​

      iter++;

      if (iter > superstring.length - 1) iter = 0;

    }

    gy += cellsize;

    gx = border_offset;

  }

  noLoop();

}

​

function drawLines() {

  while (frameCutoff > 0) {

    // noStroke();

    for (let k in txts) {

      let _c = color(20);

      if (txts[k].timer == 0) {

        fill(20);

        _c = color(20);

      } else {

        // fill(map(txts[k].timer, 100, 0, 220, 20));

        fill(20);

​

        _c = lerpColor(

          color(20),

          color(txts[k].color),

          map(txts[k].timer, 100, 0, 1.0, 0.0)

        ); //color(map(txts[k].timer, 100, 0, 60, 20));

        txts[k].timer--;

        if (txts[k].timer == 0) txts[k].cooldown = 100;

      }

​

      if (txts[k].cooldown > 0) txts[k].cooldown--;

​

      // fill(20);

      stroke(220);

      drawShadow(-2, -2, 5, _c);

      // text(k, width / 2, height / 2);

    }

    drawShadow(0, 0, 0, 0);

    noStroke();

    for (let p of particles) {

      let _x = int(p.x);

      let _y = int(p.y);

​

      let angle = grid[_y][_x];

​

      let scale = 1.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) {

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

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

      }

​

      for (let k in txts) {

        if (

          p.x >= width / 2 - txts[k].width / 2 &&

          p.x <= width / 2 + txts[k].width / 2 &&

          p.y >= height / 2 &&

          p.y <= height / 2 + 72 / 2 &&

          txts[k].timer <= 0 &&

          txts[k].cooldown == 0

        )

          txts[k].timer = 100;

      }

​

      // if (angle == null) {

      let a = 180;

      if (

        p.x <= border_offset ||

        p.x >= width - border_offset ||

        p.y <= border_offset ||

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

      )

        a = 20;

​

      //       // if (this.y < height / 2)

      //       //   gfx.fill(color(0, map(this.y, 0, height / 2, 255, 0), 0, a));

      //       // else gfx.fill(color(map(this.y, height / 2, height, 0, 255), 0, 0, a));

      let c = color(p.color);

      c.setAlpha(a);

      fill(c);

​

      if (random() > 0.99)

        ellipse(

          p.x + random(-2, 2),

          p.y + random(-2, 2),

          p.size + random(-12, 12),

          p.size + random(-12, 12)

        );

​

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

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

        circle(

          p.x + random(-2, 2),

          p.y + random(-2, 2),

          p.size + random(-2, 2)

        );

      }

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

    }

    frameCutoff--;

  }

  dither(null);

}

​

// draw the text around the bdd

​

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

  }

}

​

function keyPressed() {

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

}

​

function index(g, x, y) {

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

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

}

​

function dither(g) {

  if (g == null) {

    let _scale = 1.0; //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);

​

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

      }

    }

  }

}

​