​

function preload() {

  image_back_all = loadImage("data/back_all.jpg");

  image_back_no = loadImage("data/back_no.jpg");

  image_back_oneA = loadImage("data/back_oneA.jpg");

  image_back_oneB = loadImage("data/back_oneB.jpg");

}

​

function setup() {

  createCanvas(1200, 800);

  image_back_all.resize(1202, 802);

  image_back_no.resize(1202, 802);

  image_back_oneA.resize(1202, 802);

  image_back_oneB.resize(1202, 802);

  frameRate(10);

  button = new Button(194, 654, 192, 92, color(255,100,100,50),click);

}

​

function click() {

  print("CLICKED");

}

​

function flicker() {

  let r = 0.1;

  if (random() < r / 2) {

    image(image_back_all, -1, -1);

  } else if (random() < r) {

    if (random() < 0.5) {

      image(image_back_oneA, -1, -1);

    } else {

      image(image_back_oneB, -1, -1);

    }

  } else {

    image(image_back_no, -1, -1);

  }

}

​

function draw() {

  flicker();

  button.display();

}

​

function mousePressed() {

  if(button.isHoveredOver()) {

    button.reactionFunction();

  }

}

​

​

class Button {

  constructor(x, y, w, h, hover_col, reactionFunction) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.hover_col = color(hover_col);

    this.reactionFunction = reactionFunction;

  }

​

  display() {

    noStroke();

    if (this.isHoveredOver()) {

      fill(this.hover_col);

    } else {

      noFill();

    }

​

    rect(this.x - 34, this.y, this.w + 73, this.h, 50, 50, 50, 50);

  }

​

  // check to see mouse is over the current button

  isHoveredOver() {

    return (

      mouseX > this.x &&

      mouseX < this.x + this.w &&

      mouseY > this.y &&

      mouseY < this.y + this.h

    );

  }

}

​