xxxxxxxxxx
let tileSize = 80;
let speed = 2;
let x = 0;
let tiles;
let font;
function preload() {
font = loadFont('Heavitas.ttf');
}
function setup() {
createCanvas(800, 950);
randomSeed(0);
let no = createGraphics(width, height);
no.background(0,0,255);
no.textFont(font);
no.textAlign(CENTER, CENTER);
no.textSize(200);
no.fill(255);
no.noStroke();
no.text('FOUND', no.width/2, no.height/2-48);
no.textSize(12);
for (let i=0; i<250; i++) {
no.text('lost', random(no.width), random(no.height));
}
randomSeed(0);
let yes = createGraphics(width, height);
yes.background(255);
yes.textFont(font);
yes.textAlign(CENTER, CENTER);
yes.textSize(200);
yes.fill(0,0,255);
yes.noStroke();
yes.text('LOST', yes.width/2, yes.height/2-48);
yes.textSize(12);
for (let i=0; i<250; i++) {
yes.text('found', random(yes.width), random(yes.height));
}
tiles = [];
for (let y=0; y<no.height; y+=tileSize) {
for (let x=0; x<no.width; x+=tileSize) {
let tile = new Tile(x, y, tileSize, no, yes);
tiles.push(tile);
}
}
background(0);
}
function draw() {
let pos = map2(x, 0,width, 0,width, QUARTIC, BOTH);
for (let i=0; i<tiles.length; i++) {
tiles[i].display(pos);
}
x += speed;
if (x < 0 || x > width) {
speed *= -1;
}
}
class Tile {
constructor(x, y, w, no, yes) {
this.x = x;
this.y = y;
this.no = createImage(w, w);
this.no.copy(no, x,y, w,w, 0,0, w,w);
this.yes = createImage(w, w);
this.yes.copy(yes, x,y, w,w, 0,0, w,w);
this.flipX = random(width/2-40, width/5+10);
}
// display the tile!
display(x) {
push();
translate(this.x, this.y);
rotate( map(x, 0,width, 0,TWO_PI) );
if (x < this.flipX) {
image(this.no, 0,0);
}
else {
image(this.yes, 0,0);
}
pop();
}
}