Assignment 06 Due Friday MONDAY!!!
Generate self-similar graphical content
Homework 07: draw self-similar images
Cartessian Coordinates:
Screen coordinates:
Standard coordinates:
Today: use standard coordinates!
Vectors can be manipulated with algebraic operations:
Coordinates can be interpreted as vectors:
SVG supports transformation of elements (shapes, groups, etc)
translate(tx, ty)
: take each vector $(a, b)$ and move it to $(a + t_x, b + t_y)$scale(s)
: take each vector $(a, b)$ and move it to $(s \cdot a, s \cdot b)$rotation(d)
: rotate each vector by $d$ degrees in the counter clockwise direction around the originFor example:
<rect width="20" height="20" transform="translate(30, 40)"/>
Transformations can be composed:
lec11-coordinate-transformations.zip
translate(-20, 10) scale(2)
?scale(2) translate(-20, 10)
?A broad class of transformations are defined by:
Suppose a transformation maps:
To apply transformation to $(x, y)$:
add $(e, f)$ to result:
$(ax + cy + e, bx + dy + f)$
This is an affine transformation
matrix
TransformationsIn SVG you can perform an affine transformation
with
transform=matrix(a, b, c, d, e, f)
matrix
transforms include all scale, translate, rotate
transforms, and more!
What is the matrix
equivalent of translate(20, 30)
?
What is the matrix
equivalent of scale(2)
?
What is the matrix
equivalent of rotate(90)
?
What is the matrix of this transformation?
How did we make the snowflake fractal?
Step 1: define a basic shape
How did we make the snowflake fractal?
Step 2: define sub-shapes for basic shape
How did we make the snowflake fractal?
Step 3: recurse
How did we make the snowflake fractal?
Step 3: recurse
Each iteration draws a bunch of transformed copies of the original shape
Define the basic shape in a <defs>
element
<defs>
<rect id="my-rect" width="20" height="20"/>
</defs>
Draw basic shape with <use>
, apply transform
to transform the element
<use href="#my-rect" transform="translate(20, 30)"/>
Now can re-use my-rect
over and over again with different transformations
Draw two iterations of the Koch curve!
lec11-koch-step.zip
Make things easier!
<g>
) elements