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