// https://editor.p5js.org/whatmakeart/sketches/iF8fQX3kL

​

let circleX;

let circleY;

let resetSize = 50;

let circleSize = resetSize;

let changeAmmount = 5;

let distance;

let clicksCount = 0;

let missesCount = 0;

function setup() {

  createCanvas(400, 400);

  circleX = width / 2; // circle in the horizontal center

  circleY = height / 2; // circle in the vertical center

}

​

function draw() {

  background(220);

​

  ellipseMode(CENTER);

  circle(circleX, circleY, circleSize);

  // draw line from center of circle to mouse

  line(circleX, circleY, mouseX, mouseY);

  // calculate distance

  // https://p5js.org/reference/#/p5/dist

  distance = dist(circleX, circleY, mouseX, mouseY);

​

  fill(0); // make text black

  textAlign(CENTER); // center text

  text("Distance from center of circle = " + distance, width / 2, height / 4); // print distance to mouse

  text("radius of circle = " + circleSize / 2, width / 2, height / 5); // print radius of circle diameter / 2

​

  text("Total Misses = " + missesCount, width / 4, height / 1.1); // print number of miss clicks

  text("Total Hits = " + clicksCount, width / 1.3, height / 1.1); // print number of miss clicks

​

  // change color of circle if mouse inside

  if (distance < circleSize / 2) {

    fill(255, 0, 0);

  } else {

    fill(255);

  }

​

  // keep circle from going off screen

​

  if (circleX < 0 || circleX > width) {

    circleX = width / 2;

    circleSize = resetSize;

    missesCount = 0;

    clicksCount = 0;

  }

}

​

// move circle right if clicked inside and left if outside

// make circleSize Bigger or Smaller if clicked in or out

// keep track of clicks

function mousePressed() {

  if (distance < circleSize / 2) {

    circleSize += changeAmmount; // increase size by changeAmmount

    circleX = circleX + 10; // move to the right

    clicksCount++;

    console.log("clicked inside");

  } else if (distance > circleSize) {

    if (circleSize > changeAmmount) {

      circleSize -= changeAmmount; // decrease size by changeAmmount only if bigger than changeAmmount

    }

    circleX = circleX - 10; // move to the left

    missesCount++;

    console.log("clicked outside");

  }

}

​