let clearButtonY = 50;

let clearButtonDiameter = 40;

let buttonPressed = false;

let buttonColor;

let brushSize = 4;

​

let incrementX = 450;

let incrementY = 50;

​

​

​

​

​

​

function setup() {

  createCanvas(600, 600);

  background(220);

  buttonColor = color(252,3,3);

  rectMode(CENTER);

​

}

​

function draw() {

  //draw the clear button

  push();

  fill(buttonColor);

  circle(clearButtonX, clearButtonY, clearButtonDiameter);

  pop();

  //draw the increment button

  push();

  noFill(0);

  strokeWeight(3);

  square(incrementX, incrementY, 40, 5, 5);

  line (incrementX , incrementY - 7 , incrementX , incrementY + 7)

  line (incrementX -7 , incrementY  , incrementX + 7 , incrementY)

  pop();

  //draw

  if(mouseIsPressed && !buttonPressed && dist(clearButtonX, clearButtonY, mouseX, mouseY) > clearButtonDiameter/2)

    {

      push();

      noStroke();

      circle(mouseX, mouseY, brushSize);

      pop();

    }

​

}

​

function mousePressed()

{

  if(!buttonPressed && dist(clearButtonX, clearButtonY, mouseX, mouseY) <= clearButtonDiameter/2)

    {

      buttonColor = color(204,25,25);

      buttonPressed  = true;

    }

}

​

function mouseReleased()

{

  if(buttonPressed)

    {

      buttonPressed = false;

      buttonColor = color(252,3,3);

      //erase screen

      background(220);

    }

}