Assignment 07: Self-Similarity

Due April 7 at 11:59pm

Overview

In class, we employed SVG coordinate transformations and recursion together in order to generate self-similar images such as those depicted below:

In this assignment, you will make a website that incorporates transformations

Purpose

The main goals of this assignment are for you to:

1. gain more familiarity with creating and manipulating SVG elements with JavaScript
2. employ coordinate transformations, element groups, and recursion to achieve self-similar images
3. have an opportunity for open-ended, creative exploration.

Resources

Code and SVG

• MDN SVG Tutorial
  • You can add (and transform!) external images from an SVG element with the <image> tag
• Code examples from Lectures 11 and 12

Inspiration

• Sierpinski triangle
• Apollonian gasket
• Barnsley fern
• Hilbert Curve
• Self-similar Tesselations
• Self-Similar Fractal Drawings Inspired by M. C. Escher’s Print Square Limit

Specification

The only requirements for your submission are:

1. The website uses only plain html, css, and JavaScript without external libraries or dependencies.
2. It uses one or more <svg> elements to make the main graphical content on the site.
3. Elements in the SVG image are created and manipulated using JavaScript.
4. The <svg> element(s) incorporate coordinate transformations.
5. The site includes a brief description of how the image was generated including links to any inspirational material for its generation.

Assessment

20 points

• 10 points basic functionality and specifications
  • site loads without errors or warnings
  • program incorporates all required items from the specification above
• 5 points style
  • main graphical content exhibits self-similarity (possibly with variations)
  • colors, shapes, and textures are employed to a deliberate visual effect
• 5 points technical sophistication
  • image incorporates a variety of visual elements
  • program performs non-trivial computation to place or style elements (such as recursion)
  • site incorporates elements elements are styled according to some computational rule (such as varying color or shape by recursion depth)