createCanvas(600, 600);

  background(225);

  frameRate(500);

}

​

let x = 70;

let y = 70;

let value = 0;

let a = 65

let d = 68

let s = 83

let w = 87

​

function draw() {

  fill(value);

  stroke(value);

//controls for the circle

  if (keyIsDown(a) === true) {

    x -= 1;

  }

​

  if (keyIsDown(d) === true) {

    x += 1;

  }

​

  if (keyIsDown(w) === true) {

    y -= 1;

  }

​

  if (keyIsDown(s) === true) {

    y += 1;

  }

  circle(x, y, 40);

}

//colors for the circle

function keyPressed() {

  if (key === "q") {

    background(225);

  } else if (key === "b") {

    value = "blue"

  }

  else if (key === "y"){

    value = 'yellow'

  } 

  else if (key === "r") {

    value = 'red'

  }

  else if (key === "e"){

    value = 'black'

  }

  else if (key === "f"){

    value = 'white'

  }

}

//save image

function mousePressed(){

  if (mouseButton === RIGHT){    

    save('sketch.js.png')}

}