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
  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
Google webfonts

Mozilla @font-face tutorial

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 TWO pictures of field crop circles, and your favorite commercial Logo, analyze them and explore their advanced geometric properties; reproduce them in the canvas using mathematical operations, repeat loops, etc. The biggest challenge: animate them interactively.
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

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



EXPLORE
WebGL
WebGL 3D
inka3D = maya to html5
SVG
SVG animation
Arduino (free)
CINDER ( MAC XCODE DEVELOPMENT C++)
Openframeworks (app developer on mac)
Max/Jitter (paid)
Golan Levin
RGA.com
• CHROME: Commodore 64 keyboard http://www.igorski.nl/experiment/websid
ANGULAR JS
ANGULAR JS Examples

   
FINALS

FINAL PROJECT REVIEW: EVERYONE MUST BE PRESENT
SPRING FINAL EXAMS SCHEDULE