var speedRand;

let font;

let letter;

var myColor;

var strWg;

var rotNum;

var detect;

​

function setup() {

  createCanvas(800, 800);

  constructGraphics();

  noStroke();

  noCursor();

}

​

function constructGraphics() {

  canvas = createGraphics(800, 800);

  canvas.fill(0, 100);

  canvas.rect(0, 0, canvas.width, canvas.height);

  canvas.smooth(4);

  canvas.translate(canvas.width / 2, canvas.height / 2);

  canvas.fill(255);

  canvas.ellipse(0, 0, 400);

}

​

function draw() {

  background(0);

​

  var xGetPos = mouseX;

  var yGetPos = mouseY;

  myColor = canvas.get(xGetPos, yGetPos);

  readCanvas();

  image(canvas, 0, 0);

​

  rectMode(CENTER);

  rect(xGetPos, yGetPos, 50);

​

  push();

  strokeWeight(5);

  stroke(255, 0, 0);

  point(xGetPos, yGetPos);

  fill(255, 0, 0);

  strokeWeight(1);

  textSize(20);

  text(detect, xGetPos + 20, yGetPos);

  noFill();

​

  ellipse(xGetPos, yGetPos, 20);

  pop();

}

​

function readCanvas() {

  if (myColor[0] > 200) {

    fill(0, 0, 255);

    detect = "shape in BG detected";

  } else {

    noFill();

    detect = "shape in BG not detected";

  }

}

​