const orange = color(255, 165, 0);  

const yellow = color(255, 255, 0); 

const green = color(0, 255, 0);

const cyan = color(0, 255, 255);

const blue = color(0, 0, 255);

const indigo = color(75, 0, 130);

const violet = color(167, 31, 139);

const white = color(255, 255, 255);

const black = color(0, 0, 0);

​

let paused = false;

let rs;

​

function setup() {

  createCanvas(1150, 700); 

  background(20);

  instructions();

  canvas();

  //button toolbar

  let bred = new Button(30, 120, red);

  let borange = new Button(30, 170, orange);

  let byellow = new Button(30, 220, yellow);

  let bgreen = new Button(30, 270, green);

  let bcyan = new Button(30, 320, cyan);

  let bblue = new Button(30, 370, blue);

  let bindigo = new Button(30, 420, indigo);

  let bviolet = new Button(30, 470, violet);

  let bblack = new Button(30, 520, black);

  let bwhite = new Button(30, 570, white);

​

  rs = new RotatingSquares();

}

​

function draw() {

  //toolbar display

  displayButtons();

  //brush display

  rs.display();

}

​

function canvas() { 

  fill(0);

  rect(90, 70, 1000, 550);

}

​

function displayButtons() {

  fill(rs.colorFill);

  noStroke();

  rect(0, 0, 90, 1000);

  //toolbar display

  bred.display();

  byellow.display();

  borange.display();

  bgreen.display();

  bcyan.display();

  bblue.display();

  bindigo.display();

  bviolet.display();  

  bblack.display();

  bwhite.display();

}

​

function mousePressed() {

  bred.checkClick();

  byellow.checkClick();

  borange.checkClick();

  bgreen.checkClick();

  bcyan.checkClick();

  bblue.checkClick();

  bindigo.checkClick();

  bviolet.checkClick();

  bblack.checkClick();

  bwhite.checkClick();

}

​

function instructions() {

  //INSTRUCTIONS on sketch

  let i = "Spacebar to pause/unpause stroke | Press Mouse to fill the opacity from Faded to Solid";

  let c = "Press C while paused to Clear Brush | Press C while unpaused to Clear Canvas |  Press S to Save";

  fill(160);

  textSize(20); 

  text(c, 100, 650, 1000, 100);

  text(i, 100, 20, 1000, 100);

}

​

function keyPressed() {

​

  //SAVE IMAGE

  if (key === 's') {

    console.log("Saving...");

    let partialSave = get(90, 70, 1000, 550);

    partialSave.save("my_drawing.jpg"); //can't partial save and count images

    console.log("Done saving. Please rename your image to save another drawing.");

  }

​

  //RESET CANVAS

  if (key === 'c') {

    setup();

    //Clear canvas and color

    if (paused === true) {

      console.log("Brush cleaned.");

    } else {

      console.log("Image cleared.");

    }

  }

  //PAUSE STROKE

  if (key === ' ') {

    paused = !paused;

    if (paused) {      

      noLoop();

    } else {

      loop();

    }   

  }

​

}

​