1. Catchup. Work on project.
Programming Games
Examples
Classwork/Homework: Post proposal for final project! Prepare to show “stage 1” of your project
Catchup. Work on project.

2. Refrain / more on videos
Addition of videos to collage
use animation (setInterval) to play the videos
each drawImage call just draws one frame from the video

3. Adding videos & audios
You can create the video elements dynamically (that is, using code).
Advantage of supporting separate behavior (code) and content
Disadvantage: need to write code to check for loading
Alternative: put video or audio elements in body and
CSS to hide. Code to make visible and position

4. In style element video {position: absolute; display: none;} This makes all the videos at 0,0.
In an init function, for each video: vstart = document.getElementById("start"); vstart.style.left=….; vstart.style.top=….;
Outside of any function: lastmedia = 0;
Somewhere: if (lastmedia!=0) { lastmedia.pause(); lastmedia.style.display="none"; }
vstart.style.display="block"; lastmedia = vstart; vstart.play();

5. Addition to collage
Student request for help in program that would move around videos and
make videos somewhat transparent
control volume[s]

6. Notes
Use form of drawImage that specifies the source x, y, width and height as well as the target x, y, width and height.
Because one of the videos had black borders since it was originally done in horizontal orientation
Use volume property of video element.
Because I wanted to turn off audio from one clip (dance) and feature the other (giggles)

7. Reflection on events
Events are … situations that can be tested for (aka listened for)
HTML and JavaScript has at least 3 ways to set up events and event handling
in HTML tags
using addEventListener
using setInterval and setTimeout
Google Maps API has its own events, including clicking on map
addListener

8. Reflection, continued When using an API, need to know
how to include it, possibly using a <script> element
what are the functions, objects (methods and properties)
what are the events associated with objects
For Google Maps API, need understanding of the basic units: latitude and longitude

9. Google Map: specify area
Challenge: indicate an area on the map and set up event
Needs to be on the map, not on screen or canvas, since I want it to move with the map!
Look up: google maps api version 3 polygon example
Decided to separate program from data

10. Reflection I guessed the term 'polygon'.
There are also polyline, circle, rectangle.
I could have gotten to it by looking at objects and noticing Overlay
There also are layer(s)
Google Maps API creates objects using options arrays: associative arrays (named elements, aka key/value pairs)

11. Origami applications Place to use
drawing on canvas: line drawing for origami diagrams
drawing images on canvas
invoking video clips
Challenge: how much to carry over from standard diagrams in books to new technology?

12. Examples

13. Strategy set up framework for each step and going back and forth.
steps array holds function call to do the drawing or play video plus text directions
compute positions from previous positions using algebra, geometry and trigonometry

14. Reflection
Note: framework made it [fairly] easy to build up the directions.
Created many general functions: e.g., mountain fold from ax, ay to bx, by
Most difficult thing was the arrows.
Short and long

15. Revolving 'lazy Susan' Request from Aviva
elliptical orbit makes use of parameterized equations x(t) and y(t).
Note that my code draws all 8 images though some are outside the canvas
I didn't try to write code to check for that…

16. Open close windows Pop up windows can be bad!
Request from student who wanted succession of windows, including one with audio.
Simple, with alert message:
Video and image:

17. Drawing image on path … change direction of image
My approach
Did work in PhotoShop to produce a version of the image that faced the other way
Inserted code that checked if the x coordinate of a point on the path was greater or less than the previous x

18. Alternatives
You can draw on canvas and do a scale transform to reverse the next drawing.
ctx.scale(-1,1);
Experiment.

19. Fade in and Fade out ctx.globalAlpha

20. Think about what you want to do
You can use parts of my projects, but add your own ideas
Read articles, tutorials, notes.
OR do something totally different
OR something inbetween.
This is your chance to make YOUR project and develop YOUR skills!
Don't copy.

21. Classwork/homework
[Catch up, including uploading work to site, adding to "table of contents" page, probably index.html]
[Make proposal for final project!!!]
Work on project!