MIT IAP, January 10-14, 2011

Overview

Name of the class: IAP HTML5 Game Programming Course and Competition
Coursework Component: 5 sessions, 2 hours each (total instruction time 10 hours)
Schedule, everyday 11.30-1.30pm EST
Room is 32-141 (32 Vassar St, room #141 (first floor) (http://whereis.mit.edu/)
Onsite support:
- mitcho (Michael Erlewine), mitcho@mit.edu
- office: 32-D866, Mondays during IAP or by appointment
External support on IRC #mitiap2011
Here's a list of some IRC clients depending on your OS.
Emergency line for the Stata Center: 617-253-7669 || Please call on Wednesday to make sure the center is open!
Emergency line for the Stata Center: 617-253-7669 || Please call on Wednesday to make sure the center is open!

Lecturer: Dave Herman
Contact info:
- Email: dherman@mozilla.com
- IRC: dherman -- available on irc.mozilla.org at #jslang and #jsapi
- Twitter: @littlecalculist
Topics covered: Foundations of JavaScript programming in the browser. Language syntax and concepts. Browser environment, events. (object and prototype, scope and global object, closures, events and call backs, numbers, XHR)
Resources:
- https://developer.mozilla.org/en/JavaScript/Guide
- https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest //documentation on XHR, which Dave will be talking a bit during his lecture (Students may or may not need it for their games, but it's a good way to learn about using callbacks for event handling without having to learn all the complications of DOM events.)
- http://www.squarefree.com/shell/shell.html //Students can use it to test out JS commands in any browser. But the more recommended way would be to use the built-in developer tools of their browser (FF4 console or Firebug, Chrome console, Safari console).

Lecturer: Boris Zbarsky
Contact info
- Email: bzbarsky@mit.edu
- IRC: bz -- available on irc.mozilla.org at #developers
Topics covered: The Document Object Model (DOM), the canvas element, resource loading (graphics)
Resources:
- Presentation: http://web.mit.edu/bzbarsky/www/IAP-2011-DOM-talk/intro.html
- HTML5 (draft): http://www.whatwg.org/specs/web-apps/current-work/multipage/
- XMLHttpRequest (close to final): http://www.w3.org/TR/XMLHttpRequest/
- XMLHttpRequest extensions (draft): http://dev.w3.org/2006/webapi/XMLHttpRequest-2/
- CORS (for cross-site XMLHttpRequest, draft): http://www.w3.org/TR/cors/
- CSS 2.1 (close to final): http://www.w3.org/TR/CSS21/
- Canvas (mix of close to final and draft): http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
- DOM Core: http://www.w3.org/TR/DOM-Level-3-Core/core.html
- DOM Events: http://www.w3.org/TR/DOM-Level-2-Events/events.html

Lecturers: Benoit Jacob and Andor Salga
Contact info (Benoit)
- Email: bjacob@mozilla.com
- IRC: bjacob -- available on irc.mozilla.org at #developers #gfx #audio
Contact info (Andor)
- Email: andor.salga@senecac.on.ca
- IRC: nick:asalga -- available on irc.mozilla.org on #Seneca #Processing.js and #C3DL Also avaiable on irc.freenode.net on #WebGL
- Twitter: @asalga
- Wordpress: http://asalga.wordpress.com
Topics covered: Introduction to 3D graphics with OpenGL/WebGL. Basics of shader programming
Useful links
- WebGL specification: https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html
- WebGL tutorials: http://www.learningWebGL.com
- http://www.doesmybrowsersupportwebgl.com/
- http://learningwebgl.com/lessons/
Further links
- WebGL point cloud renderer: http://zenit.senecac.on.ca/wiki/index.php/XB_PointStream
- Data visualizer library which uses WebGL: www.processingjs.org
- WebGL library: www.c3dl.org

Lecturer: Pascal Rettig from Cykod
Topics covered: Offline web applications, local storage, debugging and optimizing JS performance. Also to be discussed: server side Javascript (node.js) and Web sockets.
Resources:
- Offline storage - http://diveintohtml5.org/offline.html
- Local storage - http://diveintohtml5.org/storage.html
- JS Debugging /w Firebug - http://getfirebug.com/javascript
- Node.js - http://nodejs.org/
- Node Package Manager - http://npmjs.org/
- Node Realtime Sockets Module - http://socket.io/

After the course work component, students will compete in a HTML5 game programming competition. The competition will run for 4 weeks. Mozilla will host a discussion forum for students to communicate and collaborate and ask and answer questions amongst each other. The goal is for students to implement an interesting HTML5 game or visual demonstration. Whether its a create re-implementation of existing games (HTML5 pong?), or a full fledge 3D game, anything goes.
Prize: The winning team (up to 4 team members max) will come to Mountain View, spend a w/e in SF. During their time at Mozila, the team will present its demo/game and spend some time with Brendan Eich.