Graphics Working with Shape models Transformations Hit tests - PowerPoint PPT Presentation

Graphics Working with Shape models Transformations Hit tests Animation 1

Graphic Models and Images We know how to draw primitives, but we need a model that supports more complex shapes. Computer Graphics is the creation, storage, and manipulation of images and their models. We can use principles from graphics when defining our UI elements. § Model: a mathematical representation of an image containing the important properties of an object (location, size, orientation, color, texture, etc.) in data structures § Rendering: Using the properties of the model to create an image to display on the screen § Image: the rendered model Rendering Model Image 2

Shape Model Internally, JavaFX uses a shape model to represent primitive shapes. A shape model consists of § an array of points: {P 1 , P 2 , … , P n } that we connect to draw a shape § properties that determine how the shape is drawn The built-in - isClosed flag (shape is polyline or polygon) Shape classes - isFilled flag (polygon is filled or not) do this - stroke thickness, colours, etc. internally. 3

Why are Shape Models Useful? We can manipulate them dynamically § Translate by adding offset to shape points § Rotation (or scaling ) to manipulate them? Potential for multiple instances of same shape? Create multiple instances transform Dynamically manipulate shapes (position, orientation, size) 4

Transforming Shape Models § Shape model is in a base coordinate frame § The model is transformed to a location before rendering - Translation , Rotation and Scaling are the main operations that we support Rendering Transform Model Model' Image (x' 0 ,y' 0 ) (x 0 ,y 0 ) (x' 1 ,y' 1 ) (x 4 ,y 4 ) (x 1 ,y 1 ) (x' 4 ,y' 4 ) (x' 2 ,y' 2 ) (x 2 ,y 2 ) (x 3 ,y 3 ) (x' 3 ,y' 3 ) (x' i ,y' i ) = f (x i ,y i ) 5

Translation § translate: add a scalar to coordinates of each component t x = 2 t y = 4 6

Uniform Scaling § uniform scale: multiply each component by same scalar S x,y = 2 x' = x × s y' = y × s 7

Non-Uniform Scaling § scale: multiply each component by different scalar s x = 2 s y = 0.5 8

Rotation § rotate: component is some function of x, y, Θ θ = 30° θ ? f(x, y, θ) f(x, y, θ) 9

Rotation r r (x, y) θ Φ Φ (3) x’ = r cos(Φ+θ) (1) x = r cos(Φ) (2) y = r sin(Φ) (4) y’ = r sin(Φ+θ) 10

Rotation § Use these Identities cos(Φ+θ)= cos(Φ)cos(θ) – sin(Φ)sin(θ) sin(Φ+θ)= cos(Φ)sin(θ) + sin(Φ)cos(θ) (3) x’ = r cos(Φ+θ) (3) x’ = r cos(Φ+θ) (1) x = r cos(Φ) = r cos(Φ)cos(θ) – r sin(Φ)sin(θ) (2) y = r sin(Φ) = x cos(θ) – y sin(θ) (4) y’ = r sin(Φ+θ) (4) y’ = r sin(Φ+θ) = r cos(Φ)sin(θ) + r sin(Φ)cos(θ) = x sin(θ) + y cos (θ) 11

Rotation § rotate: component is a function of x, y, Θ θ = 30° θ 12

Combining Transformations § Rotate: § Translate: § Scale: 13

Combining Transformations: Step 1 - Scale § Rotate: § Translate: § Scale: x' = 2x y'= 2y 14

Combining Transformations: Step 2 - Rotate § Rotate: § Translate: § Scale: x'' = 2x cos (30) - 2y sin (30) y'' = 2x sin (30) + 2y cos (30) 15

Combining Transformations: Step 3 - Translate § Rotate: § Translate: Note: Order of operations is important. What if you § Scale: translate first? x''' = 2x cos (30) - 2y sin (30) + 8 y''' = 2x sin (30) + 2y cos (30) + 4 16

Transform1: Functions We can define points, and then write the functions to transform our points. 17

Transform2: Shape methods We can also use the built-in functions that Shapes provide. When using these shape methods, the order doesn’t matter . i.e. reordering scale and translate gives the same result. 18

Transform3: Using the Graphics Context (GC) We can use the Graphics Context to draw and translate as well. This has the effect of setting up common transformations that all shapes will use. When using the GC, the order does matter, because operations accumulate . 19

Transform4: Transforming Groups Transformations can also be applied to a group. They will be applied to the group’s children • Transforms will also cascade down the tree to all groups/children. • 20

Hit-Tests Shape Models Custom Shapes Shape Classes 21

