|
Santiago Echeverry
secheverry at ut.edu || CAS Annex 112 || BOX 106F || 813.257.3769 |
||||
|
ART 310 | CREATIVE CODING | FALL 2017 Section D | Tu - Tr | 10:00 - 11:50 AM | CAS 134 | PRE-REQ: ART210 / ITM 251 |
|||
| 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 • iacopoapps.appspot.com/hopalongwebgl/ (webgl 3D) • darkpsychedelic.ru (Flash) |
Textures, images, repeat loops ( for/condition/increment ) conditionals, elastic/proportional design (canvas.width and canvas.height), relative positioning Optimizing the canvas |
• 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 4 different groups of visual poems exploring all the text and video properties in the canvas object. Similar to the Mandala project but here you can ONLY use words and video on the second one / 800x600px |
Kinetic typography, font properties, visuals, font-families, sizes HTML5 Video // Mozilla |
• CT 1.8.1 -> 1.8.7 Arrays Associative arrays Multiarrays Tutorial + Info2 Metrics www.font-face.com |
|
| 4 – CROP CIRCLES Look for: 1) a picture of a crop circle, 2) an example of sacred geometry, analyze them and explore their advanced geometric properties; reproduce and modify them in two separate canvas documents, using mathematical operations, sine/cosine, repeat loops, etc. The biggest challenge: animate them interactively. DO NOT USE ILLUSTRATOR: IT IS NOT YOUR FRIEND in these two projects. |
Advanced visual properties, shadows, alpha, geometric transformations, rotation, translation, masks (clipping),
sine, cosine, mathematical functions, counters, requestAnimationFrame / requestAnimationFrame #2 ARRAYS 7 Animated GIFs That Will Make You Instantly Understand Trigonometry |
• 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 FALL FINAL EXAMS SCHEDULE |
||