GraphicsWorking 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 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

Model ImageRendering

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 multipleinstances

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 ImageRenderingTransform

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 × sy' = y × s

Sx,y = 2

Non-Uniform Scaling

8

§ scale: multiply each component by different scalar

sx = 2sy = 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 operations is important. What if you

translate first?

x''' = 2x cos(30) - 2y sin(30) + 8y''' = 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

order 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 operations

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-TestsShape 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 selectionRubberband rectangle selection

1. Custom Shapes: Rectangle, Circle

25

Rectangle

§ You have the coordinates of the rectangle (x1, y1through 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), theradius of the circle, and a second Point p2 (x2, y2)

§ Calculate the distance from p1 to p2

§ Selected when distance <= radius

(x, y)

(x1, y1) (x2, y1)

(x1, y2) (x2, y2)

(x1, y1)

(x2, y2)

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 longif (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 segmentif (s < 0)

return P0;else if (s > 1)

return P1;else {

Point2d I = P0;Vector2d w = new Vector2d();w.scale(s, v); // w = s * vI.add(w); // I = P1 + wreturn I;

}}

P0

P1

M

ClosestPointDemo.java

28

// get distance using Java2D methoddouble 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.

AnimationSimple animation

Java FX support

33

Animation

34

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

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 method 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.Objectjavafx.animation.Animation

javafx.animation.Transition

FadeTransition – fade in or outFillTransition – fill in a shapeStrokeTransition – change the stroke color

RotateTransition – rotateScaleTransition – scaleTranslateTransition – translatePathTransition – translate along a path

SequentialTransition – run animations in sequenceParallelTransition – 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.