Programming Games Show project. Refresher on coordinates. Scaling, translation. HTML5 logo. Refresher on animation. Bouncing ball. Homework: Do your own bouncing something.

Midterm project Due today! Will accept next class and then we move on! There will be another chance to do a project totally of your own design.

Coordinates Recall for canvas or for screen horizontal values: from the left vertical values: from the top pixel unit: very small!

Canvas path Set variable (any name your want, I chose ctx) to be ctx = document.getElementById("canvas").getContext ('2d'); Paths used to be drawn in outline (stroke) or filled in (fill) ctx.moveTo(x,y) moves to position ctx.lineTo(x,y) sets up line drawn ctx.arc(center_x, center_y, radius, starting_angle, ending_angle, true or false); Angles given in radians, NOT degrees. 90 degrees is Math.PI/2. A circle is 2*Math.PI.

Note Drawing a complete circle is easy: ctx.arc(centerx,centery,radius,0,2*Math.PI, true); OR ctx.arc(centerx,centery,radius,0,2*Math.PI, false); OR ???

Paths ctx.beginPath(); sequence of moveTo, lineTo, arc statements ctx.closePath(); NOTHING happens until: ctx.fill(); and/or ctx.stroke();

HTML5 logo Example of drawing on canvas input type="range" –May appear as text in older browsers Called graceful degradation changing coordinate system using translate and scale semantic tags html5/html5logoscale.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5/html5logoscale.html

range input AKA slider Scale percentage: Does form validation. Note the event handler

event handler function changescale(val) { factorvalue = val / 100; dologo(); } So…. You can guess that dologo uses the variable factorvalue in its code and you would be correct!

Note This is yet another way to specify an event (changing the slider) and the event handler. Flash ActionScript is more consistent: –All events specified using addEventListener

Shield

Transformations …. change origin of coordinate system or scale of coordinate system or both. –ctx.translate(x,y); –ctx.scale(xfactor, yfactor); ctx.save(); saves current system so that your code can ctx.restore(); This is done using a stack –last in, first out –restore pops the stack

Use of transformations for logo use to change scale based on input use translate to write out HTML and then 'move down' and draw the logo.

Recall on animation Produce a succession of pictures. Produced in my virtual dog, a succession of times to make decisions on the state of the dog. Use setInterval(what to do, length of interval in milliseconds) NEW (future?) alternative: window.requestAnimationFrame –look up and try. Standard seems to be unsettled. –fixed timed period of 60pfs Bouncing ball (or anything similar): re-draw canvas at the intervals –erase using clearRect( ) –draw

Tea party [Not political reference, but reference to html5/teapartytest.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5/teapartytest.html Animation (appearance of life/motion) done by continually erasing and re- drawing images on a canvas. Some images are positioned off of the canvas: not an error (in this case)

Performance issues duty cycle –Think of night watchman. Are there too many tasks to do before doing next round? battery life One approach –use second (alternate/buffer/prerender) canvas –Look up and post on moodle.

Bouncing ball Circle: html5/bouncingballinputs.html html5/bouncingballinputs.html Image: html5/bouncingballinputsimg.html html5/bouncingballinputsimg.html

How do I/you program bouncing something? You actually know how to do this! What are the tasks (subtasks) that your code needs to do?

[sub]Tasks Set up to do the drawing at intervals of time. How? Draw at a specific place on the canvas. Do a calculation (check a condition) to determine if the ball needs to bounce, namely if it is outside the box.

Speed of ball Horizontal and vertical speed set using a form. Note: some validation is done by browser. –try putting in letters The movement of the ball is done using the variables ballvx and ballvy set (changed) if and when the form is submitted.

Study source code (can also look at chapter 3 in The Essential Guide to HTML5 book) In this example, I don’t want ball to go outside of box drawn on canvas. functions are –init: initialization, invocation set by onLoad in body –moveball: invoked by init and by action of setInterval –moveandcheck: invoked by moveball –change: invocation set by onSubmit in the form

Did I need? to extract the moveandcheck code from the moveball code? –No. However, several small functions generally works better than fewer larger functions.

Drawn circle versus image Code is nearly the same. Drawing the image uses: var img = new Image(); img.src = "pearl.jpg"; //use your image …. In moveball function: ctx.drawImage(img,ballx-ballrad,bally- ballrad,2*ballrad,2*ballrad) NOTE: image needs to be positioned at its upper left corner, not the center of the ball.

Repeat: Events and Event Handling You (your code) sets up an event for which you specify an event handler. HTML & JavaScript does this in multiple ways! –HTML tags contain onLoad, onClick, onSubmit, onChange, … –JavaScript has setInterval and setTimeout –JavaScript has object.addEventListener Note: other languages, for example Flash ActionScript, has most consistent approach balltimer.addEventListener(TIMER,…)

Advice Mentally step back and think about concepts… –including realizing when things are inconsistent This will enable you to build your own projects as opposed to just remembering specific coding.

Classwork/homework Stop everything else and work on a final project. It can be a more elaborate virtual something or some elaboration on past work. –Post proposal!!! Finish your project. Last date is next class. Today's assignment is bouncing something. It can be a decorated drawn object and/or an image. Make other changes as you wish.