To Do This Week:
Map Project DUE Monday March 20th
Class
Overview: API – Application Programming Interface – & JavasScript & JSON
View Map Projects
Map Projects List
Audio/Video Projects DUE Monday March 27th
Upload in a folder “av”
Audio/Video Projects List
Upcoming Projects:
Canvas Project (Game): 5% Due March 29thP5JS Animation Project (Generative Art): 5% Due April 5thWeather App (API & Canvas): 5% Due April 12th
HTML5 Canvas Project (Game) – 5%
Due March 29th
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:
- your effort
- the clarity of your idea executed in JavaScript steps
- your process of creative discovery
- the usability of your game – provide instructions
Your project must have the following:
- a title and author name visible
- well-commented code to make sure you understand what the script is doing at each stage
- in the the <head>, inside HTML comments, you have a statement that includes resources you used to build the game.
- the work is uploaded to the server as an index.html inside a folder called “canvas-game”
Intro to Canvas:
- Canvas Element
Javascript Drawing and Animation - Canvas reference
- start a drawing:beginPath();
- drawing a line:lineTo();
- drawing a circle: arc();
Create a Drawing/Animation with Canvas:
Copy into a new file the source code from this starter file: canvas face. With your pod, change the JavaScript to create your own face animation. See below for some examples from past students.
Here is a Canvas clock – from w3schools. What are the steps?
HTML5 Games:
You can, if you want, explore W3schools HTML5 Games Demo to build your own game using Canvas. Try to understand how objects are generated and then animated with speed and gravity properties. Best to start by copying the code or using ChatGPT for an example at playing around with values. Then you can make changes for your own game.
Previous Student Canvas Games
Escape the Room
Trip Switch
Cube Game
Space Jam
Student Games:
- Art Games (Daniel Spung): example1, example2
- hstassens15
- ggomez14
- game: matching values Evan Torres
- geolocation: John Alexander
- game : inventory Daniel Spung
- game: inventory 2 Paul Meiners
- bedbugs-hslocum– Holly Slocum
- canvas story – Erik Messenger
Other Resources:
- Web Storage
- Drag and Drop
- JavaScript Progress Bar
- Custom Range Sliders
- About requestAnimationFramerate
- sketch.js : finger drawing on canvas
- three.js – library works with WebGL, a Javascript API for 3D animation
In-class Exercise:
Go over a canvas game example from w3shools.
Play with values, what can you change?