1 Generating Fractal in SVG By Bun Yue at Innovation 2003 May 2, 2003

http//dcm.cl.uh.edu/yue; 2 Abstract n Discuss a simple system, FSX (Fractals in SVG using XSLT), to generate fractals in Scalarable Vector Graphics (SVG). n Use Java and XSLT n Highlight the potential of SVG and XML technologies.

May 2, 2003http//dcm.cl.uh.edu/yue; 3 Contents n Fractals n SVG n FSX Design n FSX Implementation n Conclusions

May 2, 2003http//dcm.cl.uh.edu/yue; 4 Fractals Basic n Fractals are "fragmented geometric shapes that can be subdivided in self-similar parts." u Repeating patterns u Smaller and smaller patterns. n Iterated Function Systems (IFS): using functions (transformations) to obtain the next level of patterns from the current pattern.

May 2, 2003http//dcm.cl.uh.edu/yue; 5 Fractal Example (1) n Basic pattern (level 0)

May 2, 2003http//dcm.cl.uh.edu/yue; 6 Fractal Example (2) n Basic pattern (level 1) n Three new patterns: scaling & transition.

May 2, 2003http//dcm.cl.uh.edu/yue; 7 Fractal Example (3) n Basic pattern (level 2)

May 2, 2003http//dcm.cl.uh.edu/yue; 8 Fractal Example (4) n Basic pattern (level 7)

May 2, 2003http//dcm.cl.uh.edu/yue; 9 Fractal Applications n Fractals have many applications: u Graphics u Encryption and compression u Art n There are many commercial and free fractal products. n Most fractals are in bitmap graphics format: e.g. gif, jpeg.

May 2, 2003http//dcm.cl.uh.edu/yue; 10 SVG n 2d vector graphics format based on XML n Similar to Macromedia's flash. n Some problems of bitmap-based graphics: u Difficult to resize without losing quality. u Difficult to identify individual objects for manipulation. u Difficult to provide interactive graphics.

May 2, 2003http//dcm.cl.uh.edu/yue; 11 Advantages of SVG n Rich graphics and multi-media capability. n Small file sizes. n International language support. n High quality graphics. n Text-based. n Standard-based. n Access to other standards: DOM, CSS, Javascript, etc.

May 2, 2003http//dcm.cl.uh.edu/yue; 12 Example of SVG n Circle2.svg

May 2, 2003http//dcm.cl.uh.edu/yue; 13 FSX n FSX (Fractal in SVG using XSLT): a very simple system for generating fractal in SVG. n Use to demonstrate potential of the involved technologies.

May 2, 2003http//dcm.cl.uh.edu/yue; 14 FSX Design Base Fractal (SVG) Fractal Transformation (XML+SVG) Display Option (XML) Generate Fractal (XSLT) Output Fractal (SVG) CreateFractal (Java)

May 2, 2003http//dcm.cl.uh.edu/yue; 15 Example of Base Fractal Triangle_1.svg: Triangle

May 2, 2003http//dcm.cl.uh.edu/yue; 16 Example of Fractal Transformation Triangle_transform_1.xml:

May 2, 2003http//dcm.cl.uh.edu/yue; 17 Example of Display Option Triangle_option_1.xml:

May 2, 2003http//dcm.cl.uh.edu/yue; 18 Example of Output

May 2, 2003http//dcm.cl.uh.edu/yue; 19 Some Example Output n ellipse_out.svg n circle4_out.svg n animate_out.svg: which uses u rectAnimate_1.svg u rectAnimate_transform_1.xml u rectAnimate_option_1.xml

May 2, 2003http//dcm.cl.uh.edu/yue; 20 Command line execution n java CreateFractal rectAnimate_1.svg rectAnimate_transform_1.xml rectAnimate_option_1.xml generateFractal.xsl rectAnimate_1_out.svg

May 2, 2003http//dcm.cl.uh.edu/yue; 21 FSX Implementation n Technologies: u Java u XSLT: for transforming XML documents.

May 2, 2003http//dcm.cl.uh.edu/yue; 22 CreateFractal.java n 65 lines n Read in command line arguments and pass them to the XSLT program.

May 2, 2003http//dcm.cl.uh.edu/yue; 23 generateFractal.xsl n 168 lines. n Read in input XML and SVG files. n Generate output SVG file.

May 2, 2003http//dcm.cl.uh.edu/yue; 24 Conclusions n SVG has huge potential as the next dominant graphics format. n SVG is an excellent vehicle to view many fractals. n FSX shows this possibility. n FSX is flexibly designed. n FSX implementation is simple n Basis of homework #4 of UHCL graduate XML course this semester.

May 2, 2003http//dcm.cl.uh.edu/yue; 25 Thank you and discussion!