Assignment 06 Due Friday MONDAY!!!
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
Draw two iterations of the Koch curve!
lec11-koch-step.zip
In koch.js
:
drawSegment(x1, y1, x2, y2)
will draw the the basic shape transformed start at (x1, y1)
and end at (x2, y2)
(x1, y1, x2, y2) = (0, 100, 600, 100)
,From last time: transformations compose
To draw a Koch segment:
<g>
ElementIn SVG, <g>
is a group element
<g>
are drawn together<g>
are applied to all elements in the <g>
<g>
elements can be nested
<rect width="20" height="20" fill="black">
<g transform="translate(30, 20) rotate(45)">
<rect width="20" height="20" fill="black">
<g transform="translate(30, 20)">
<rect width="20" height="20" fill="black">
</g>
</g>
DrawKoch(parentGroup, transformation):
create and transform curGroup for this segment
draw this segment to curGroup
DrawKoch(curGroup, transformation for first sub-segment)
DrawKoch(curGroup, transformation for second sub-segment)
DrawKoch(curGroup, transformation for third sub-segment)
DrawKoch(curGroup, transformation for fourth sub-segment)
lec12-koch-step.zip
matrix
ReloadedIn SVG you can perform an affine transformation
with
transform=matrix(a, b, c, d, e, f)
Two squares
matrix
Question. What matrix
transformation will transform the outer square to the inner square?
lec12-recusrive-squares.zip
Basic Shape
Recursive Step: transformation(s)?
lec12-recursive-tree.zip
lec12-animated-tree.zip
Make a website that incorporates (recursive) self-similar graphics
Automated Graph Drawing!