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

graphics
SMART_READER_LITE
LIVE PREVIEW

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


slide-1
SLIDE 1

Graphics

Working with Shape models Transformations Hit tests Animation

1

slide-2
SLIDE 2

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

slide-3
SLIDE 3

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.

slide-4
SLIDE 4

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)

slide-5
SLIDE 5

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)

slide-6
SLIDE 6

Translation

6

§ translate: add a scalar to coordinates of each component

tx = 2 ty = 4

slide-7
SLIDE 7

Uniform Scaling

7

§ uniform scale: multiply each component by same scalar

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

Sx,y = 2

slide-8
SLIDE 8

Non-Uniform Scaling

8

§ scale: multiply each component by different scalar

sx = 2 sy = 0.5

slide-9
SLIDE 9

Rotation

9

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

? f(x, y, θ)

θ = 30°

f(x, y, θ)

θ

slide-10
SLIDE 10

Rotation

10

(1) x = r cos(Φ)

r

(2) y = r sin(Φ)

r

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

θ Φ Φ

(x, y)

slide-11
SLIDE 11

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 (θ)

slide-12
SLIDE 12

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

θ = 30°

Rotation

12

θ

slide-13
SLIDE 13

Combining Transformations

13

§ Rotate: § Translate: § Scale:

slide-14
SLIDE 14

Combining Transformations: Step 1 - Scale

14

§ Rotate: § Translate: § Scale:

x' = 2x y'= 2y

slide-15
SLIDE 15

Combining Transformations: Step 2 - Rotate

15

§ Rotate: § Translate: § Scale:

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

slide-16
SLIDE 16

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

slide-17
SLIDE 17

Transform1: Functions

17

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

slide-18
SLIDE 18

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.

slide-19
SLIDE 19

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.

slide-20
SLIDE 20

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.
slide-21
SLIDE 21

Hit-Tests

Shape Models Custom Shapes Shape Classes

21

slide-22
SLIDE 22

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
slide-23
SLIDE 23

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

slide-24
SLIDE 24

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

slide-25
SLIDE 25
  • 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

slide-26
SLIDE 26
  • 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

slide-27
SLIDE 27

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

slide-28
SLIDE 28

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

slide-29
SLIDE 29
  • 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.

slide-30
SLIDE 30

Polygon1: contains() method

30

PolygonHit1.java

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

slide-31
SLIDE 31

Polygon2: Event Handler

31

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

slide-32
SLIDE 32

Polygon3: Just for fun

32

Draw a polygon, then hit-test it.

slide-33
SLIDE 33

Animation

Simple animation Java FX support

33

slide-34
SLIDE 34

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.

slide-35
SLIDE 35

Zoetrope, mechanical example of CFF

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

35

slide-36
SLIDE 36

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.

slide-37
SLIDE 37

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

slide-38
SLIDE 38

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

slide-39
SLIDE 39

Transition Samples

39

TransitionAnimation.java ScaleAnimation.java SequentialAnimation.java

slide-40
SLIDE 40

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

slide-41
SLIDE 41

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.