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.

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

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

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();

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

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)

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

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

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 http://faculty.purchase.edu/jeanine.meyer/html5/drawpolygonfromdata.html

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)

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?

Examples http://faculty.purchase.edu/jeanine.meyer/html5/origamifrog.html http://faculty.purchase.edu/jeanine.meyer/html5/origamifish.html

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

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 http://faculty.purchase.edu/jeanine.meyer/origami/origamihtml5a.doc http://faculty.purchase.edu/jeanine.meyer/origami/origamihtml5.doc

Revolving 'lazy Susan' Request from Aviva http://faculty.purchase.edu/jeanine.meyer/html5/teapartytest.html 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…

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: http://faculty.purchase.edu/jeanine.meyer/html5/first.html Video and image: http://faculty.purchase.edu/jeanine.meyer/html5/firstvideo.html

Drawing image on path … change direction of image http://faculty.purchase.edu/jeanine.meyer/html5/drawingrev.html 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

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

Fade in and Fade out ctx.globalAlpha http://faculty.purchase.edu/jeanine.meyer/html5/fading.html

Think about what you want to do You can use parts of my projects, but add your own ideas http://faculty.purchase.edu/jeanine.meyer/morehtml5examples.html 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.

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!