| 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 |
• 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!!! |
||||