Santiago Echeverry

secheverry at ut.edu || CAS Annex 112 || BOX 106F || 813.257.3769






FMX 310 | CREATIVE CODING | SPRING 2018

Section D | Tu - Tr | 10:00 - 11:50 AM | 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

Denardo / Bono / Richardson / Anderson / Phipps
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 the following piecespieces that visually translate the numerical operations in your code, inspired by your research on Tibetan Mandala.
1) Illustration Mandala
Phipps / Dincheva / Denardo / Bono/ Curtis

2) Vector Mandala
Phipps / Denardo / Bono / Hoffmann / Richardson

3) Image Mandala
Curtis / Bono / Denardo / Fontano / Roque / Ellis

4) Video Mandala
Ellis / Lowell / Roque / Whitesel / Denardo / Richardson / Sprague

800x600px minimum

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. Audio and video optimization for the web. Folder structures and organizations.

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 a visual poems exploring all the text properties in the canvas object. Similar to the Mandala project but here you can ONLY use words and text /

Meehan / Bono / Denardo / Belcher / Curtis / Phipps

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:
1) a picture of a crop circle,
Whitesel / Magoulas / Nguyen / Sprague / Hughes / Bono

2) an example of sacred geometry,
Phipps / Whitesel / Fontano / Belcher / Curtis

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.

Study the shapes individually, think about HOW they were made and then recreate them mathematically, even though it would mean oversimplifying them. Use different canvases, and repeat loops to create them. The point of these two assignments is to OPTiMIZE the illustration and animation using MATH. If I see an illustrator made sequence of objects that are proportionally placed and that are diminishing their sizes in a relative manner, I will take points off! Now you know why this assignment used to be called the "Math Nightmare".


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 - DATA VISUALIZATION
Determine at least 6 common properties that you will use to sample at least 20 people in your community, using an anonymous questionnaire. With the results of the poll, create an interactive data visualization project, representing and comparing each sampled person.

Whitesell / Ellis / Curtis / Lowell / Roque
What is data visualization link1 PBS
Definition of Objects in Programming. Accessing Properties.

art310.santiago.bz/fa17/_samples/dataviz/

Working with Objects
Javascript Objects
Javascript Properties

6 - GAME
Create a simple OOP Game using Object Properties, involving your own design and characters. Define the narrative of the game, the characters and the rules for the user. Think about the limitiations of the design. Have in mind that these games need to be cross-platform, therefore avoid the usage of keyboard events.

Hoffmann / Devine / Nguyen / Curtis / Bono / Lambert
Object Oriented Programming



EXPLORE
560 free online courses
p5js.org
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
FALL FINAL EXAMS SCHEDULE / SPRING FINAL EXAMS SCHEDULE