Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "8.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 8 – Grouping Elements Drawing Curves."— Presentation transcript:

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 Note the meaning of C and the order of the co-ordinates


Download ppt "8.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 8 – Grouping Elements Drawing Curves."

Similar presentations


Ads by Google