Transcript Web Server-Side Programming Assignments

Generating Fractal in
SVG
By Bun Yue
at Innovation 2003
May 2, 2003
1
Abstract



May 2, 2003
Discuss a simple system, FSX (Fractals in SVG
using XSLT), to generate fractals in Scalarable
Vector Graphics (SVG).
Use Java and XSLT
Highlight the potential of SVG and XML
technologies.
http//dcm.cl.uh.edu/yue; [email protected]
page 2
Contents





May 2, 2003
Fractals
SVG
FSX Design
FSX Implementation
Conclusions
http//dcm.cl.uh.edu/yue; [email protected]
page 3
Fractals Basic

Fractals are "fragmented geometric shapes that
can be subdivided in self-similar parts."
Repeating patterns
 Smaller and smaller patterns.


May 2, 2003
Iterated Function Systems (IFS): using functions
(transformations) to obtain the next level of
patterns from the current pattern.
http//dcm.cl.uh.edu/yue; [email protected]
page 4
Fractal Example (1)

May 2, 2003
Basic pattern (level 0)
http//dcm.cl.uh.edu/yue; [email protected]
page 5
Fractal Example (2)


May 2, 2003
Basic pattern (level 1)
Three new patterns: scaling & transition.
http//dcm.cl.uh.edu/yue; [email protected]
page 6
Fractal Example (3)

May 2, 2003
Basic pattern (level 2)
http//dcm.cl.uh.edu/yue; [email protected]
page 7
Fractal Example (4)

May 2, 2003
Basic pattern (level 7)
http//dcm.cl.uh.edu/yue; [email protected]
page 8
Fractal Applications

Fractals have many applications:
 Graphics
 Encryption
and compression
 Art


May 2, 2003
There are many commercial and free
fractal products.
Most fractals are in bitmap graphics
format: e.g. gif, jpeg.
http//dcm.cl.uh.edu/yue; [email protected]
page 9
SVG



2d vector graphics format based on XML
Similar to Macromedia's flash.
Some problems of bitmap-based
graphics:
 Difficult
to resize without losing quality.
 Difficult to identify individual objects for
manipulation.
 Difficult to provide interactive graphics.
May 2, 2003
http//dcm.cl.uh.edu/yue; [email protected]
page 10
Advantages of SVG







May 2, 2003
Rich graphics and multi-media capability.
Small file sizes.
International language support.
High quality graphics.
Text-based.
Standard-based.
Access to other standards: DOM, CSS,
Javascript, etc.
http//dcm.cl.uh.edu/yue; [email protected]
page 11
Example of SVG

May 2, 2003
Circle2.svg
http//dcm.cl.uh.edu/yue; [email protected]
page 12
FSX


May 2, 2003
FSX (Fractal in SVG using XSLT): a very
simple system for generating fractal in
SVG.
Use to demonstrate potential of the
involved technologies.
http//dcm.cl.uh.edu/yue; [email protected]
page 13
FSX Design
Base Fractal
(SVG)
CreateFractal
(Java)
Output Fractal
(SVG)
Fractal
Transformation
(XML+SVG)
Display
Option
(XML)
May 2, 2003
Generate
Fractal
(XSLT)
http//dcm.cl.uh.edu/yue; [email protected]
page 14
Example of Base Fractal
Triangle_1.svg:
<?xml version="1.0" ?>
<svg viewBox="0 0 400 400">
<desc>Triangle</desc>
<g id="baseFractal" transform="scale(200)">
<path id="level_0" fill="#880088" d="M 0 0 L 2 0 L 1 1.732
z" />
</g>
</svg>
May 2, 2003
http//dcm.cl.uh.edu/yue; [email protected]
page 15
Example of Fractal Transformation
Triangle_transform_1.xml:
<?xml version="1.0" ?>
<!DOCTYPE FractalTransformation SYSTEM
"FractalTransformation.dtd" >
<FractalTransformation>
<transform transform="matrix(0.5 0 0 0.5 0 0)" />
<transform transform="matrix(0.5 0 0 0.5 1 0)" />
<transform transform="matrix(0.5 0 0 0.5 0.5 0.866)" />
</FractalTransformation>
May 2, 2003
http//dcm.cl.uh.edu/yue; [email protected]
page 16
Example of Display Option
Triangle_option_1.xml:
<?xml version="1.0" ?>
<fractalOption>
<width>400</width>
<height>400</height>
<firstViewLevel>1</firstViewLevel>
<lastViewLevel>1</lastViewLevel>
<maxDepthLevel>2</maxDepthLevel>
</fractalOption>
May 2, 2003
http//dcm.cl.uh.edu/yue; [email protected]
page 17
Example of Output
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
<defs>
<g id="depth_0">
<path id="level_0" fill="#880088" d="M 0 0 L 2 0 L 1 1.732 z"/>
</g>
<g id="depth_1">
<use xlink:href="#depth_0" transform="matrix(0.5 0 0 0.5 0 0)"/>
<use xlink:href="#depth_0" transform="matrix(0.5 0 0 0.5 1 0)"/>
<use xlink:href="#depth_0" transform="matrix(0.5 0 0 0.5 0.5 0.866)"/>
</g>
</defs>
<use xlink:href="#depth_1" opacity="1" transform="scale(200)"/>
</svg>
May 2, 2003
http//dcm.cl.uh.edu/yue; [email protected]
page 18
Some Example Output



ellipse_out.svg
circle4_out.svg
animate_out.svg: which uses
 rectAnimate_1.svg
 rectAnimate_transform_1.xml
 rectAnimate_option_1.xml
May 2, 2003
http//dcm.cl.uh.edu/yue; [email protected]
page 19
Command line execution

May 2, 2003
java CreateFractal rectAnimate_1.svg
rectAnimate_transform_1.xml
rectAnimate_option_1.xml
generateFractal.xsl
rectAnimate_1_out.svg
http//dcm.cl.uh.edu/yue; [email protected]
page 20
FSX Implementation

Technologies:
 Java
 XSLT:
May 2, 2003
for transforming XML documents.
http//dcm.cl.uh.edu/yue; [email protected]
page 21
CreateFractal.java


May 2, 2003
65 lines
Read in command line arguments and
pass them to the XSLT program.
http//dcm.cl.uh.edu/yue; [email protected]
page 22
generateFractal.xsl



May 2, 2003
168 lines.
Read in input XML and SVG files.
Generate output SVG file.
http//dcm.cl.uh.edu/yue; [email protected]
page 23
Conclusions






May 2, 2003
SVG has huge potential as the next
dominant graphics format.
SVG is an excellent vehicle to view many
fractals.
FSX shows this possibility.
FSX is flexibly designed.
FSX implementation is simple
Basis of homework #4 of UHCL graduate
XML course this semester.
http//dcm.cl.uh.edu/yue; [email protected]
page 24
Thank you and discussion!
May 2, 2003
http//dcm.cl.uh.edu/yue; [email protected]
page 25