Web Server-Side Programming Assignments
Download
Report
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; yue@cl.uh.edu
page 2
Contents
May 2, 2003
Fractals
SVG
FSX Design
FSX Implementation
Conclusions
http//dcm.cl.uh.edu/yue; yue@cl.uh.edu
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; yue@cl.uh.edu
page 4
Fractal Example (1)
May 2, 2003
Basic pattern (level 0)
http//dcm.cl.uh.edu/yue; yue@cl.uh.edu
page 5
Fractal Example (2)
May 2, 2003
Basic pattern (level 1)
Three new patterns: scaling & transition.
http//dcm.cl.uh.edu/yue; yue@cl.uh.edu
page 6
Fractal Example (3)
May 2, 2003
Basic pattern (level 2)
http//dcm.cl.uh.edu/yue; yue@cl.uh.edu
page 7
Fractal Example (4)
May 2, 2003
Basic pattern (level 7)
http//dcm.cl.uh.edu/yue; yue@cl.uh.edu
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; yue@cl.uh.edu
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; yue@cl.uh.edu
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; yue@cl.uh.edu
page 11
Example of SVG
May 2, 2003
Circle2.svg
http//dcm.cl.uh.edu/yue; yue@cl.uh.edu
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; yue@cl.uh.edu
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; yue@cl.uh.edu
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; yue@cl.uh.edu
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; yue@cl.uh.edu
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; yue@cl.uh.edu
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; yue@cl.uh.edu
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; yue@cl.uh.edu
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; yue@cl.uh.edu
page 20
FSX Implementation
Technologies:
Java
XSLT:
May 2, 2003
for transforming XML documents.
http//dcm.cl.uh.edu/yue; yue@cl.uh.edu
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; yue@cl.uh.edu
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; yue@cl.uh.edu
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; yue@cl.uh.edu
page 24
Thank you and discussion!
May 2, 2003
http//dcm.cl.uh.edu/yue; yue@cl.uh.edu
page 25