|
Santiago Echeverry
secheverry at ut.edu || CAS Annex 112 || 813.257.3769 || Office hours by appointment only |
||||
|
ART 310 | Advanced DIGITAL ARTS | SPRING 2015 Section F | Tu - Tr | 12:00N - 2:50 PM | CAS 134 | PRE-REQ: ART210 |
|||
| Assignment | Class | Resources | |
| 1 – CANVAS Using any text editor, create a complex landscape or a portrait - it can be totally experimental - involving 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 http://www.santiago.bz/html5/getImageData/ imageData_1.html imageData_2.html imageData_3.html imageData_4.html vidData_01.html vidData_02.html |
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 - GAME Create a simple OOP Game |
Object Oriented Programming
|
||
|
|||
| FINALS |
FINAL PROJECT REVIEW - EVERYONE MUST BE PRESENT THURSDAY MAY 7th || 1.30-3.30PM - exams |
||