| HOME | UT | UTArts | SW | BB | NMP | Atomic | |||||
| SANTIAGO ECHEVERRY secheverry at ut.edu || CAS Annex 112 || 813.257.3769 || Office hours by appointment only |
|||||
ART310 | Advanced DIGITAL ARTS | Fall 2013 | PRE-REQUISITE: ART210 Section H | T - Tr | 3:00PM - 5:50 PM | CAS 134 |
|||||
| 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, 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." sine, cosine functions, counters, TIME requestAnimationFrame / requestAnimationFrame #2 ARRAYS |
• 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 // tholman.com/experiments / |
• pixel data • ex1 • CT 2.3.1 -> 2.3.6 • collision • thecodeplayer.com • labs.hyperandroid.com • TONS OF EXAMPLES • More examples |
|||
| 6 - PROCESSING / JS Create 5 advanced animations exploring ProcessingJS. 800x600px |
setup(), draw(), shapes, images, advanced geometric transformations. Variables. 2D primitives and curves, attributes. pop and push matrix |
• processing.org • 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 • WebGL • WebGL 3D • inka3D = maya to html5 • SVG • SVG animation • Arduino (free) • Openframeworks (app developer on mac) • Max/Jitter (paid) • Golan Levin • RGA.com |
|||||
| FINALS |
FINAL PORTFOLIO REVIEW - EVERYONE MUST BE PRESENT TUESDAY DEC 10th - 3.00 - 5.50PM exams |
||||