1. CMPE212 – Stuff… Marking finished for Quiz 3.
Winter 2018 CMPE212
9/18/2018
CMPE212 – Stuff…
Marking finished for Quiz 3.
Last assignment due this Friday.
Exam prep page is posted from course web site.
Winter 2018
CMPE212 - Prof. McLeod
Prof. Alan McLeod

2. Today Spinners and Sliders. Canvas Node. Animation in JavaFX.
Winter 2018
CMPE212 - Prof. McLeod

3. Spinners and Sliders (And Progress Bars!) See FXSliderSpinner
For Sliders, using SceneBuilder:
Set vertical or horizontal orientation.
Set min, max and initial value.
Choose major and minor tick units and which to label.
Can choose “Snap To Ticks”.
Winter 2018
CMPE212 - Prof. McLeod

4. Spinners and Sliders, Cont.
For Spinners, you must set min, max and initial values in fxml file yourself:
initialValue="0" max="20" min="-20“
Use change listeners with .valueProperty() to detect changes in slider or listener positions.
Note how spinner works with arrow keys or mouse click.
Winter 2018
CMPE212 - Prof. McLeod

5. Canvas Control
See:
Canvas is a Node, is not visible by itself, but is not a Pane type Node so it cannot contain other nodes.
Hint: Make sure the Canvas has a size and is where you think it is – otherwise you will not see anything!
Winter 2018
CMPE212 - Prof. McLeod

6. Canvas Control, Cont.
All drawing to the Canvas will take place through its GraphicsContext object:
Canvas canvas = new Canvas(300, 250); // width, height
GraphicsContext gc = canvas.getGraphicsContext2D();
(Also has an empty, default constructor.)
Draw by setting colours first using:
gc.setFill(Color.RED); // The fill colour
gc.setStroke(Color.BLUE); // The line colour
Winter 2018
CMPE212 - Prof. McLeod

7. Canvas Control, Cont. Set the line thickness using:
gc.setLineWidth(5); // 5 pixels
See the GraphicsContext API docs for all the drawing methods. A method starting with “stroke…” draws the outline of the shape. Starting with “fill…” draws a filled shape.
Winter 2018
CMPE212 - Prof. McLeod

8. Canvas Control, Cont. For example:
To draw a line from (x1, y1) to (x2, y2) in pixels as doubles:
gc.strokeLine(x1, y1, x2, y2);
Don’t forget that the (0, 0) pixel position of a Canvas is the top, left corner of the canvas.
Winter 2018
CMPE212 - Prof. McLeod

9. Canvas Control, Cont. A filled oval:
gc.fillOval(x, y, width, height);
(x, y) is the upper left corner of a rectangle enclosing the oval of size width by height.
(For a circle, width==height…)
Winter 2018
CMPE212 - Prof. McLeod

10. Canvas Control, Cont.
You can draw many other shapes and curves including Bezier curves.
Can also draw text.
Effects such as linear and radial colour gradients can be applied by supplying LinearGradient and RadialGradient objects to the setStroke and setFill objects instead of just a single colour.
The Canvas object itself can be translated, rotated and otherwise transformed in any way you can imagine.
Winter 2018
CMPE212 - Prof. McLeod

11. Canvas Control, Cont.
Display images using .drawImage() – takes an Image object.
Images can be in .bmp, .jpg, .gif or .png formats.
You can load an image from a local file or from a URL.
Use .getPixelWriter to obtain an object that will allow you to edit individual pixels.
Winter 2018
CMPE212 - Prof. McLeod

12. Canvas Control, Cont. Drawings are often built and edited in layers.
Each layer can be a separate Canvas object.
Layer them using StackPane or just Pane.
Draw to each layer using individual GraphicsContext objects.
Use a method like .toFront() on the Canvas layer to move it to the top.
Winter 2018
CMPE212 - Prof. McLeod

13. Canvas Control, Cont.
Mouse/cursor interaction by adding an event handler to the Canvas object and listening for a MouseEvent:
canvas.addEventHandler(MouseEvent.MOUSE_PRESSED,
new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent e) {
gc.fillOval(e.getX(),e.getY(),20,20); }
});
Winter 2018
CMPE212 - Prof. McLeod

14. Fireworks Case Study Use of a canvas, spinners, drawing and animation.
Linked to the course web site as the “Fireworks Case Study”.
Winter 2018
CMPE212 - Prof. McLeod

15. JavaFX Animation
Lots of videos and tutorials “out there”. A couple of links to use as a starting point:
and:
Winter 2018
CMPE212 - Prof. McLeod

