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

2

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

• ur 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

Model Image Rendering

Shape Model

3

Internally, JavaFX uses a shape model to represent primitive shapes. A shape model consists of

§ an array of points: {P1, P2, … , Pn} that we connect to draw a shape § properties that determine how the shape is drawn

• isClosed flag (shape is polyline or polygon)
• isFilled flag (polygon is filled or not)
• stroke thickness, colours, etc.

The built-in Shape classes do this internally.

Why are Shape Models Useful?

4

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?

transform

Create multiple instances

Dynamically manipulate shapes (position, orientation, size)

Transforming Shape Models

5

§ 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 Model Image Rendering Transform Model'

(x0,y0) (x1,y1) (x2,y2) (x3,y3) (x4,y4) (x'0,y'0) (x'1,y'1) (x'2,y'2) (x'3,y'3) (x'4,y'4)

(x'i,y'i) = f(xi,yi)

Translation

6

§ translate: add a scalar to coordinates of each component

tx = 2 ty = 4

Uniform Scaling

7

§ uniform scale: multiply each component by same scalar

x' = x × s y' = y × s

Sx,y = 2

Non-Uniform Scaling

8

§ scale: multiply each component by different scalar

sx = 2 sy = 0.5

Rotation

9

§ rotate: component is some function of x, y, Θ

? f(x, y, θ)

θ = 30°

f(x, y, θ)

θ

Rotation

10

(1) x = r cos(Φ)

r

(2) y = r sin(Φ)

r

(3) x’ = r cos(Φ+θ) (4) y’ = r sin(Φ+θ)

θ Φ Φ

(x, y)

Rotation

11

§ Use these Identities

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

§ rotate: component is a function of x, y, Θ

θ = 30°

Rotation

12

θ

Combining Transformations

13

§ Rotate: § Translate: § Scale:

Combining Transformations: Step 1 - Scale

14

§ Rotate: § Translate: § Scale:

x' = 2x y'= 2y

Combining Transformations: Step 2 - Rotate

15

§ Rotate: § Translate: § Scale:

x'' = 2x cos(30) - 2y sin(30) y'' = 2x sin(30) + 2y cos(30)

Combining Transformations: Step 3 - Translate

16

§ Rotate: § Translate: § Scale:

Note: Order of

• perations is

important. What if you translate first?

x''' = 2x cos(30) - 2y sin(30) + 8 y''' = 2x sin(30) + 2y cos (30) + 4

Transform1: Functions

17

We can define points, and then write the functions to transform our points.

Transform2: Shape methods

18

We can also use the built-in functions that Shapes provide. When using these shape methods, the

• rder doesn’t
• matter. i.e.

reordering scale and translate gives the same result.

Transform3: Using the Graphics Context (GC)

19

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

• perations

accumulate.

Transform4: Transforming Groups

20

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.

Hit-Tests

Shape Models Custom Shapes Shape Classes

21

Implementing Direct Manipulation

22

§ 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

Type of Hit Test

23

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).

Selection Paradigms

24

§ 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

• 1. Custom Shapes: Rectangle, Circle

25

Rectangle

§ You have the coordinates of the rectangle (x1,

y1 through x2, y2), and Point p (x, y).

§ Treat the rectangle shape as a “bounding box” § Selected when (x1 <= x <= x2) && (y1 <= y

<= y2)

Circle

§ Given the centre of the circle Point P1 (x1, y1),

the radius of the circle r, and a second Point P2 (x2, y2)

§ Calculate the distance from P1 to P2 § Selected when this distance <= radius

(x, y) P1 (x1, y1) P2 (x2, y1) P3 (x1, y2) P4 (x2, y2) P1 (x1, y1) P2 (x1, y1)

r

• 1. Custom Shapes: Line

26

Line This is difficult, since a line can be diagonal and very thin (single pixel wide).

§ 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!)

P1 P2

ClosestPoint.java

27

// 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 if (s < 0) return P0; else if (s > 1) return P1; else { Point2d I = P0; Vector2d w = new Vector2d(); w.scale(s, v); // w = s * v I.add(w); // I = P1 + w return I; } }

P0 P1 M

ClosestPointDemo.java

28

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

P0 P1 M

• 2. Shape Subclasses

29

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.

Polygon1: contains() method

30

PolygonHit1.java

Use the built-in contains method to check a Point against a shape.

Polygon2: Event Handler

31

Why not just add the event handler directly to the shape?

Polygon3: Just for fun

32

Draw a polygon, then hit-test it.

Animation

Simple animation Java FX support

33

Animation

34

§ Animation is a simulation of movement created by displaying a series

• f 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.

Zoetrope, mechanical example of CFF

• https://youtu.be/-hE_fA9M5`180?t=5s

35

Animation Key Concepts

36

§ 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.

Animation in Java FX

37

§ 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

Transitions in Java FX

38

§ Java FX can perform basic animations of your Nodes

• Define an animation style, parameters and the Nodes to be affected.
• Runs at 60 FPS, on a separate thread.

java.lang.Object javafx.animation.Animation javafx.animation.Transition FadeTransition – fade in or out FillTransition – fill in a shape StrokeTransition – change the stroke color RotateTransition – rotate ScaleTransition – scale TranslateTransition – translate PathTransition – translate along a path SequentialTransition – run animations in sequence ParallelTransition – run animations in parallel

Transition Samples

39

TransitionAnimation.java ScaleAnimation.java SequentialAnimation.java

Keyframes and Timelines

40

§ A Timeline can be used to define a free-form animation of any values.

• Includes starting and stopping Keyframes, which define the

start/ending properties for the animation.

• Timeline interpolates values over the length of the animation

TimelineAnimation.java

What’s Next?

41

This covers most of the 2D graphics that we’ll do in this course. There are some complexities when we start combining transformations, which we’ll discuss in upcoming lecture.