​

// declared global variable: works anywhere in code

​

let tree = 180;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSL, 360, 100, 100, 100);

  noStroke();

  background(220);

}

​

//Use two forward slashes to create a comment. This technique also enables you to comment out or deactiviate blocks of code. The shortcut for do so is to highlight line or lines of code and pressed Cmd or Ctrl + /

​

function draw() {

  // Comment out background in draw loop to create a drawing app 

  background(220);

    //prints mouse values on screen; mouse values always start at (0, 0) until mouse moves over canvas

  //   fill(0);

  //   text("X: "+mouseX, mouseX, mouseY);

  // text("Y: "+mouseY, mouseX, mouseY+20);

  //Activity 1: using mouse to control location of visual elements

  //rectMode(CENTER);

  //  fill(180, 100, 50);

  //  rect(width/2, height/2, 100, 100)

  // //Draw a circle that follows the mouse

  // fill(0);

  // ellipse(mouseX, mouseY, 100, 100)

  // ellipse(mouseX, mouseY+200, 200, 200)

​

​

//Activity 2: user feedback

//mouseX and mouseY can also be used to highlight cursor activites

  // rectMode(CORNER);

  // if (mouseX > width*.5){

  //   fill(25, 100, 50); //HSL code for orange

  //   rect(width*.5, 0, width*.5, height);

  // } else {

  //    fill(205, 100, 50); //HSL code for blue

  //  rect(0, 0, width*.5, height);

  // }

  // Break into thirds

  // if (mouseX < width*.333){

  //   fill(300, 100, 50);

  //   rect(0, 0, width*.33, height)

  // } else if( mouseX < width*.667){

  //   fill(205, 100, 50);

  //   rect(width*.333, 0, width*.333, height);

  // } else {

  //   fill(25, 100, 50); //HSL code for orange

  //   rect(width*.667, 0, width*.4, height);

  // }

  //Break in quarters

  // if (mouseX < width/2 && mouseY < height/2){

  //   fill(0, 100, 50);

  //   rect(0, 0, width/2, height/2);

  // } else if (mouseX > width/2 && mouseY < height/2){

  //   fill(70, 100, 50);

  //   rect(width/2, 0, width/2, height/2);

  // } else if (mouseX < width/2 && mouseY > height/2){

  //   fill(180, 100, 50);

  //   rect(0, height/2, width/2, height/2);

  // } else {

  //   fill(270, 100, 50);

  //   rect(width/2, height/2, width/2, height/2);

  // }

​

  //modify the above code to break down canvas into thirds rather than halves (tip: else if). For an optional extra challenge, break into quarters with 2 rectangles on top and 2 rectangles on bottom (tip: logical operators)

//Activity 3: mouseIsPressed -- if loop in draw loop

  rectMode(CENTER);

//   if (mouseIsPressed == true){

//     fill(0, 100, 25); // square will be red

//   } else {

//   }

  //colour 

  fill(tree, 50, 50) //square is cyan  

  rect(width/2, height/2, 200, 200);

}

​

//how to press mouse once and keep change

function mousePressed(){

  //change between two colours

  // if (tree == 180){

  //   tree = 0;

  // } else {

  //   tree = 180;

  // } 

  //random color change

  tree = random(360);

}

​

​

​