Graphics - University of Waterloocs349/w20/slides/09.graphics.… · Shape Model 3 Internally,...
Transcript of Graphics - University of Waterloocs349/w20/slides/09.graphics.… · Shape Model 3 Internally,...
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.