/*

  Interactive meme

*/

​

​

​

var rx = 200

var ry = 200

// let btn;

​

function setup() {

  createCanvas(400, 400);

  let btn = button

}

​

function draw() {

  background(220);

  overwatch(0,0)

  btn = button(0,0)

  // button.mouseOver(radomize)

  var d = dist(mouseX,mouseY, rx,ry);   //distance from circle center to mouse position

  if (d < 37.5) {  

      randomize()

    if (d > 35) {

        noverwatch

        // noLoop()

  //   } else{

  //     loop()

  // }

}

}

}

​

function button(){

  noStroke()

  fill("gray")

  circle(rx,ry, 90) //Outer ring

  stroke("white")

  fill("green")

  circle(rx,ry, 75)  //Green button

  fill("black")

  noStroke()

  textSize(20)  

  textStyle(BOLD)

  textAlign(CENTER, CENTER);

  text("CLICK", rx,ry)

}

​

function overwatch(){

  fill("black")

  noStroke()

  textSize(30)  

  textStyle(NORMAL)

  textAlign(CENTER, CENTER);

  text("Click the button to bring back", 200,50)

  fill("rgb(253,220,39)")

  // noStroke()

  textSize(55)  

  textStyle(BOLD)

  textAlign(CENTER, CENTER);

  text("OVERWATCH", 180,100)

  fill("silver")

  text("1", 380,100)

}

​

function randomize(){

  rx = random(45, width  -45);

  ry = random(45, height -45);

}

function noverwatch(){

  fill("gray")

  rect(0,0, 400,400)

  rect(width/4, height/4, width/2, height/2, 20)

}

​

​