Implementing Direct Manipulation § In a graphical interface, users expect to be able to select content using a mouse, and interact with it directly. - Includes graphical content, widgets etc. § Objective: test when a rendered shape is “selected” - Could be a filled or outlined polygon or a polyline - Selections that “just miss” the shape should “snap” to shape § How do you implement this? - Create a model of the shape and draw it - Choose a “selection” paradigm (i.e. how do you want it to work?) - Implement shape hit tests - Respond to events when it’s selected 22

Type of Hit Test Shape tests have to be tailored to the type/properties of a specific shape. Suggestion: implement a boolean hit(Point p) method in your shape model class, and let the shape model evaluate the mouse coordinates. 1. Custom shape classes § Implement your own hit test within the class (e.g. Circle or Rectangle class). § Exact test will vary with the type of shape model. 2. Java FX Shape classes § Will usually have built-in methods for doing hit tests (e.g. Polygon class). 23

Selection Paradigms § Inside vs. Outside Tests - open shapes like lines and polyline use edge hit-test - closed shapes like rectangles, and polygons use inside hit-test § We will focus on inside hit-tests, since we tend to model closed shapes in our user interfaces (lines are the exception) § Alternate approaches we will not cover: - Rubberband rectangle (i.e. bounding box) - Lasso (i.e. freeform selection) Lasso selection Rubberband rectangle selection 24

1. Custom Shapes: Rectangle, Circle Rectangle P1 (x1, y1) P2 (x2, y1) § You have the coordinates of the rectangle (x1, y1 through x2, y2), and Point p (x, y). (x, y) § Treat the rectangle shape as a “bounding box” P3 (x1, y2) P4 (x2, y2) § Selected when ( x1 <= x <= x2) && (y1 <= y <= y2) Circle § Given the centre of the circle Point P1 (x1, y1), P2 (x1, y1) the radius of the circle r, and a second Point P2 r (x2, y2) P1 (x1, § Calculate the distance from P1 to P2 y1) § Selected when this distance <= radius 25

1. Custom Shapes: Line Line P1 This is difficult, since a line can be diagonal and very thin (single pixel wide). P2 § a line model has no “thickness” Solution? § Given a Point P1, find the closest corresponding Point P2 on the line. § Calculate the distance from P1 to P2. § Selected when distance <= threshold (e.g. < 5 pixels) Point to line distance can be computed using vector projection (next slide!) 26

ClosestPoint.java // find closest point using projection method static Point2d closestPoint(Point2d M, Point2d P0, Point2d P1) { Vector2d v = new Vector2d(); v.sub(P1,P0); // v = P2 - P1 // early out if line is less than 1 pixel long if (v.lengthSquared() < 0.5) return P0; Vector2d u = new Vector2d(); u.sub(M,P0); // u = M - P1 // scalar of vector projection ... double s = u.dot(v) / v.dot(v); // find point for constrained line segment M if (s < 0) P0 return P0; else if (s > 1) return P1; else { Point2d I = P0; Vector2d w = new Vector2d(); w.scale(s, v); // w = s * v P1 I.add(w); // I = P1 + w return I; } } 27

ClosestPointDemo.java // get distance using Java2D method double d2 = Line2D.ptSegDist(P0.x, P0.y, P1.x, P1.y, M.x, M.y); M P0 P1 28

2. Shape Subclasses All of them have a built-in contains method… § E.g. - Circle.contains (Point) - Rectangle.contains (Point) - Ellipse.contains (Point) - Polygon.contains (Point) NOTE: Yet another reason to use the built-in classes. 29

Polygon1: contains() method PolygonHit1.java Use the built-in contains method to check a Point against a shape. 30

Polygon2: Event Handler Why not just add the event handler directly to the shape? 31

Polygon3: Just for fun Draw a polygon, then hit-test it. 32

Animation Simple animation Java FX support 33

Animation § Animation is a simulation of movement created by displaying a series of pictures, or frames , at a controlled rate. - Standard rate for film: 24 fps (frames-per-second) - Standard rate for TV: 60 fps* - Computer games: 60 fps* § Frames can all be supplied, or in many cases, frames are derived by interpolating between the frames before and after that particular frame. 34

Zoetrope, mechanical example of CFF - https://youtu.be/-hE_fA9M5`180?t=5s 35

Animation Key Concepts § Frame : one image in a sequence of images to play back. § Frame rate : number of frames to display per second. § Key frame : the frame that defines the beginning or ending of an animation. These are used to control the timing of the animation. What’s the simplest way to handle animation? § Carefully control your on-screen movement so that it aligns with your desired frame-rate - e.g. 30 FPS means that you need to control your app’s drawing so that it happens at exactly every 1000/30 = 33 ms. 36

Animation in Java FX § We can manually control animation and drawing with timers - Use AnimationTimer to call your animation at a regular interval. - The timer runs on a separate thread, managed by the system. - Interval between Frames = 1000 ms / (desired framerate) AnimationDemo.java 37