IML 400 Spring 2015

Assignment 6: Alternative web content

Make a simple dynamic and/or interactive sketch using WebGL, SVG or the HTML5 <canvas> tag and your framework of choice. Add it as a background or as a component to your homepage for extra points.

Due Date

Monday, March 9th, 9:00am.

Here are some examples to get you started

• <canvas> examples - clock - cellular automata - transformation stack - drawing pad
• TwoJS animation examples - SVG 1 - SVG 2 - tweening
• ThreeJS 3D Particle raster tool
• ThreeJS Script loader and sketches
• ThreeJS Candy shader
• PaperJS 2D Particle raster tool - example 1 - example 2

Readings - The open web

1. An Essay on the New Aesthetic, by Bruce Sterling

Please relpy to Sterling's position. Do you agree? disagree? not sure?

Readings Due Date

Monday, March 9th, 9:00am.

Additional Resources

WebGl and GLSL

1. ThreeJS - examples and more examples
2. My Tiny three set of examples for threeJS
3. Pixel Shaders - An Interactive Introduction to Graphics Programming - Includes an interactive Shader Editor
4. Introduction to Shaders by Aerotwist
5. GLSL Shader Sandbox
6. Making Audio Reactive Visuals by Airtight Interactive
7. GLAM - documentation - examples

HTML5 <canvas> tag

1. Dive into HTML5 - The <canvas> tag
2. PaperJS - tutorials - examples
3. P5JS - learning center

Scalable Vector Graphics (SVG)

1. Learn SVG and SVG basics tutorial
2. D3JS - examples - docs
3. RaphaelJS - documentation
4. TwoJS - example: mouse events with SVG