SANTIAGO ECHEVERRY

ART310 | Advanced DIGITAL ARTS | Spring 2013 | PRE-REQUISITE: ART210

Section P | T - Tr | 5:00PM - 7:50 PM | CAS 134

secheverry at ut.edu | CAS Annex 112 | 813 - 813 257 3769 | Office hours by appointment only
Assignment Class   Resources
1 – CANVAS
Using any text editor, create acomplex landscape or a portrait - it can be totally experimental - using the HTML5 CANVAS. It must contain AT LEAST 10 shapes, including bezier and quadratic curves. 800x600px
HTML 5 introduction, CANVAS object, geometric properties, lines, colors, fills, strokes, gradients, quadratic and bézier curves, complex shapes ENIAC

CREATIVE CODE: PBS
  CANVAS TUTORIAL (CT) 1.1 -> 1.6.2

• Canvas on whatwg
Mozilla Developers
HTML5 elements
2 – MANDALAS
Using repeat loops, conditionals and mathematical functions create at least 10 different piecesthat visually translate the numerical operations in your code, inspired by your research on Tibetan Mandala. 7 of those pieces must be vectors only, 3 of them must contain images. 800x600px
Textures, images, repeat loops ( for/condition/increment ) conditionals, sine, cosine functions, counters, eleastic/proportional design (canvas.width and canvas.height), relative positioning, animated PNGS
  CT 1.6.3 -> 1.7.4
W3.org
• W3S getContext("2d")
JS Reference - MOZILLA
Functions / functions2
JS Statements
Mathematical operations
JS Comments
JS Variables
JS Operators
JS Comparisons
JS If...Else
JS Switch
3 – POEMS
Create 5 different visual poems exploring all the text properties in the canvas object. Similar to the Mandala project but here you can ONLY use words / 800x600px

Kinetic typography, font properties, visuals, font-families, sizes
Google webfonts

Mozilla @font-face tutorial
  • CT 1.8.1 -> 1.8.7
Arrays
Associative arrays
Multiarrays
Tutorial + Info2
Metrics
www.font-face.com

4 – CROP CIRCLES
Look for THREE pictures of field crop circles, analyze them and explore their advanced geometric properties; reproduce them in the canvas using mathematical operations, repeat loops, etc. The biggest challenge: animate them either by using a mouseEvent or a framerate.
Advanced visual properties, shadows, alpha, geometric transformations, rotation, translation, masks (clipping). "The HTML DOM defines the objects and properties of all HTML elements, and the methods to access them. In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements."
  • CT 2.1.1 -> 2.2.
rotating images
DOM
Events
Event handling
Animating sprites ex using css
Objects in JS

5 - IMAGE DATA
Create 5 different projects where you will manipulate the image data of 5 of your OWN images. Explore
Understanding the image matrix, definition of color per pixel, duplication, transformations, mathematical operations on visual properties canvas + video
Manipulating video / video element /
particles // requestAnimationFrame
/ tholman.com/experiments /
requestAnimationFrame #2

pixel data
ex1
• CT 2.3.1 -> 2.3.6
collision
thecodeplayer.com
labs.hyperandroid.com
TONS OF EXAMPLES
More examples
6 - PROCESSINGJS
Create 5 advanced animations exploring ProcessingJS. 800x600px
setup(), draw(), shapes, images, advanced geometric transformations. Variables. 2D primitives and curves, attributes. pop and push matrix

processingjs.org/learning
7 - INPUT
Create 5 different animations exploring user interactions. 800x600px
mouseX, mouseY, mouseEvents, Intersections

processingjs.org/reference
8 - TYPE
Create 5 interactive kinetic typography projects
Font loading and displaying, metrics and attributes. CSS3 fonts.   processingjs.org/reference
9 - 3D
Create 5 projects exploring the 3D properties of ProcessingJS.
3D primitives, Cameras, X,Y,Z transformation, translate(), lights, camera, material properties   processingjs.org/reference
10 - FREE
create 1 big project exploring all the properties of ProcessingJS
Use whichever area interested you the most in PJS    
EXPLORE
SVG
Processing // Arduino (free)
Openframeworks (app developer on mac)
Max/Jitter (paid)
Golan Levin
RGA.com

   
FINALS

FINAL PORTFOLIO REVIEW - EVERYONE MUST BE PRESENT
THURSDAY MAY 9TH / 3.45 - 5.45PM exams ->DAY CHANGE!!!