​

let img, img2;

let words;

let font;

let border_off;

let k;

let particles;

// const easing = 0.05;

const chunkSize = 10;

​

// particle states

const WAIT = 0;

const UP = 1;

const DOWN = 2;

​

function preload() {

  font = loadFont("m5x7.ttf");

  let imgs = [

    "forest.png",

    "hel1.png",

    "hel2.png",

    "mountain.png",

    "savana.png",

  ];

  let _f = random(imgs);

  img = loadImage(_f);

  img2 = loadImage(_f);

}

function setup() {

  img.resize(600, 0);

  img2.resize(600, 0);

  createCanvas(img.width, img.height);

​

  textFont(font);

  textSize(48);

  img2.loadPixels();

  let _x = random(img2.width);

  let _y = random(img2.height);

  let _c = img2.get(_x, _y);

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

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

      let _c2 = img2.get(x,y);

      if (_c2[0] == _c[0] && _c2[1] == _c[1] && _c2[2] == _c[2]) {  

         img2.set(x,y,color(255,0,255));

      }

    }

  }

  img2.updatePixels();

​

  // img2.filter(THRESHOLD);

  // setup 'pieces'

  // particles = [];

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

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

  //     particles.push(new Particle(

  //       x, y, chunkSize, random(0.05,0.1)

  //     ));

  //   }

  // }

​

  // let g = createGraphics(img.width, img.height);

  //   img.loadPixels();

  //   g.textSize(12);

  //   g.textAlign(CENTER,CENTER);

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

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

  //       let idx = (x+y*img.width)*4;

  //       let c = color(

  //         img.pixels[idx],

  //         img.pixels[idx+1],

  //         img.pixels[idx+2],

  //         img.pixels[idx+3],

  //       );

  //       g.stroke(c);

  //       g.noFill();

  //       g.strokeWeight(0.5);

  //       g.text(String.fromCharCode(int(random(0,1000))), x+6,y+6);

  //     }

  //   }

​

  //   image(g,0,0);

​

  words = {};

  words["Creme"] = "a creamy coffee, sun shines on the table";

  words["Wren"] =

    "a view on a forest, with the sun through the trees / on the trees?";

  words["Shine"] = "a door reflects the sunlight";

  words["Awe"] = "mountains reflect the sunlight ";

  words["Glass"] =

    "sun that shines on the side of a building / on the windows of a building";

​

  border_off = width * 0.01;

​

  k = random(Object.keys(words));

​

  // console.log(particles);

  // noLoop();

  frameRate(30);

  image(img2,0,0);

  noLoop();

}

​

function draw() {

  // background(0);

  // image(img2, 0, 0);

  // push();

  // drawShadow(0,0,0);

//   for (let p of particles) {

//     p.update();

//     p.draw();

//     if (frameCount % 150 == 0 && p.mode == WAIT) {

//       p.mode = UP;

//     }

//   }

//   pop();

​

​

  // drawStuff();

  // image(img,0,0);

}

​

function drawStuff() {

  drawShadow(2, 2, 5);

​

  fill(color(255, 255, 255, 220));

  noStroke();

  textAlign(LEFT);

  text(k, border_off + 6, border_off + 28);

​

  drawShadow(0, 0, 15, color(220));

  myText(

    words[k],

    width / 2,

    height - border_off - 28,

    width - border_off * 2 - 12

  );

​

  noFill();

  stroke(color(0, 0, 0, 120));

  strokeWeight(2);

  rect(border_off, border_off, width - 2 * border_off, height - 2 * border_off);

}

function drawShadow(x, y, b, col = color(0)) {

  drawingContext.shadowOffsetX = x;

  drawingContext.shadowOffsetY = y;

  drawingContext.shadowBlur = b;

  drawingContext.shadowColor = col;

}

​

// thanks to fxhash discord user cables.and.pixels for this!

function myText(t, x, y, _width) {

  // textSize(120);

  // textFont('serif');

  // textFont('monospace')

  // textSize(24);

  push();

  let w = textWidth(t);

  textSize((40 * (_width - _width * 0.1)) / w);

  textAlign(CENTER, CENTER);

  text(t, x, y);

  pop();

}

​

class Particle {

  constructor(x,y,s,e) {

    this.easing = e;

    this.x = x;

    this.y = y;

    this.origX = x;

    this.origY = y;

    this.s = s;

    this.tgtX = x;

    this.tgtY = this.origY - height;

    this.mode = WAIT;

    this.img = createImage(s,s);

    this.img.copy(img,x,y,s,s,0,0,s,s);

  }

  update() {

    if (this.mode > WAIT) {

      let dy = this.tgtY - this.y;

      this.y += dy * this.easing;  

      if (Math.abs(dy) < 0.2) {

        if (this.mode == UP) {

          this.mode = DOWN;

          this.tgtY = this.origY;

        } else if (this.mode == DOWN) {

          this.mode = WAIT;

          this.tgtY = this.origY - height;

        }

      }

    }

  }

  draw() {

    image(this.img, this.x, this.y);

  }

}

​