WEEK 11: Game Project: Canvas II
(March 27 & 29)

To Do This Week:

Audio/Video Projects Due

Game Project –  DUE Wednesday April 5th


Class

Overview: API  – Application Programming Interface – & JavasScript & JSON, interaction design, UX
View Map Projects
Map Projects List
mapbox-markers-example 

View Audio/Video Projects
Audio/Video Projects List
In this project you are to use JavaScript to manipulate audio and/or video elements on the page…. Your JavaScript must have detailed comments at each stage of the script describing what the code is doing.

Overview Canvas and JS

Workshop Canvas Game
Canvas-Game List

Upcoming Projects:

  • Canvas Project (Game): 10% Due April 5th
  • P5JS Animation Project (Generative Art): 5% Due April 5th
  • Weather App (API & Canvas): 5% Due April 12th

HTML5 Canvas Project (Game) – 5%
Due April 5th
This project is intended to loosen you up with creative applications of JavaScript. Using techniques for generative or interactive animation using the Canvas element, you are to follow your own intuition and creative ideas. Don’t worry about something polished or even practical. The idea is to push your current knowledge of JavaScript, with ChatGPT as a code assistant, towards building an innovative HTML5 Canvas game. The crazier your approach, the better!

This and all class projects can be the sketch of an idea that you develop in the Final Project. The important thing for this project is to have a working script and a solid proof of concept for further development.

You will be graded on:

  1. your effort
  2. the clarity of your idea executed in JavaScript steps
  3. your process of creative discovery
  4. the usability of your game – provide instructions

Your project must have the following:

  1. a title and author name visible
  2. well-commented code to make sure you understand what the script is doing at each stage
  3. in the the <head>, inside HTML comments, you have a statement that includes resources you used to build the game. 
  4. the work is uploaded to the server as an index.html inside a folder called “canvas-game”

Canvas-Game List

Intro to Canvas:

Create a Drawing/Animation with Canvas:

Canvas Game example


Processing Overview
P5js (Processing for JavaScript) is a library, like jQuery, that makes it easy to create complex drawing and animations using Canvas and additional built-in Processing methods. Below are resources and a starter template (download the zip) which includes the p5js file. Look at theses resources in order to see how p5js works. Have fun.

p5js.org/ : processing > javascript for fun and art, creative programming

P5js

  1. my p5js starter template  | ZIP folder
  2. p5js examples
  3. p5js get started  | p5js overview
  4. p5js reference
  5. p5js online editor
  6. p5js video tutorial