Santiago Echeverry

secheverry at || 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


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.


reference / HTML5



Mozilla Developers Site

Safari canvas reference

MSN canvas reference

Interactive canvas

Javascript touch events / touch events


Getting started with WebGL

WebGL - 3D for the web

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

HTML5 and WEBGL examples


-> HTML5 + Javascript + JQuery + JSON


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



Visual Studio Code




// 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);


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


var stage, mouseX, mouseY; 

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


<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 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.


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.

Ashley, Austin DIG SR
Belcher, John DIG SR
Curtis, Rachel NMP SR
Dunn, Maxie-Lew NMP JR
Ellis, Joey NMP SR
Ferreira, Andrew DIG JR
Fontano, Erik DIG JR
Keenan, Eamonn DIG SR
Laite, Samantha GD SR
Lowell, Kylie DIG SR
Montello, Adam DIG SR
Phipps, Kerian DIG SR
Roque, Gabriella NMP JR
Ryan, James NMP JR
Staats, Sara MKT SR
Whitesel, Taylor NMP JR