Weeks 12+


Improvement of work on Friday

Animating strokes
  1. Peeling an apple
  2. simpler case
  3. Calculating the length of a path
  4. Calculating the permeter of an ellipse
  5. Elliptical arcs
  6. unveiling path
  7. wiggle line
  8. drawing paths of a random tree
  9. similar stuff
  10. gears
  11. more gears

Widgets  and alternatives -- All are due last day of class: May 4th. You may substitute one piece of word art for any widget except the textarea (up to eleven substitutions). You must do the text area.

Widgets -- 

Alternatives (word art / orthographic puns) :

Discussed in class (all but those in red need to be animated). All should be accessible (real text), preferrably in proper order.

Additional ones to choose among (see here for ideas):

Other topics:

  1. Web audio (the  W3C spec)
  2. Demo of web audio (needs Chrome)
  3. Web GL (from Khronos)
  4. Isomer (from Jordan Scales)

Drawing a trefoil -- lessons for the visually impaired?

Accessing local files and more with SVG

More serializing using innerHTML 

Shaping editable text to the bounding box of a polygon

A link -- new glass from Corning

Serving SVG from PHP

More assigned reading: Wikipedia on Psychophysics and Fitt's Law

Using <object> in a way that works in IE (instead of <embed>)

Objects: constructors, prototypes, methods, classes, instances, anonymous functions, private and public methods.

Puzzlestart.svg and puzzlestart with SMIL

Modifying an HTML table using createElement, appendChild and removeChild

Making a table sortable

Time efficiency of building large strings (as in HTML or SVG)

Displaying things found in a web page

Ordered Exponential Sequences -- is the ordering ever rational? Are the ratios, differences, products, etc. of any of these irrationals ever rational?

excerpting from a page to make a menu

Some newer experiments

The console -- and some use of objects.

convolve and composite

accessing SVG DOM from HTML using <object>, <embed>, or <iframe> and another comparison

Placing HTML textareas over SVG nodes

JavaScript programming tips -- from the folks at Opera

generating random interactive graphs


SMIL vs. JavaScript animation of SVG

Coding, performance, SMIL limitations

SMIL JavaScript
Blur SMIL w/Javascript. JS blur
turbulence1 distortion filter
turbulence 2 distortion applied to an image
rotate image and shape rotating an image within a shape

One that is easier with SMIL

Extra credit question: can you make a button which both starts and stops a SMIL animation, without using JavaScript?


Generating PNG images on the fly -- client-side using SVG and JavaScript - from Kevin Lindsey Software Development