Tutorials / Lesson 4
Animate an ordinary object
Make something move on screen.
Open and predict
Your goal is to explain how Main explicitly updates and draws a Player object.
Back up your current app. Copy animation Main
and Player into src/main/java/ using
the switching steps.
Run, move the mouse inside the canvas, then click the canvas and hold Space. Predict the target in each case: the mouse normally, the centre while Space is held. Release Space and compare. Canvas keys require canvas focus.
Trace one frame
SketchApp calls Main's update(seconds) and then draw() each frame. Main
creates Player once in setup(). Player is an ordinary object; it moves because
Main calls player.update(...), and appears because Main calls player.draw(this).
Canvas x increases to the right; y increases downward. Player's x/y describe the
circle's centre. In circle(x, y, 44), 44 is the diameter. The canvas size is
fixed: making the window larger does not stretch its coordinates.
Read the following expression in Player:
x += (targetX - x) * amount;
If x is 100, targetX is 200 and amount is 0.1, the new x is 110. It moves part of
the remaining distance, rather than jumping immediately. seconds is the elapsed
time since the previous frame, not a frame number. The framework caps it at 0.1
after a long pause.
Compare two movement rules
- Back up Player. Replace the two smoothing statements with
x = targetX;andy = targetY;. Run and compare following versus jumping. - Restore the original statements. Change the factor in
seconds * 5to 2, then 8, rebuilding each time. Which catches up more quickly? This factor controls following responsiveness, rather than a fixed pixels-per-second speed. - Change the circle colour and diameter. Keep Main's explicit calls in place.
Optional experiment: temporarily remove background(...) from Main's draw().
Predict what happens to old circle drawings, then run. Restore it afterward;
Zero does not automatically clear each frame.
Check and explain
Record mouse-following, Space-to-centre, release-to-follow and Stop/Run results. After clicking a different window, click the canvas again before checking keys. Explain why calling update only in setup would not animate Player, and why changing Player does not require a special game-object base class. Include the arithmetic prediction above and one observed difference between your movement rules.