| SANTIAGO ECHEVERRY ART310 | Advanced DIGITAL ARTS | FALL 2012 | PRE-REQUISITE: ART210 Section H | T - Tr | 2:00PM - 4: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 | • 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 an Interval. |
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 - KINETIC Create 5 advanced animations using the KineticJS library. 800x600px |
Mouse Coordinates, KineticJS, layers, shapes, images, advanced geometric transformations, event listeners, principles of interactive design. Transitions and animations, CSS3 properties |
• CT 2.4.1 -> 2.4.6 • window.requestAnimationFrame • KineticJS • CT 2.5.1 Mouse Coords • CT 3.1 Shapes • CT 3.2 Events • CT 3.3 Drag and Drop • CT 3.4 Layering • CT 3.5 Styling • CT 3.6 + 3.7 • Animation tips • Fishtank / Anim tutorial |
|||
| 7 - 3JS Create 5 different animations exploring 3D properties. 800x600px |
Plugin free 3D Animation for the canvas, WebGL, primitives? objects |
• WebGL specifications • WebGL live 3D • WebGL info • Demos (Not for Safari) |
|||
| 8 - LIVING PAINTING Choose your favorite painting and transform it into an animated scene: 30 seconds minimum, 10fps. |
Movie Clips, Classic vs Motion Tweens. Masks, animated Masks. Basic audio. Starry night | • Images in Flash • Motion tweens 1 • Motion tween 2 • Classes / Movie clip classes • kirupa.com / MC Vs Sprite • actionscript.org http://www.jeanmalek.com/ • senocular.com |
|||
| 9 - DANCER Create a 30s / 24fps min / dancing objects exploring the bone tool (IK) |
Advanced Animation techniques, visual effects, Bone tool. Nested movie clips. | • Inverse Kinetics on Atomiclearning • lecielestbleu.org |
|||
| 10 - KINETIC TYPOGRAPHY minimum 60 secs, max 120 secs anim , 30fps, 720x480px |
Fonts, vectorized types, animated typography, design for motion graphics. | • Fight Club • Pulp Fiction • Lord of War • Pi Song • Embedding fonts in Flash • TLF Text Text Layout Framework • Working with TLF text • Todd Perkins tutorial |
|||
| 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 DEC 13th / 1.30 - 3.30 PM exams |
||||