2/28 Ex. 2

let color1, color2, color3;

let btn1x = 50;

let btn2x = 150;

let btn3x = 250;

let btnY = 50;

let btnW = 80;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(255);

  color1 = color(255, 255, 0); //yellow

  color2 = color(255, 0, 255); //pink

  color3 = color(0, 255, 255); //blue

}

​

function draw() {

  strokeWeight(0);

  fill(color1);

  circle(btn1x, btnY, btnW);

  fill(color2);

  circle(btn2x, btnY, btnW);

  fill(color3);

  circle(btn3x, btnY, btnW);

}

​

function mousePressed() {

  let d1 = dist(mouseX, mouseY, btn1x, btnY);

  if (d1 < btnW / 2) {

    stroke(color1);

  }

  let d2 = dist(mouseX, mouseY, btn2x, btnY);

  if (d2 < btnW / 2) {

    stroke(color2);

  }

  let d3 = dist(mouseX, mouseY, btn3x, btnY);

  if (d3 < btnW / 2) {

    stroke(color3);

  }

}

​

function mouseDragged() {

  strokeWeight(3);

  line(mouseX, mouseY, pmouseX, pmouseY);

}

​

function keyPressed() {

  if (key == "1") {

    stroke(color1);

  } else if (key == "2") {

    stroke(color2);

  } else if (key == "3") {

    stroke(color3);

  }

  if (key == ' ') { //SPACE to clear

    background(255);

  }

}