let far, w, h;

let jitter;

function setup() {

  createCanvas(800, 800);

  w = random(width * 0.5, width * 0.25);

  h = w / 1.5;

  jitter = [0,0,0,0,0,0,0,0,-1,-1,1,1,2,-2];

​

  resetFar();

  textAlign(CENTER,CENTER);

  textFont("Courier");

}

​

function draw() {

  background(220);

​

  fill(230);

  stroke(210);

  rect(far.x, far.y, far.w, far.h);

  // line(far.x, far.y, 0, 0);

  // line(far.x + far.w, far.y, width, 0);

  // line(far.x, far.y + far.h, 0, height);

  // line(far.x + far.w, far.y + far.h, width, height);

  fill(210);

  noStroke();

  beginShape();

  vertex(0,0);

  vertex(far.x, far.y);

  vertex(far.x, far.y+far.h);

  vertex(0,height);

  endShape(CLOSE);

  beginShape();

  vertex(width,0);

  vertex(far.x+far.w, far.y);

  vertex(far.x+far.w, far.y+far.h);

  vertex(width,height);

  endShape(CLOSE);

  push();

  let t = "ಠ_ಠ";

  textAlign(CENTER,CENTER);

  let tw = textWidth(t);

  translate(far.x+(far.w/2), far.y+(far.h/2));

  text(t,0,0);

  pop();

​

  if (frameCount % 20 == 0) resetFar();

  else {

    far.w += getJitter();

    far.h += getJitter();

    far.x += getJitter();

    far.y += getJitter();

  }

  // drawWalls();

}

​

function resetFar() {

  far = { x: width / 2 - w / 2, y: height / 2 - h / 2, w: w, h: h };

  textSize(h/2);

}

function getJitter() {

  return random(jitter);

}

​