Notices Assn 4 posted. Due last day of class. Note that Exercise 10 contains the JavaFX code for three simple GUI programs. Winter 2016CMPE212 - Prof. McLeod1

JavaFX That You Need for Assn 4 You don’t have to use the stylesheet and the fxml file, but it makes it easier and the code is much tidier: –Styling with the css file. –Using SceneBuilder to work with the fxml file and assist with the controller *.java file. Panes and layout managers. Obtaining and restricting user input. The Canvas object and how to draw to it using its GraphicContext object. Animation using Timeline, AnimationTimer, Duration and KeyFrame. Winter 2016CMPE212 - Prof. McLeod2

Today Drawing and Animation: –Canvas and GraphicsContext. –Animation using classes in the javafx.animation package: Timeline, AnimationTimer, KeyFrame, KeyValue. –Imitating the behaviour of the old swing Timer thread. –Suggestions for animating the fireworks. Winter 2016CMPE212 - Prof. McLeod3

Canvas Control See: canvas.htm 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 2016CMPE212 - Prof. McLeod4

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 2016CMPE212 - Prof. McLeod5

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 2016CMPE212 - Prof. McLeod6

Canvas Control, Cont. Of interest to Assignment 4: 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 2016CMPE212 - Prof. McLeod7

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 2016CMPE212 - Prof. McLeod8

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 2016CMPE212 - Prof. McLeod9

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 2016CMPE212 - Prof. McLeod10

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 2016CMPE212 - Prof. McLeod11

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 () public void handle(MouseEvent e) { gc.fillOval(e.getX(),e.getY(),20,20); } }); Winter 2016CMPE212 - Prof. McLeod12

JavaFX Animation Lots of videos and tutorials “out there”. A couple of links to use as a starting point: m#CIHDHJHC and: _JavaFX_Timeline_Animation.htm Winter 2016CMPE212 - Prof. McLeod13

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 2016CMPE212 - Prof. McLeod14

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

JavaFX Timeline Animation 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 2016CMPE212 - Prof. McLeod16

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 2016CMPE212 - Prof. McLeod17

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 gof every frame refresh. Not to be confused with the javax.swing.Timer class! Winter 2016CMPE212 - Prof. McLeod18

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 2016CMPE212 - Prof. McLeod19

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 2016CMPE212 - Prof. McLeod20

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 2016CMPE212 - Prof. McLeod21

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 2016CMPE212 - Prof. McLeod22

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 2016CMPE212 - Prof. McLeod23

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 2016CMPE212 - Prof. McLeod24

Assignment 4 Animation, Suggestions Inside drawFireworks(), invoke.getFireworks() on the instantiated ParticleManager object. Wipe the canvas! (You could just draw a large rectangle, for example.) Draw the launch tube as a line. Iterate through the collection. A spark can be drawn as an oval, say 2 pixels in diameter. Draw a streak as a line, and the Star as a larger oval. Winter 2016CMPE212 - Prof. McLeod25