In the previous lesson on interaction, we looked at environment events and values like
Today, we'll look at interacting with shapes on the canvas. This will create a way for users to click on specific shapes in our sketch to interact with them.
In order to determine if a user has clicked on a shape in our sketch, we have to know if the mouse is inside the shape when the mouse is clicked. This can be referred to as a
We can use the dist() function to determine if the mouse is inside of a circle.
dist returns the overall distance between two points.
Since we know that the outside of a circle is always the same distance from it's center, we can determine if the mouse is inside the circle by calculating the distance between the mouse and the center of a circle and comparing it to the circle radius, or half the width.
Using a rect as a button requires a different method.
The rectangle can be uneven, but because it has straight lines, we can test to see if the mouse position is inside or outside each of it's boundaries.
Using a button
The previous two buttons change their own color, but this isn't really the point of a button. A button should change appearance when it is clicked, but it should also perform some task.
The following example will draw a new random circle for every button click.
What else could a button be used for?