Mouse inside a Circle
To write programs that have graphical user interfaces (buttons, check boxes, scroll bars, etc.) we need to write code that figures out when the cursor is within an enclosed area of the screen. First we'll work with an ellipse.
Here we use the dist() function (distance) to get the distance from the center of a circle to the cursor, then we test to see if that distance is greater than the radius of the circle. If it is, we know the mouse is outside the circle.
///global variables
// javascript object for circle
var circle = {
// declare variables here
x: 150,
y: 75,
radius: 12,
};
function setup() {
createCanvas(300, 150);
ellipseMode(RADIUS); // use radius instead of width and height in ellipse();
}
function draw() {
// gray
background(205);
var distance = dist(mouseX, mouseY, circle.x, circle.y);
//if mouse is inside ellipse -- this is called a CONDITIONAL
if (distance < circle.radius) {
// make radius larger
circle.radius = circle.radius + 1;
fill(0); //black
}
else { // mouse is outside ellipse
fill(255); //white
}
// draw ellipse
ellipse(circle.x, circle.y, circle.radius, circle.radius);
} // end draw
// mousePressed() is an EVENT that happens only when the mouse is pressed.
function mousePressed() {
circle.radius = 12; //reset size of circle
fill(255); //white
}
///global variables
// javascript object for circle
var circle = {
// declare variables here
x: 150,
y: 75,
radius: 12,
};
function setup() {
createCanvas(300, 150);
ellipseMode(RADIUS); // use radius instead of width and height in ellipse();
}
function draw() {
// gray
background(205);
var distance = dist(mouseX, mouseY, circle.x, circle.y);
//if mouse is inside ellipse -- this is called a CONDITIONAL
if (distance < circle.radius) {
// make radius larger
circle.radius = circle.radius + 1;
fill(0); //black
}
else { // mouse is outside ellipse
fill(255); //white
}
// draw ellipse
ellipse(circle.x, circle.y, circle.radius, circle.radius);
} // end draw
// mousePressed() is an EVENT that happens only when the mouse is pressed.
function mousePressed() {
circle.radius = 12; //reset size of circle
fill(255); //white
}