1. Programming Games Show your simple video. More video examples. Audio. Classwork/Homework: Produce more complex video program.

2. Bouncing video Bouncing video element: http://faculty.purchase.edu/jeanine.meyer/ html5/videobounceE.html http://faculty.purchase.edu/jeanine.meyer/ html5/videobounceE.html Draws mask on canvas –Need to make sure canvas is on top. –Alternative is to modify video element using CSS.

3. Audio situation similar to video: no one format recognized by all browsers. –mp3 and ogg

4. Simple audio Plus an image http://faculty.purchase.edu/jeanine.meyer/ html5/simpleaudio.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5/simpleaudio.html

5. rock paper scissors (with audio) animation (setInterval), addEventListener for click, calculations to determine which throw, audio object http://faculty.purchase.edu/jeanine.meyer/ html5/rockpaperscissorssounds.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5/rockpaperscissorssounds.html

6. My thinking “the computer’s” turn to emerge from screen –Implement by making an image get bigger and bigger, use setInterval for the animation Play sound corresponding to tie, or paper wafting over rock, or rock breaking scissors, or scissors cutting paper

7. But… Problem: sound played and score computed before computer move fully emerged! Solution: keep checking on size variable (a state variable) and when it is big enough –Stop animation –Play sound

8. Put audio elements in body In init function: musicelements = document.getElementsByTagName(" audio"); In other code, determine which one: musicelements[musicch].play();

9. Parallel Structures “poor man’s database” Correspondence between choices and audio elements. The beats and musicch arrays are organized by computer move and then player move –If variable compch is computer move and i is player move result = beats[compch][i];

10. Examine code http://faculty.purchase.edu/jeanine.meyer/ html5/rockpaperscissorssounds.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5/rockpaperscissorssounds.html

11. Other Bouncing ball video http://faculty.purchase.edu/jeanine.meyer/ html5/videobounce.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5/videobounce.html Draws a frame from the video on the canvas Draws mask on canvas

12. jigsaw http://faculty.purchase.edu/jeanine.meyer/ html5/jigsaw/jigsawdance.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5/jigsaw/jigsawdance.html Works on iPhone and iPad –Older iOS required user to click to start video. Why do you think Apple did that? –Newer iOS does not require it. Works on Android

13. Critical requirements for jigsaw Acquire video clip Acquire first frame as image break up into pieces and record positions of pieces –Program needs to "know" the proper position. –NOTE: checking is done using a tolerance value. Program set up of event handling for mouse dragging AND for touch events Program moving (dragging) pieces around –does not use the new drag and drop features. Uses mouse down, mouse move, and mouse up and touch equivalents. Program checking if jigsaw is (close enough) complete Program playing of video

14. Note on checking in jigsaw “Close enough”, aka tolerance, aka margin of error, etc. is typical of games and other applications. We cannot expect players/users to position pieces precisely. –Precision can be factor defining level of game. Note: my jigsaw does allow completed puzzle to be anywhere in the window.

15. Execution time … when the document has been loaded and any JavaScript in the script element is running. Development time: when you are creating the program. Note: typically, the HTML document, including everything in the body element is created by you during development time and built when the document is loaded. It is possible to create html elements entirely by coding.

16. Jigsaw puzzle pieces Each piece is HTML markup created dynamically (during execution time). s = document.createElement('piece'); s.innerHTML = (" "); document.body.appendChild(s); thingelem = document.getElementById(uniqueid); x = piecesx[i] +100; y = piecesy[i] + 100; thingelem.style.top = String(y)+"px"; thingelem.style.left = String(x)+"px";

17. Origami directions http://faculty.purchase.edu/jeanine.meyer/ html5/origamifish.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5/origamifish.html Each of the steps is a function. Some functions draw on the canvas; two of the functions play video.

18. Aside I made decision on when to use –line drawing –Photograph –Video Gave up consistency for … better instruction What do you think?

19. Collage example Example manipulates video by extracting frames and drawing each on canvas over and over… http://faculty.purchase.edu/jeanine.meyer/ html5/collagebase.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5/collagebase.html Note use of object-oriented programming

20. Other videos Re-positions (and keeps re-positioning) a video element along a path http://faculty.purchase.edu/jeanine.meyer/html 5/movingpictures.html Plays sections of a video clip http://faculty.purchase.edu/jeanine.meyer/ht ml5/booktrip1.html http://faculty.purchase.edu/jeanine.meyer/ht ml5/booktrip1.html

21. Preview Next topic is Google Maps API –Bring Google Maps functionality into YOUR program. –The Application Programming Interface is a set of objects that you/we can use, including map, marker, latlng, others. Note: I will show an example using Maps and video and audio.

22. Pop quiz Go online and find out how to play a video with no sound and play audio with sound. Write the answer AND the website(s) you used.

23. Classwork / homework More complex video example Consider other posted examples –Reward for play Will show Google Maps and video Ask me for others! Enjoy the break!