Mouse Events: Mouse Moved
In the previous chapter, you learned how to respond to a mouse click. But what if you want to respond to a user moving a mouse? What if the user holds the mouse button down? What if they drag the mouse? How would we handle these things? Surely, there must be a way!
More Mouse Methods
The mouseClickMethod
is just one of many different methods available for handling mouse input. More are listed below:
Mouse Method
Responds To
mouseClickMethod(callbackFunction);
Mouse click
mouseMoveMethod(callbackFunction);
Mouse movement
mouseDownMethod(callbackFunction);
Mouse pressed down
mouseUpMethod(callbackFunction);
Mouse released
mouseDragMethod(callbackFunction);
Mouse dragged
Using Mouse Methods
If you recall, we respond to a mouse click by doing the following:
Other mouse methods take on the same basic structure. For example, we would respond to a mouse being moved by doing:
Painting with the Mouse
Let's create a simple painting program using the mouse move method. This program will paint circles along a path that the mouse is moved:
The mouseMoveMethod
in the start()
function automatically detects when the mouse is moved. Each time it detects mouse movement, the paint(e)
function gets called.
Within our paint(e)
function, we create a circle of radius 15. We then set the circle's position. Recall that e.getX()
and e.getY()
return the X and Y positions of the mouse's location. Thus, we are setting the circle's position to the mouse's current location. Finally, we add the circle to the screen.
Remember, the paint(e)
function is called every time the mouse moves to a new location. This results in a snake-like trail of circles along the mouse's path:
Improving Our Painting Program
While our painting program is nice, it could use a little bit more polish. Instead of drawing circles when the mouse is moved, let's draw circles when the mouse is dragged. Dragging differs from simple mouse movement in that the user must hold down the mouse button while moving. Additionally, this program will randomly generate a color for each circle drawn.
This results in a beautiful trail of color:
Counting the Circles
You may have noticed that our painting program draws a lot of circles in a short amount of time. For curiosity's sake, let's add a text label which counts the total number of circles drawn to the screen.
Each time a circle is drawn in our paint(e)
method, we increment numCircles
by 1 and display the change to the screen. The resulting program looks like:
Strobe Ball
In this next program, we create a ball of random color and place it initially in the upper left corner of the screen. When the user moves the mouse, the ball will follow it and change to a different random color. This creates a strobe effect on our ball as it is moved around.
The resulting program looks like:
Last updated
Was this helpful?