Examples+
Rollover
Roll over the colored squares in the center of the image to change the color of the outside rectangle.
Highlighted Features
/**
* Rollover.
*
* Roll over the colored squares in the center of the image
* to change the color of the outside rectangle.
*/
int rectX, rectY; // Position of square button
int circleX, circleY; // Position of circle button
int rectSize = 90; // Diameter of rect
int circleSize = 93; // Diameter of circle
color rectColor;
color circleColor;
color baseColor;
boolean rectOver = false;
boolean circleOver = false;
void setup() {
size(640, 360);
rectColor = color(0);
circleColor = color(255);
baseColor = color(102);
circleX = width/2+circleSize/2+10;
circleY = height/2;
rectX = width/2-rectSize-10;
rectY = height/2-rectSize/2;
ellipseMode(CENTER);
}
void draw() {
update(mouseX, mouseY);
noStroke();
if (rectOver) {
background(rectColor);
} else if (circleOver) {
background(circleColor);
} else {
background(baseColor);
}
stroke(255);
fill(rectColor);
rect(rectX, rectY, rectSize, rectSize);
stroke(0);
fill(circleColor);
ellipse(circleX, circleY, circleSize, circleSize);
}
void update(int x, int y) {
if( overCircle(circleX, circleY, circleSize) ) {
circleOver = true;
rectOver = false;
} else if ( overRect(rectX, rectY, rectSize, rectSize) ) {
rectOver = true;
circleOver = false;
} else {
circleOver = rectOver = false;
}
}
boolean overRect(int x, int y, int width, int height) {
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
} else {
return false;
}
}
boolean overCircle(int x, int y, int diameter) {
float disX = x - mouseX;
float disY = y - mouseY;
if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
return true;
} else {
return false;
}
}
This example is for Processing 4+. If you have a previous version, use the examples included with your software. If you see any errors or have suggestions, please let us know.