Course Description

ART310 is a studio/performance oriented course. It is a continued exploration of Interactive Media, Software and Programming with emphasis on the creative and experimental use of available tools. Interactive time based media will be the focus of the class.

We will use the HTML5 canvas object and Javascript, referencing to the Mozilla developers site focusing on the canvas object / to define interactivity, and the basics of advanced programming, as well as experiment with digital time based tools.

Process and Strategy

The class will be divided into two distinct areas.The first area will be devoted to exploring and understanding the logic of programming using Javascript with specific visual and experimental results in the canvas object. The second one will be devoted to exploring interactive production using advanced Object Oriented Programming in Javascript.

Readings / assignments / requirements

It is ideal for you to own the Adobe Creative Cloud • in Particular Photoshop, Illustrator, Dreamweaver, InDesign, Premiere and After Effects • in case you are a commuter or you prefer working at home. You can get student discount prices at http://ut.onthehub.com -
register using your UT email address to create a username and password.


TUTORIALS

reference / HTML5

html5canvastutorials.com

diveintohtml5.info/canvas.html

html5doctor.com/an-introduction-to-the-canvas-2d-api/

thenewboston.org/tutorials.php

SVG TUTORIALS

tutorialspoint.com/html5/html5_svg.htm

adobe.com/inspire/2013/09/exporting-svg-illustrator.html

REFERENCE / EXAMPLES

html5examples.info

Mozilla Developers Site

Safari canvas reference

MSN canvas reference

Interactive canvas

html5gamedevelopment.com/html5-demos

html5rocks.com/en/mobile/optimization-and-performance/

Javascript touch events / touch events

WEBGL / THREE.JS

Getting started with WebGL

WebGL - 3D for the web

Exporting WebGL from Maya using three.js - look at chameleon example

HTML5 and WEBGL examples

CODING TUTORIALS

JAVASCRIPT: blog.udemy.com/javascript-tutorial-learn-the-basics

udemy.com

codecademy.com

w3schools.com -> HTML5 + Javascript + JQuery + JSON

PROCESSING JS

processingjs.org

VIDEO/AUDIO/Web Conferencing WEBRTC on all browsers BUT Safari

github.com/webrtc/samples


WEB FONTS

google.com/fonts
edgewebfonts.adobe.com/fonts
fontsquirrel.com

EDITORS

TextWrangler for MAC // BOTH KomodoEdit

ILLUSTRATOR TO CANVAS // TOOLS

http://blog.mikeswanson.com/ai2canvas
Tutorials

Janvas


SAMPLE CODES

//////////////////////////////////////////////////
// DECLARE requestAnimFrame   

var fps = 30;

window.requestAnimFrame = (function(callback) {
        return 	window.requestAnimFrame 			|| 
		        	window.webkitRequestAnimFrame 	|| 
					window.mozRequestAnimFrame 		|| 
					window.oRequestAnimFrame 		|| 
					window.msRequestAnimFrame 		||
        function(callback) {
          			window.setTimeout(callback, 1000 / fps);
        };
})();


///// CALL THE FOLLOWING FROM WITHIN THE draw() FUNCTION

requestAnimFrame( function() {
          draw();  // THIS CREATES THE ANIMATION
}); 

//////////////////////////////////////////////////    
///// MOUSE COORDINATES 

var stage, mouseX, mouseY; 

function mousePos(event) { 
  
  stage = canvas.getBoundingClientRect();
  mouseX = event.clientX - stage.left; 
  mouseY = event.clientY - stage.top;

}

<canvas id="myCanvas" onMouseMove="mousePos(event)"></canvas>

////////////////////////////////
      
      

HTML5 is constantly growing. All the information we will use is available online from diverse and informative sites. The readings are recommended, but the class is intended to teach you how to use information and examples available on the web.

You will be required to post the code, the project itself, screen shots and QT grabs of your dynamic projects -for archival purposes and future reference. You will be provided with a server space on http://art310.utarts.com so you can upload your projects. This space is only for this class, any other material will be deleted.

Make sure you check and empty your ut webmail account regularly. We will use Blackboard permanently to post the grades and to communicate.

Short readings will be distributed throughout the semester. Most of the information will be provided by the professor or will be found freely online. Critiques will frequently be initiated from various topics covered in the readings. In order to participate effectively you will need to have read the required texts and be able to articulate your responses to them within the context of class discussion and critique. We will watch plenty of excerpts from movies and documentaries during the class that will also be considered as part of the material for the class.

Use your own portable hard-drives or USB drives to store your work. Do not rely on the CASS LAB student server, it is not secure and you might lose your data. Do not test processor intensive movies off the student server, you might crash your machine. Save all the files on the desktop and at the end of the class copy them to your archiving media.

Grading 

There will be several projects throughout the course, including assignments, quizes and others. Each one of them will be a part of the final 100% of the grade with weights according to the difficulty of the project. You will find these weights on Blackboard. If necessary I will do some pop quizes, depending on the students' participation and motivation, and depending on how certain classes work, I might add an extra work not listed in the syllabus or even skip an assignment. The grades posted on BlackBoard may not reflect the final grade on SpartanWeb.

Possible last-minute changes

Although unlikely, it is possible that last-minute changes might be made to the dates for all assignments or class meetings, excepting only the final exam. In this unlikely event, I'll make all possible efforts to inform students with sufficient lead-time.

I reserve the right to modify this syllabus for any reason at any time.