Presentation is loading. Please wait.

Presentation is loading. Please wait.

SI23 Introduction to Computer Graphics

Similar presentations

Presentation on theme: "SI23 Introduction to Computer Graphics"— Presentation transcript:

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

2 Sequences of Transformations in SVG
In lecture 7, we saw that scaling and rotation are applied with respect to origin To scale about a specified point: Translate point to origin Scale Translate back 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 Grouping Elements in SVG
Elements can be formed into groups Allows operations such as transformations to be applied to the whole group <g transform=“translate(50,50)”> <circle cx=“100” cy=“50”/> <circle cx=“200” cy=“250”/> </g>

4 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 <defs> <g id=“twoCircles”> <circle cx=“10” cy=“10”/> <circle cx=“20” cy=“20”/> </g> </defs> <use id=“yellowTwoCircles” xlink:href=“#TwoCircles” style=“fill:yellow;”/> <use id=“redTwoCircles” xlink:href=“#TwoCircles” style=“fill:red;”/>

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

6 Parametric equation of straight line
Consider a straight line between P0 (x0,y0) and P1 (x1,y1) P0 P1 x(t) = (1-t) x0 + t x1 y(t) = (1-t) y0 + t y1 t runs from 0 to 1 P(t) = (1-t) P0 + t P1 known as parametric equation of straight line

7 Basis Functions P(t) = (1-t) P0 + t P1 P0 P1 Another way of viewing this is to think that the functions `t’ and `1-t’ blend the points P0 and P1 together. The functions `t’ and `1-t’ are known as basis functions

8 Curve Design Suppose we want to design a curve between P0 and P1 P1 P0
Pierre Bezier, a French engineer with Renault, developed a useful way of designing curves, based on an approximating polygon.

9 Pierre Bezier

10 Bernstein Polynomials
The functions `t’ and `1-t’ are special cases of more general polynomial functions called Bernstein polynomials Degree 2 Bernstein polynomials are: (1-t)2 2t(1-t) t2 These act as basis functions to let us blend three points by: P(t) = (1-t)2P0 + 2t(1-t)P1 + t2P2 P2 Quadratic Bezier curve P1 acts as a control point P0 P1 P0

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

12 Cubic Bezier Curves Probably the most popular is the cubic Bezier curve Two end points and two control points P(t) = (1-t)3P0 + 3t(1-t)2P1 + 3t2(1-t)P2 + t3P3

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

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

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

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

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

18 Paths in SVG Path element in SVG defines a shape that can be open…
or closed <path d=“M 0,0 L 50,60 L 100,100”/> <path d=“M 0,0 L 50,60 L100,100 Z”/> Note what M, L and Z mean

19 Curved Paths in SVG Paths can be defined as quadratic or cubic Bezier curves <path d="M 50,150 C 25, , ,200" /> Note the meaning of C and the order of the co-ordinates

Download ppt "SI23 Introduction to Computer Graphics"

Similar presentations

Ads by Google