Lecture #02
2D Graphics
Computer Graphics
Winter term 2019/20
Marc Stamminger
Rendering
• “Rendering”:
• fill frame buffer with shapes, text, 3D-content, …
• Examples:
• render a rectangle → simple
• render a circle with radius 𝑟𝑟 and center (𝑥𝑥, 𝑦𝑦) → ???
• render a line from 𝑥𝑥1 , 𝑦𝑦1 to (𝑥𝑥2 , 𝑦𝑦2 ) → ???
• fill a triangle with vertices 𝑥𝑥1 , 𝑦𝑦1 , 𝑥𝑥2 , 𝑦𝑦2 , 𝑥𝑥3 , 𝑦𝑦3 → ???
• → next week “Rasterization”
Computer Graphics 2019/20 - 2D Graphics 2
Rendering
• Frame buffer is usually not written directly, but via a Graphics API
• Today we will have a brief look into such APIs, but this is not the
general topic of this lecture
• Mostly, we learn about the algorithms for rendering
• In the exercises, we will also look at the graphics APIs
Computer Graphics 2019/20 - 2D Graphics 3
Rendering
• Command-based APIs:
• a library containing functions that render primitives, such as lines,
rectangles, circles or similar
• oftentimes, this includes the interaction with the GPU (a special device on
the computer that is solely responsible for rendering)
• Scenegraph-based APIs:
• the scene to be rendered is defined in an abstract manner in a hierarchical
(tree-like) structure, which is passed to the renderer as a whole
• In HTML, this can be integrated into the normal document hierarchy
(see later)
• 3D:
• the primitives to be rendered are defined in 3D-space. A virtual camera is to
be specified that defines the mapping of the 3D-world to the 2D image. Also
occlusion must be considered.
Computer Graphics 2019/20 - 2D Graphics 4
Rendering APIs
looked at in the
exercises
2D 3D
command based • JAVA graphics 2D • OpenGL
• HTML canvas • DirectX
• Postscript • …
• …
scenegraph based • SVG • X3D
• … • Unreal
• Unity
today: 2D 3D comes soon
Computer Graphics 2019/20 - 2D Graphics 5
Today: 2D Graphics APIs
• We look into graphics APIs provided by HTML
• HTML-elements that can be filled with 2D graphics:
• Canvas Element
• Command-based API
• SVG Element
• Scenegraph-based API
Computer Graphics 2019/20 - 2D Graphics 6
HTML5 Canvas
• Command-based Graphics API
• Context object: accepts graphics commands that draw into this
canvas, e.g.
<canvas id=“canvas” width=200 height=200 />
<script>
var context = canvas.getContext(“2d”);
context.clearRect(0,0,512,512);
context.fillStyle = “#00ff00”;
context.fillRect(100,100,300,300);
</script>
• for more information see:
https://developer.mozilla.org/de/docs/Web/Guide/HTML/Canvas_Tutorial
Computer Graphics 2019/20 - 2D Graphics 7
HTML5 Canvas
• Examples
Computer Graphics 2019/20 - 2D Graphics 8
HTML5 SVG (Scalable Vector Graphics)
• Scene Graph based Graphics APIs
• can contain graphical objects as children, e.g.:
<svg width=200 height=200>
<circle cx=100 cy=100 r=50 />
<rect x=0 y=0 width=100 height=100 />
</svg>
• for more information see:
https://developer.mozilla.org/de/docs/Web/SVG
Computer Graphics 2019/20 - 2D Graphics 9
HTML5 SVG (Scalable Vector Graphics)
• Examples:
Computer Graphics 2019/20 - 2D Graphics 10
2D Graphics - Basics
• Primitives: Objects, from which an image is generated
• Attributes describe, how primitives are to be rendered (color, line
width, …)
• Transformations are used to describe how objects are positioned
within an image
• We start with the canvas element and its command-based API…
• … and then look into scene graphs
Computer Graphics 2019/20 - 2D Graphics 11
Primitives
• Graphics are composed of primitives such as
• lines
• rectangles
• circles / ellipses
• triangles
• polygons
• curves
• paths
• Each primitive has attributes such as
• fill color
• boundary color
• line / boundary width
• stipple pattern
• …
Computer Graphics 2019/20 - 2D Graphics 12
Primitives - Paths
• A path is a set of (joined) lines
var context = canvas1.getContext("2d");
context.clearRect(0,0,512,512);
context.beginPath();
context.moveTo(100,100);
context.lineTo(400,200);
context.lineTo(200,300);
context.lineTo(400,400);
context.stroke();
• Rendering line paths → next lecture
Computer Graphics 2019/20 - 2D Graphics 13
Primitives - Paths
• Paths can also contain circular (or elliptical) arcs
var ctx = canvas2.getContext("2d");
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
Computer Graphics 2019/20 - 2D Graphics 14
Primitives - Paths
• Paths can also contain Bezier curves
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
• Bezier curves, conversion to line paths
→ lecture “Geometric Modeling”
Computer Graphics 2019/20 - 2D Graphics 15
Attributes
• Mathematically, a line has zero width
→ invisible
• To render a line, we have to define a line width
→ usually “one pixel”
• Additional line attributes:
• color
• line caps (shape of line ends)
• line dash (stipple patterns)
• → for more information see https://developer.mozilla.org/en-
US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
Computer Graphics 2019/20 - 2D Graphics 16
Primitives – Filled Paths
• A path can also be filled (algorithm see next but one lecture)
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.strokeStyle = "#000000";
ctx.lineWidth = 2;
ctx.stroke();
ctx.fillStyle = “#808080";
ctx.fill();
Computer Graphics 2019/20 - 2D Graphics 17
2D Transformations
• rotate around a given point
ctx.fillStyle = “#80ff80”;
ctx.fillRect(100,100,300,300);
// rotate around image center (256,256)
ctx.translate(256,256);
ctx.rotate(Math.PI/4);
ctx.translate(-256,-256);
ctx.fillStyle = “#ff8080”;
ctx.fillRect(100,100,300,300);
Computer Graphics 2019/20 - 2D Graphics 18
Affine Transformations
• Translate, rotate, and scale are affine transformations
• Important in CG
• Positioning objects in a scene
• Object Animations
• Changing the shape of objects
• Creation of multiple copies of objects
• Can be described easily using Homogeneous Coordinates and
Matrices
Computer Graphics 2019/20 - 2D Graphics 19
Affine Transformations
• Coordinate Frames
• Origin 𝑂𝑂 (point)
• Coordinate axes 𝑒𝑒1 , 𝑒𝑒2 (vectors)
𝑒𝑒2
• Standard coordinate frame
𝑂𝑂 𝑒𝑒1
• 𝑂𝑂 = 0,0
• 𝑒𝑒1 = 1,0 , 𝑒𝑒2 = (0,1)
Computer Graphics 2019/20 - 2D Graphics 20
Affine Transformations
• Coordinate system change:
𝑓𝑓(𝑥𝑥, 𝑦𝑦) = 𝑂𝑂 + 𝑥𝑥𝑒𝑒1 + 𝑦𝑦𝑒𝑒2
𝑒𝑒2
𝑒𝑒1
𝑂𝑂
Computer Graphics 2019/20 - 2D Graphics 21
Affine Transformations
• We call such mappings Affine Mappings:
𝑥𝑥 𝑂𝑂1
𝑒𝑒
𝑥𝑥, 𝑦𝑦 → 1 𝑒𝑒2
𝑦𝑦 + 𝑂𝑂2
• more generally:
𝑥𝑥 → 𝐴𝐴𝐴𝐴 + 𝑡𝑡 (𝐴𝐴 ∈ ℝ2×2 , 𝑡𝑡 ∈ ℝ2 )
• concatenation results in another affine mapping:
𝑥𝑥 ′ = 𝐴𝐴1 𝑥𝑥 + 𝑡𝑡1
𝑥𝑥 ′′ = 𝐴𝐴2 𝑥𝑥 ′ + 𝑡𝑡2 = 𝐴𝐴2 𝐴𝐴1 𝑥𝑥 + 𝑡𝑡1 + 𝑡𝑡2 = 𝐴𝐴2 𝐴𝐴1 𝑥𝑥 + 𝐴𝐴2 𝑡𝑡1 + 𝑡𝑡2
𝐴𝐴𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐 𝑡𝑡𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐
• we can apply a simple trick that allows us to also express affine
transformations by a single matrix
→ homogeneous coordinates
Computer Graphics 2019/20 - 2D Graphics 22
Homogenous coordinates
• Add “1” as third homogeneous coordinate
x = (𝑥𝑥1 , x2 ) → (𝑥𝑥1 , x2 , 1)
• To compute the mapping 𝐴𝐴𝐴𝐴 + 𝑡𝑡 we apply a matrix of the form
𝐴𝐴11 𝐴𝐴12 𝑡𝑡1
𝐴𝐴21 𝐴𝐴22 𝑡𝑡2
0 0 1
𝑥𝑥1 𝐴𝐴11 𝐴𝐴12 𝑡𝑡1 𝑥𝑥1
• 𝑥𝑥2 → 𝐴𝐴21 𝐴𝐴22 𝑡𝑡2 𝑥𝑥2 = 𝐴𝐴𝑥𝑥 + 𝑡𝑡
1 1 1
0 0 1
Computer Graphics 2019/20 - 2D Graphics 23
Homogenous coordinates
• If the last row of 𝐴𝐴 is 0,0,1 the mapping is affine
→ later we see how we can also use this row to express more
general transformation
• Structure of a general affine transformation in homogeneous
coordinates basis vectors after transf.
translation
linear 𝑒𝑒1,𝑥𝑥 𝑒𝑒2,𝑥𝑥 𝑡𝑡𝑥𝑥
part 𝑒𝑒1,𝑦𝑦 , 𝑒𝑒2,𝑦𝑦 𝑡𝑡𝑦𝑦
0 0 1 0 0 1
Computer Graphics 2019/20 - 2D Graphics 24
Homogenous coordinates
• Transformation Rules & Matrix Operations
Multiplication ≡ composition
𝑇𝑇 𝑆𝑆 𝑆𝑆𝑇𝑇
𝑥𝑥 → 𝑇𝑇𝑇𝑇 = 𝑦𝑦 → 𝑆𝑆𝑆𝑆 = 𝑧𝑧 ≡ 𝑥𝑥 𝑆𝑆𝑆𝑆𝑆𝑆 = 𝑧𝑧
Inverse matrix ≡ Inverse transformation
• Note order of multiplication: 𝑆𝑆𝑆𝑆 means: first 𝑇𝑇, then 𝑆𝑆
Computer Graphics 2019/20 - 2D Graphics 25
Affine Transformations
• Special cases
• Translations
• Rotations
• Scalings
Computer Graphics 2019/20 - 2D Graphics 26
Affine Transformations
• Special cases
• Shearings
• Reflections
Computer Graphics 2019/20 - 2D Graphics 27
Affine Transformations
• Classes of Affine Transformations
• Rigid
• Similarity
• Linear
Computer Graphics 2019/20 - 2D Graphics 28
Affine Transformations
• Rigid Transformation (Euclidean Transform)
• Preserves distances
• Preserves angles
Rigid / Euclidean
Identity
Translation
Rotation
Computer Graphics 2019/20 - 2D Graphics 29
Affine Transformations
• Rigid transformation:
𝑒𝑒1 and 𝑒𝑒2 are orthonormal and have unit length
• 𝑥𝑥 → 𝐴𝐴𝐴𝐴 + 𝑡𝑡 with 𝐴𝐴 orthogonal and det(𝐴𝐴) > 0
• Application of multiple rigid transformations is a rigid
transformation again (also true for following classes)
• If det(𝐴𝐴) < 0, 𝐴𝐴 contains a reflection, which is not rigid
Computer Graphics 2019/20 - 2D Graphics 30
Affine Transformations
• Similarity Transforms
• Preserves angles, but changes distances
• Rigid + (isotropic) scaling + reflection
𝑥𝑥 → 𝑐𝑐𝑐𝑐𝑐𝑐 + 𝑡𝑡 with 𝑐𝑐 ∈ ℝ and 𝐴𝐴 orthonormal
Similarity
Rigid / Euclidean
Identity Isotropic Scaling
Translation
Rotation
Computer Graphics 2019/20 - 2D Graphics 31
Affine Transformations
• General Linear Transformations = affine without translation
• Origin (0,0) is always mapped to origin
Similarities
Linear
Rigid / Euclidean
Scaling
Identity
Translation Isotropic Scaling Reflection
Rotation
Shear
Computer Graphics 2019/20 - 2D Graphics 32
Scaling
• Examples
0.5 0 0
0 0.5 0
0 0 1
0.5 0 0
0 1.5 0
0 0 1
Computer Graphics 2019/20 - 2D Graphics 33
Shearing
• Shearing
• Pushing things sideways (compare deck of cards)
𝑠𝑠
𝑒𝑒2 =
1
• Horizontal ( y-coordinate will not change )
1 𝑠𝑠 0
𝑠𝑠𝑠𝑠𝑠𝑠𝑠𝑟𝑟𝑥𝑥 𝑠𝑠 = 0 1 0 𝑂𝑂 1
𝑒𝑒1 =
0 0 1 0
0
𝑒𝑒2 =
• Vertical ( x-coordinate will not change ) 1
1 0 0
𝑠𝑠𝑠𝑠𝑠𝑠𝑠𝑟𝑟𝑦𝑦 𝑠𝑠 = 𝑠𝑠 1 0
0 0 1 𝑂𝑂 1
𝑒𝑒1 =
𝑠𝑠
Computer Graphics 2019/20 - 2D Graphics 34
Shearing
• Examples
• Horizontal shear: vertical lines → 45°to the right
1 0.5 0
0 1 0
0 0 1
• Vertical shear: horizontal lines → 45°to the top
1 0 0
0.5 1 0
0 0 1
Computer Graphics 2019/20 - 2D Graphics 35
Simple Rotation in 2D
• Rotation
• Vector 𝒂𝒂 = (𝑎𝑎𝑥𝑥 , 𝑎𝑎𝑦𝑦 ), angle 𝛼𝛼 with 𝑥𝑥-axis
• Length 𝑟𝑟 = 𝑎𝑎𝑥𝑥2 + 𝑎𝑎𝑦𝑦2
• By definition: 𝑎𝑎𝑥𝑥 = 𝑟𝑟 cos 𝛼𝛼,
𝑎𝑎𝑦𝑦 = 𝑟𝑟 sin 𝛼𝛼
• Rotation by an angle φ counter-clockwise:
𝑏𝑏𝑥𝑥 = 𝑟𝑟 cos 𝛼𝛼 + 𝜙𝜙 = 𝑟𝑟 cos 𝛼𝛼 cos 𝜙𝜙 – 𝑟𝑟 sin 𝛼𝛼 sin 𝜙𝜙
𝑏𝑏𝑦𝑦 = 𝑟𝑟 sin(𝛼𝛼 + 𝜙𝜙) = 𝑟𝑟 sin 𝛼𝛼 cos 𝜙𝜙 + 𝑟𝑟 cos 𝛼𝛼 sin 𝜙𝜙
y
b a
φ
α
x
Computer Graphics 2019/20 - 2D Graphics 36
Simple Rotation in 2D
• After substitution
• 𝑏𝑏𝑥𝑥 = 𝑎𝑎𝑥𝑥 cos 𝜙𝜙 − 𝑎𝑎𝑦𝑦 sin 𝜙𝜙
• 𝑏𝑏𝑦𝑦 = 𝑎𝑎y cos𝜙𝜙 + 𝑎𝑎𝑥𝑥 sin 𝜙𝜙
• Matrix form taking 𝑎𝑎 to 𝑏𝑏
cos𝜙𝜙 − sin 𝜙𝜙 0
𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟 𝜙𝜙 = sin 𝜙𝜙 cos 𝜙𝜙 0
0 0 1
−𝑠𝑠𝑠𝑠𝑠𝑠𝑠𝑠
𝑒𝑒2 =
𝑐𝑐𝑐𝑐𝑐𝑐𝑐𝑐 cos 𝜙𝜙
𝑒𝑒1 =
sin 𝜙𝜙
𝑂𝑂
Computer Graphics 2019/20 - 2D Graphics 37
Simple Rotation in 2D
• Rotation by 45°counter-clockwise
2 2
− 0
2 2
2 2
0
2 2
0 0 1
• Rotation by 30° clockwise 3 1
0
2 2
1 3
− 0
2 2
0 0 1
Computer Graphics 2019/20 - 2D Graphics 38
Reflection
• Reflection
• Reflect a vector across either of the coordinate axes
• Determinant of a reflection is negative
• About 𝑥𝑥-axis (multiply 𝑦𝑦 by -1):
1 0 0
0 −1 0
0 0 1
Computer Graphics 2019/20 - 2D Graphics 39
Reflection
• Across y-axis (multiply x coordinates by -1)
−1 0 0
0 1 0
0 0 1
Computer Graphics 2019/20 - 2D Graphics 40
Linear Transformations
• Compositing of 2D transformations
• First 𝑣𝑣2 = 𝑆𝑆𝑣𝑣1 then 𝑣𝑣3 = 𝑅𝑅𝑣𝑣2
• Equivalently 𝑣𝑣3 = 𝑅𝑅 𝑆𝑆𝑣𝑣1 = 𝑅𝑅𝑅𝑅 𝑣𝑣1
1 0 0
0 0.5 0
0 0 1
2 2 2 2
− 0 − 0
2 4 2 2
2 2 2 2
0 0
2 4 2 2
0 0 1 0 0 1
Computer Graphics 2019/20 - 2D Graphics 41
Linear Transformations
• Matrix multiplications are associative:
𝑅𝑅𝑅𝑅 𝑇𝑇 = 𝑅𝑅 𝑆𝑆𝑆𝑆 → 𝑣𝑣3 = 𝑅𝑅𝑅𝑅 𝑣𝑣1 = 𝑀𝑀𝑣𝑣1 with 𝑀𝑀 = 𝑅𝑅𝑅𝑅
• Matrix multiplications are not commutative
• The order of transformations does matter !!!
• Note the difference
• Scaling then rotating
• Rotating then scaling
Computer Graphics 2019/20 - 2D Graphics 42
Linear Transformations
• Note that the order of transformations is important
Scale Rotate
Rotate Scale
Computer Graphics 2019/20 - 2D Graphics 43
Linear Transformations
• Decomposition of transformations
• Write some transformation 𝑀𝑀 as the product of certain classes of matrices
• In 2D: Decomposition of any linear 2D transform into product:
rotation → scale → rotation = 𝑅𝑅2 𝑆𝑆𝑅𝑅1
• From existence of singular value decomposition (SVD)
(Singulärwertzerlegung, Ausgleichsprobleme)
• Note that the scale can have negative entries
Computer Graphics 2019/20 - 2D Graphics 44
Linear Transformations
• Example: shearing
• 𝜎𝜎𝑖𝑖 singular values, 𝑅𝑅1 and 𝑅𝑅2 rotations
1 1 𝜎𝜎 0
= 𝑅𝑅2 1 𝑅𝑅
0 1 0 𝜎𝜎2 1
0.851 −0.526 1.618 0 0.526 0.851
=
0.526 0.851 0 0.618 −0.851 0.526
R1 SR1 R2SR1
Computer Graphics 2019/20 - 2D Graphics 45
Linear Transformations
• Matrix decomposition: represent rotations with shears
cos 𝜙𝜙 − 1 cos 𝜙𝜙 − 1
cos 𝜙𝜙 −sin 𝜙𝜙 1 1 0 1
= sin 𝜙𝜙 sin 𝜙𝜙
sin 𝜙𝜙 cos 𝜙𝜙 sin 𝜙𝜙 1
0 1 0 1
• Useful for raster rotation
• Very efficient raster operation for images: only column-wise and row-wise
operations!
• Introduces some jaggies but no holes
Computer Graphics 2019/20 - 2D Graphics 46
Linear Transformations
1 0
= 𝑆𝑆3 𝑆𝑆2 𝑆𝑆1 = 1 1 − 2 1 1− 2
𝜋𝜋
• 𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟𝑟 2
4 0 1 1 0 1
2
S1 S2S1 S3S2S1
Computer Graphics 2019/20 - 2D Graphics 47
Linear Transformations
• Images – simple raster rotation
• Take raster position (𝑖𝑖, 𝑗𝑗) and apply horizontal shear
1 𝑠𝑠 𝑖𝑖 𝑖𝑖 + 𝑠𝑠𝑠𝑠
=
0 1 𝑗𝑗 𝑗𝑗
• Round 𝑠𝑠𝑠𝑠 to nearest integer: in every row a constant shift
• Move each row sideways by a different amount
• Resulting image has no gaps
Computer Graphics 2019/20 - 2D Graphics 48
Example
• Affine Transformations with the HTML Canvas
Computer Graphics 2019/20 - 2D Graphics 49
Scene Graph based Graphics APIs
• HTML5-Element SVG (Scalable Vector Graphics)
• can contain graphical objects as children, e.g.:
<svg width=200 height=200>
<circle cx=100 cy=100 r=50 />
<rect x=0 y=0 width=100 height=100 />
</svg>
• for more information see:
https://developer.mozilla.org/de/docs/Web/SVG
Computer Graphics 2019/20 - 2D Graphics 50
Scene Graph based Graphics APIs
• Examples:
Computer Graphics 2019/20 - 2D Graphics 51
SVG Groups
• SVG allows us to group nodes using a group node
• allows us to apply transformations or attributes to entire groups
Computer Graphics 2019/20 - 2D Graphics 52
Scene Graph
• Such a hierarchy is a tree, right? Why then “Scene Graph”?
→ group nodes can be referenced multiple times
→ graph instead of tree → “instancing”
<svg id="svg">
<defs>
<g id="prim">
<rect width="20" height="20“ />
</g>
</defs>
<g fill="green">
<use xlink:href="#prim" x="50" y="50” />
<use xlink:href="#prim" x="150" y="50“ />
</g>
<g fill="red">
<use xlink:href="#prim" x="50" y="150“ />
<use xlink:href="#prim" x="150" y="150“ />
</g>
</svg>
Computer Graphics 2019/20 - 2D Graphics 53
Scene Graph
<svg id="svg">
<defs>…</defs>
svg <g fill="green">
<use xlink:href="#prim" x="50"
<use xlink:href="#prim" x="150
</g>
g fill=“green” g fill=“red” <g fill="red">
<use xlink:href="#prim" x="50"
<use xlink:href="#prim" x="150
x=50 x=150 x=50 x=150
y=50 y=50 y=150 y=150
</g>
</svg>
#prim
• We will come back to scene graphs later in the lecture
Computer Graphics 2019/20 - 2D Graphics 54
Next lectures …
• Rasterization of lines and Polygons
Computer Graphics 2019/20 - 2D Graphics 55
