Interactive drawing

So my code uses a black outlined green circle to create drawings. If i hit up, it gets larger, down arrow, smaller. We have also manipulated colors. Left areow makes it orange, “r“ makes it red.

var x, y, d;

function setup () {

createCanvas (600,600);

//this determines my circle

x = 300;

y = 50;

d = 50;

//this is the color of my circle

r = 0;

g = 255;

b = 0;

}

function draw () {

//this is my drawing program

//on this line, insert noStroke ();  if you would like no outline

fill (r, g, b);

ellipse (mouseX, mouseY, d, d);

}

function keyPressed(){

//if i press the up key, my brush increases in size

if (keyCode === UP_ARROW){

d += 10;

}

//if i press the down key, it goes the reverse direction (decreases)

else if (keyCode === DOWN_ARROW){

d -= 10;

//if my brush is greater than 50

if (d >= 50){

d -= 2;

}

}

//if i press the right key, make my brush orange

else if (keyCode === LEFT_ARROW) {

//this is the color value for orange

r =255;

g =165;

b =0;

}

//if i push the right key, make my brush green

else if (keyCode === RIGHT_ARROW){

r = 0;

g = 255;

b = 0;

}

//if i push r, change it to red

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

r = 255;

g = 0;

b = 0;

}

}

function mousePressed (){

background ('pink');

}