let DIM;

let cbox, hcbox;

let sx, sy;

let font;

​

let fragSrc, frag;

let ditherSrc, dither;

let gfx;

function preload() {

  font = loadFont("font/Adler.ttf");

}

let txt;

​

function setup() {

  DIM = [1000, 1000];

  createCanvas(DIM[0], DIM[1]);

  gfx = createGraphics(width,height);

  gfx.background(20);

  background(20);

​

  noiseDetail(8, 0.25);

  txt = random(["happiness", "melancholy", "despondency", "banality", "ennui", "regret"]);

​

  cbox = width / 4;

  hcbox = cbox / 2;

​

  particles = [];

  particles2 = [];

  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 m = map(n, 0.0, 1.0, 0.0, TWO_PI);

      let m2 = Math.ceil((map(n, 0.0, 1.0, 0.0, TWO_PI) * (PI / 4)) / (PI / 4));

      grid[y][x] = {

        n: n,

        m: m,

        m2: m2,

      };

    }

  }

​

  sx = width / 2 - hcbox;

  sy = height / 2 - hcbox;

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

    let ol = random(100, 300);

    particles.push({

      x: random(sx, sx + cbox),

      y: random(sy, sy + cbox),

      l: ol,

      ol: ol,

    });

  }

​

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

    particles2.push({

      x: random(width),

      y: random(0, -height / 2),

      vx: random(-2, 0),

      vy: random(0.5, 2),

      tgty: random(height, height/2),

      amp: random(10,250),

      freq: random(0.01, 10),

      on: true,

    });

  }

​

  gfx.textFont(font);

  gfx.textSize(64);

  gfx.textAlign(CENTER, CENTER);

  fragSrc = `precision mediump float;

​

// lets grab texcoords just for fun

varying vec2 vTexCoord;

​

uniform float u_time;

​

// our texture coming from p5

uniform sampler2D tex0;

​

void main() {

​

  vec2 uv = vTexCoord;

  // the texture is loaded upside down and backwards by default so lets flip it

  // uv = 1.0 - uv;

​

  // to pixelate an image we need to alter our uvs so that instead of being a smooth gradient it steps from one color to the next

  // in order to do this we will use the floor function

  // floor will round a float down to the nearest int, so 4.98 would become 4.0, and -37.2 would become -37.0

  // first the uv's are multipled times a tiles variable

  float tiles = 250.;//20.0;

  uv = uv * tiles;

​

  // second the uvs are rounded down to the nearest int

  uv = floor(uv);

​

  // lastly we divide by tiles again so that uvs is between 0.0 - 1.0

   uv = (uv / tiles);

​

  // often times in glsl you will see programmers combining many operation onto one line.

  // the previous three steps could have also been written as uv = floor( uv * tiles ) / tiles

​

  // get the webcam as a vec4 using texture2D and plug in our distored uv's

  vec4 tex = texture2D(tex0, uv);

​

  // output the texture

  gl_FragColor = tex;

​

  // if you'd like a debug view of what the uv's look like try running this line

  //gl_FragColor = vec4(uv.x, uv.y, 0.0, 1.0);

}`;

 frag=gfx.createFilterShader(fragSrc); 

  drips = [];

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

    drips.push({x:random(width), y: random(-height/2,0), w: random(0.5, 5.), d: random(10,50),

                col: color(255,0,255,255),//random(20,120))

               });

  }

}

​

let paused = false;

let drips;

function draw() {

  if (!paused) {

  gfx.background(color(20, 20, 20, 10));

  for (let d of drips) {

    gfx.noFill();

    gfx.stroke(d.col);

    gfx.strokeWeight(d.w);

    gfx.circle(d.x, d.y, d.d);

    d.y++;

    if (d.y > height + d.d) d.y = -d.d*2;

  }  

​

  for (let p of particles2) {

    let alph = map(p.y, 0, p.tgty, 220, 0);

    let col = color(220,0,20);

    if (!p.on) col = color(0);

    col.setAlpha(alph);

    gfx.stroke(col);

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

    p.x += p.amp * cos(p.freq*p.y);

    p.y += p.vy;

    if ((p.y > p.tgty || p.x < 0) || random() > 0.99) {

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

      p.x = random(width);

      p.on = !p.on;

    }

  }

​

  gfx.stroke(220);

  gfx.noFill();

  gfx.rect(sx, sy, cbox, cbox);

​

  for (let p of particles) {

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

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

​

    let alph = 220;

    if (p.x > sx && p.x < sx + cbox && p.y > sy && p.y < sy + cbox) {

      p.x += cos(a);

      p.y += sin(a);

    } else {

      p.x += cos(a2);

      p.y += sin(a2);

      alph = 20;

    }

​

    let c = map(p.l, p.ol, 0, 220, 0);

    gfx.stroke(color(c,c,c,alph));

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

​

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

      p.x = random(sx, sx + cbox);

      p.y = random(sy, sy + cbox);

      let ol = random(100, 300);

      p.l = ol;

      p.ol = ol;

    }

    p.l -= random(0.5, 2.0);

​

    if (random(0, 1000) > 998) p.l = 0;

  }

​

  gfx.noStroke();

  gfx.fill(40);

​

  let x = width / 2;

  let y = height - 120;

​

  if (random() > 0.9) {

    gfx.fill(0);

    // stroke(0);

    x += random(-5, 5);

    y += random(-5, 5);

  }

  gfx.text(txt, x, y);//"regret", x, y);

  // if (random() > 0.9) gfx.text("regret", x, y-20);

  frag.setUniform("u_time", frameCount);

  gfx.filter(frag);

  image(gfx,0,0);

}

}

​

function keyPressed() {

  if (key === "s") saveGif("d.gif", 8);

  if (key === "p") save("d.png");

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

}

​