nick34992
4/19/2016 - 4:03 PM

Mouseover Fill Color. Using p5.js library.

Mouseover Fill Color. Using p5.js library.

// based on original version featured in one of Shiffman's video tutorials
// hover false means no fill
var hover = false;

function setup() {
  createCanvas(640, 360);
}

function draw() {
  if (hover) {
    background(255, 0, 0); // red
  } else {
    background(0); // black
  }
  stroke(255);
  noFill(); // otherwise fill is white
  // four arguments delineate fill zone
  if (mouseX > 270 && mouseX < 370 && mouseY > 130 && mouseY < 230) {
    fill(255, 0, 0); // red fill
  }
  rectMode(CENTER);
  // hover cursor over rect
  rect(320, 180, 100, 100);
}