16. JavaFX Transition Animation
Transitions can be used to animate single nodes or many nodes in parallel.
A property (color, rotation, position, etc.) is changing from a start value to an end value over a specified length of time.
Fairly easy to set up and useful for simpler node animations.
See a code “snippet” on the next slide that moves a red rectangle 300 pixels in the x direction over 3 seconds, and back and forth, forever…
Winter 2018
CMPE212 - Prof. McLeod

17. JavaFX Transition Animation, Cont.
Rectangle rect = new Rectangle(10, 10, 100, 100);
rect.setFill(Color.RED);
TranslateTransition translate = new TranslateTransition(Duration.millis(3000), rect);
translate.setFromX(10);
translate.setToX(310);
translate.setAutoReverse(true);
translate.setCycleCount(Timeline.INDEFINITE);
translate.play();
Winter 2018
CMPE212 - Prof. McLeod

18. JavaFX Transition Animation, Cont.
See FXSimpleAnimation.
Many other transitions are possible – fades, scaling, rotations, movement along a specific path, etc:
FadeTransition
ScaleTransition
RotateTransition
PathTransition
FillTransition
StrokeTransition
TranslateTransition
ParallelTransition (plays transitions at the same time)
SequentialTransition (plays transitions one after the other)
Winter 2018
CMPE212 - Prof. McLeod

19. JavaFX Timeline Animation
Used in the Fireworks Case Study.
Timeline animations are better suited for more complex animation.
A Timeline object is constructed with a series of KeyFrame objects that are individual frame specifications along the animation.
A KeyFrame is constructed using at a minimum a Duration object and at least two KeyValue objects. Optionally, an EventHandler object can be used to execute some code when the KeyFrame is finished.
Winter 2018
CMPE212 - Prof. McLeod

20. JavaFX Timeline Animation, Cont.
A KeyValue object consists of a single state for a mutable node property value.
You can also add an Interpolator object, which specifies how you interpolate between KeyValues.
The default Interpolator is Interpolator.LINEAR.
You can specify others or define your own, which is handy for specifying a specific path if your property is a position.
Winter 2018
CMPE212 - Prof. McLeod

21. JavaFX AnimationTimer
An AnimationTimer object can be created if you wish to trigger an event every time a frame is drawn to the screen.
Not directly associated with the Timeline.
This is an abstract class, so you need to implement the void handle(long now) method, where now is the timestamp in nanoseconds.
This method will be called at the beginning of every frame refresh.
(Not to be confused with the javax.swing.Timer class!)
Winter 2018
CMPE212 - Prof. McLeod

22. JavaFX Timeline Animation, Cont.
Start a Timeline by invoking .play() or even better .playFromStart(), which stops the current animation, if running, and re-starts it from the beginning.
Stop a Timeline by invoking .stop().
(Platform.exit() will stop all running threads including the Timeline thread.)
Start an AnimationTimer using .start() and stop it using .stop().
Winter 2018
CMPE212 - Prof. McLeod

23. JavaFX Timeline Animation Demo
Borrowed (shamelessly!) and slightly modified from Oracle:
See the TimelineDemo project.
Has a filled oval and a text label in a StackPane that increments the count in the label using an AnimationTimer. The oval continuously grows and shrinks and then translates every 2 seconds.
Winter 2018
CMPE212 - Prof. McLeod

24. JavaFX Timeline Animation Demo
The label counts up to about 235, so the AnimationTimer handle method is being invoked about 117 times per second or at the rate of 117 Hz.
Impressive, but is this necessary?
What is the highest animation fps that you can hope for?
Winter 2018
CMPE212 - Prof. McLeod

25. Aside – Maximum Frame Rate
Common monitor refresh rates are 60 Hz, for example.
There is no point in trying to update frames at any rate higher than this!
So, the lowest time between frames would be:
1000 / 60 or about 17 milliseconds.
A gamer would be very happy if his game updated at 60 fps. What is a more realistic expectation? How slow can an animation get before it gets “choppy”?
Winter 2018
CMPE212 - Prof. McLeod

26. Imitating javax.swing.Timer
This class creates its own thread and fires an event at specified intervals.
JavaFX does not “like” this separate timer thread since it already has its own animation thread running.
You can use a Timeline object to imitate a Timer object in JavaFX.
Build the object using only two KeyFrame objects:
Winter 2018
CMPE212 - Prof. McLeod

27. Imitating javax.swing.Timer, Cont.
Timeline timeline = new Timeline(
new KeyFrame(Duration.ZERO, actionEvent -> drawFireworks()),
new KeyFrame(Duration.millis(1000 / desiredFrameRate)));
timeline.setCycleCount(Timeline.INDEFINITE);
If desiredFrameRate is 60 then, this timeline object will invoke the drawFireworks() method every 17 milliseconds.
Winter 2018
CMPE212 - Prof. McLeod