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

2. http//dcm.cl.uh.edu/yue; yue@cl.uh.edupage 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.

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

4. May 2, 2003http//dcm.cl.uh.edu/yue; yue@cl.uh.edupage 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.

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

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

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

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

9. May 2, 2003http//dcm.cl.uh.edu/yue; yue@cl.uh.edupage 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.

10. May 2, 2003http//dcm.cl.uh.edu/yue; yue@cl.uh.edupage 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.

11. May 2, 2003http//dcm.cl.uh.edu/yue; yue@cl.uh.edupage 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.

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

13. May 2, 2003http//dcm.cl.uh.edu/yue; yue@cl.uh.edupage 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.

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

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

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

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

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

19. May 2, 2003http//dcm.cl.uh.edu/yue; yue@cl.uh.edupage 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

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

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

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

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

24. May 2, 2003http//dcm.cl.uh.edu/yue; yue@cl.uh.edupage 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.

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