let R = false; // Right

let U = false; // Top

let D = false; // Bottom

let pos;

let d = 120;

let r = d * 0.5;

​

speed = 2;

​

function setup() {

  createCanvas(400, 400);

  pos = createVector(200, 200);

}

​

function draw() {

  background(20);

​

  // Move object past left edge

  if (!L) {

    pos.x -= speed;

    if (pos.x + r < 0) {

      L = true;

      reset();

    }

  }

​

  // Move object past right edge

  if (L && !R) {

    pos.x += speed;

    if (pos.x - r > width) {

      R = true;

      reset();

    }

  }

​

  // Move object past bottom edge

  if (L && R && !D) {

    pos.y += speed;

    if (pos.y - r > height) {

      D = true;

      reset();

    }

  }

​

  // Move object past top edge

  if (L && R && D && !U) {

    pos.y -= speed;

    if (pos.y + r < 0) {

      U = true;

      reset();

    }

  }

​

  noStroke();

  fill(240, 74, 122);

  circle(pos.x, pos.y, d);

​

  textSize(200)

  fill(20)

  textAlign(CENTER, CENTER);

  textFont("arial")

  text('*', pos.x, pos.y + 60)

​

  checkmarks();  

  textSize(20);

  noStroke();

  fill(220)

  textFont("consolas")

  textAlign(LEFT)

  text(`x = ${pos.x}`, 20, 20)

  text(`y = ${pos.y}`, 20, 40)

}

​

function reset() {

  pos.x = 200;

  pos.y = 200;

}

​

function ok(x, y) {

  strokeWeight(15);

  noFill();

  strokeCap(ROUND);

​

  stroke(0, 100, 0);

  beginShape()

    vertex(x - 10, y - 20);

    vertex(x + 3, y + 3);

    vertex(x + 27, y - 40);

  endShape();

  stroke(0, 200, 0);

​

  beginShape()

    vertex(x - 15, y - 20);

    vertex(x, y);

    vertex(x + 22, y - 40);

  endShape();

}

​

function checkmarks() {

  if (L) {

    ok(30, 200);

  }

  if (R) {

    ok(width - 35, 200);

  }

​

  if (D) {

    ok(200, height - 20);

  }

​

  if (U) {

    ok(200, 55);

  }

}