Download presentation

Presentation is loading. Please wait.

Published byCarter Grant Modified over 2 years ago

1
8.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 8 – Grouping Elements Drawing Curves

2
8.2 Si23_03 Sequences of Transformations in SVG n In lecture 7, we saw that scaling and rotation are applied with respect to origin n To scale about a specified point: – Translate point to origin – Scale – Translate back n In SVG we can apply a list of transformations: transform=translate(10,10) scale(2,3) translate(-10,-10) Note: applied right to left

3
8.3 Si23_03 Grouping Elements in SVG n Elements can be formed into groups n Allows operations such as transformations to be applied to the whole group

4 8.4 Si23_03 SVG Symbols Elements can be formed into special groups called symbols in a setup section marked by the defs element..and later instanced as a graphics object through the use element

5
8.5 Si23_03 Drawing Curves n Many graphical objects involve curves, not straight lines n How do we draw them? Airfoil design

6
8.6 Si23_03 Parametric equation of straight line n Consider a straight line between P 0 (x 0,y 0 ) and P 1 (x 1,y 1 ) P0P0 P1P1 x(t) = (1-t) x 0 + t x 1 y(t) = (1-t) y 0 + t y 1 t runs from 0 to 1 P(t) = (1-t) P 0 + t P 1 known as parametric equation of straight line

7
8.7 Si23_03 Basis Functions n Another way of viewing this is to think that the functions `t and `1-t blend the points P 0 and P 1 together. n The functions `t and `1-t are known as basis functions P(t) = (1-t) P 0 + t P 1 P0P0 P1P1

8
8.8 Si23_03 Curve Design n Suppose we want to design a curve between P 0 and P 1 P0P0 P1P1 Pierre Bezier, a French engineer with Renault, developed a useful way of designing curves, based on an approximating polygon.

9
8.9 Si23_03 Pierre Bezier

10
8.10 Si23_03 Bernstein Polynomials n The functions `t and `1-t are special cases of more general polynomial functions called Bernstein polynomials n Degree 2 Bernstein polynomials are: – (1-t) 2 2t(1-t)t 2 n These act as basis functions to let us blend three points by: – P(t) = (1-t) 2 P 0 + 2t(1-t)P 1 + t 2 P 2 P0P0 P1P1 P0P0 P2P2 P 1 acts as a control point Quadratic Bezier curve

11
8.11 Si23_03 Bezier Curves and Bernstein Polynomials n The general form for the (n+1) Bernstein polynomials of degree n is: B(n,k) = C(n,k)t k (1-t) n-k where C(n,k) = n! / [ k! (n-k)!] and where k runs from 0 to n n The Bezier curve is: – P(t) = P k B(n,k)... summed from 0 to n, where P k are (n+1) control points

12
8.12 Si23_03 Cubic Bezier Curves n Probably the most popular is the cubic Bezier curve – Two end points and two control points P(t) = (1-t) 3 P 0 + 3t(1-t) 2 P 1 + 3t 2 (1-t)P 2 + t 3 P 3

13
8.13 Si23_03 Cubic Bezier Curves n A wide variety of shapes can be achieved

14
8.14 Si23_03 Properties of Bezier Curves n Curve passes through first and last control points n Slope of curve at first control point is along line towards second control point n Slope at last control point is along line towards last but one control point n Curve lies within the convex hull of the control points

15
8.15 Si23_03 Designing Using Bezier Curves n First pick a certain number of points through which the curve should pass

16
8.16 Si23_03 Designing Using Bezier Curves n Design curve pieces - probably using cubic Bezier curves

17
8.17 Si23_03 Designing Using Bezier Curves n Pieces will join smoothly if control points in adjacent pieces lie on straight line

18
8.18 Si23_03 Paths in SVG n Path element in SVG defines a shape that can be open… n or closed Note what M, L and Z mean

19
8.19 Si23_03 Curved Paths in SVG n Paths can be defined as quadratic or cubic Bezier curves

Similar presentations

© 2017 SlidePlayer.com Inc.

All rights reserved.

Ads by Google