8.1Si23_03

SI23Introduction to Computer

Graphics

SI23Introduction to Computer

Graphics

Lecture 8 – Grouping ElementsDrawing Curves

8.2Si23_03

Sequences of Transformations in SVG

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

8.3Si23_03

Grouping Elements in SVGGrouping 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>

8.4Si23_03

SVG SymbolsSVG 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;”/>

8.5Si23_03

Drawing CurvesDrawing Curves

Many graphical objects involve curves, not straight lines

How do we draw them?

Airfoil design

8.6Si23_03

Parametric equation of straight line

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

8.7Si23_03

Basis FunctionsBasis Functions

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

P(t) = (1-t) P0 + t P1

P0

P1

8.8Si23_03

Curve DesignCurve Design

Suppose we want to design a curve between P0 and P1

P0

P1

Pierre Bezier, a French engineer with Renault,developed a useful way of designing curves, basedon an approximating polygon.

8.9Si23_03

Pierre BezierPierre Bezier

8.10Si23_03

Bernstein PolynomialsBernstein 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

P0

P1

P2

P1 acts asa controlpoint

QuadraticBezier curve

8.11Si23_03

Bezier Curves and Bernstein Polynomials

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) = Pk B(n,k) ... summed from 0 to

n, where Pk are (n+1) control points

8.12Si23_03

Cubic Bezier CurvesCubic 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

8.13Si23_03

Cubic Bezier CurvesCubic Bezier Curves

A wide variety of shapes can be achieved

8.14Si23_03

Properties of Bezier Curves

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

8.15Si23_03

Designing Using Bezier Curves

Designing Using Bezier Curves

First pick a certain number of points through which the curve should pass

8.16Si23_03

Designing Using Bezier Curves

Designing Using Bezier Curves

Design curve pieces - probably using cubic Bezier curves

8.17Si23_03

Designing Using Bezier Curves

Designing Using Bezier Curves

Pieces will join smoothly if control points in adjacent pieces lie on straight line

8.18Si23_03

Paths in SVGPaths 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

8.19Si23_03

Curved Paths in SVGCurved Paths in SVG

Paths can be defined as quadratic or cubic Bezier curves

<path d="M 50,150 C 25,100 275,100 250,200" />

Note the meaning of C and the order of the co-ordinates