//

// By Jon Froehlich

// http://makeabilitylab.io

// 

// See:

//  - https://learning.oreilly.com/library/view/make-getting-started/9781457186769/ch05.html#response

​

​

let diameter = 30;

let x;

let y;

let pixelIncrement = 5;

​

function setup() {

  createCanvas(600, 400);

  noStroke();

  x = width / 2;

  y = height / 2;

  fill(0);

}

​

function draw() {

  background(204);

  // check if the mouse is over the circle

  if(dist(x, y, mouseX, mouseY) <= diameter/2){

    fill(255, 0, 0);

    stroke(0);

  }else{

    fill(0); 

  }

  ellipse(x, y, diameter);

}

​

function keyPressed() {

  // don't put any drawing code in here!

  if (keyCode === LEFT_ARROW) {

    x = x - pixelIncrement;

  } else if (keyCode === RIGHT_ARROW) {

    x = x + pixelIncrement;

  } else if(keyCode == DOWN_ARROW){

    y = y + pixelIncrement; 

  }else if(keyCode == UP_ARROW){

    y = y - pixelIncrement; 

  }

}

​

​