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

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

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>

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

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

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

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

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.

Pierre Bezier

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

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

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

Cubic Bezier Curves A wide variety of shapes can be achieved

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

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

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

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

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

Curved 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