​

var r, g, b;

​

var carX;

var carY;

​

//boolean variable 

var isDrawing;

​

function setup() {

  createCanvas(400, 400);

  brushSize = 50;

  isDrawing = false;

  carX = 50;

  carY = 50;

  r = 0;

  b = 0;

  g = 255;

}

​

function draw() {

  //background(220);

  if (isDrawing){

    //don't draw the background

  }

  else{

     background(220); 

  }

  //text

  fill(r, g, b);

  ellipse(mouseX, mouseY, brushSize, brushSize);

  fill('orange');

  rect(carX, carY, 60, 30);

  //writing our instructions

  fill('black')

  textSize(17);

  text('Draw a design using the circle and mouse', 35, 25);

  fill('black');

  textSize(17);

  text('along with the rectangle and arrows', 55, 43);

}

​

function mousePressed(){

   //any time we click on the mouse button, this function gets called

   //console.log("I clicked the mouse");

  //background(220);

  isDrawing = !isDrawing;

}

​

function keyPressed(){

   //the key is saved in a variable called "key"

  if (keyCode === UP_ARROW){

    carY -= 5;

  }

  else if (keyCode === DOWN_ARROW){

     carY += 5; 

  }

  else if (keyCode === RIGHT_ARROW){

    carX += 5;

  }

  else if (keyCode === LEFT_ARROW){

     carX -= 5; 

  }

  //this controls the brushSize

  if (key == 'g'){

     brushSize += 5; 

   }

   else if (key == 's'){

      //this is the minimum brushSize at 5

      if (brushSize > 10){

        brushSize -= 5; 

      }

   }

}