Programming games More drawing. Text. Radian measure. Faces. Homework: Do your own drawings. Create index.html file. Upload work.

Next drawing Paths created with arcs and line segments Arcs are portions of circles, created using radians in place of degrees. Math.PI is available for use. A complete circle can be drawn from 0 to 2*Math.PI or –Math.PI to Math.PI, etc. Arcs can be stroke or fill. workshop/wkshopsmile.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5 workshop/wkshopsmile.html workshop/wkshopfrown.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5 workshop/wkshopfrown.html

What is? Since 2*PI is a whole circle, a half circle is? –So this means 180 degrees is ? What is 45 degrees? What is 30 degrees?

Angles 0 (=2*PI) PI/4 PI/2 PI PI*3/2 true means counter- clockwise!.80*PI.20 * PI

arcs ctx.arc (x of center, y of center, radius, starting angle, finishing angle, true for counter-clockwise) No drawing (ink) at the center! This is important when connecting arcs and lines. EXPERIMENT

4 distinct paths, each made up of 1 arc. Default, "red" and "brown"

Strategy Use variables with some variable values defined in terms of others. Circle face and two eyes. Smile is (partial) arc. Brown eyes and red smile. body element same as before. –You can add the code for this to your rectangles drawing.

var ctx; var headx = 100; //center of face x coord. var heady = 200; // center of face y coord. var headrad = 50; //radius of face var smileoffsetx=0; //smile center x is same as face var smileoffsety = 15; //smile center y further down var smilerad=20; // smile radius var eyeoffsety = -10; //eyes up from center var lefteyeoffsetx = -15; //left eye var righteyeoffsetx = -lefteyeoffsetx; //right var eyerad = 8; // eye radius

function init() { ctx = document.getElementById('canvas').getContext(' 2d'); ctx.lineWidth = 5; ctx.beginPath(); ctx.arc(headx,heady,headrad,0,2*Math.PI,true); ctx.closePath(); ctx.stroke(); …

ctx.strokeStyle = "red"; ctx.beginPath(); ctx.arc(headx+smileoffsetx,heady+smileoffsety, smilerad,.80*Math.PI,.20*Math.PI,true); ctx.stroke(); ctx.fillStyle = "brown"; ctx.beginPath(); ctx.arc(headx+lefteyeoffsetx,heady+eyeoffsety,eyerad, 0,2*Math.PI,true); ctx.fill(); ctx.beginPath(); ctx.arc(headx+righteyeoffsetx,heady+eyeoffsety,eyerad, 0,2*Math.PI,true); ctx.fill(); }

Comments The fill and stroke calls close the path. Also, can close a path with closePath() Using variables makes code more flexible and easier to see relationships. GO: draw arcs, changing colors, sizes, etc. NOTE: can draw non-circular ovals using transformations: scale. Check out the hangman game in book!

Next drawing: star For drawing lines (and arcs), think of moving a pencil versus drawing (preparing to draw) a line segment –nothing is drawn until the stroke or fill Use an array with coordinates for 5 points Use an array to hold names of 3 colors button element html5workshop/wkshopdrawingstars.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5workshop/wkshopdrawingstars.html

opening screen

after 1 st press of button

after next press

show body first Your browser doesn't support the HTML5 element canvas. Make Star

variables (in script element) var ctx; var pts=[//5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0;// points to next color

variables (in script element) var ctx; var pts=[//5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0;// points to next color

variables (in script element) var ctx; var pts=[//5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0;// points to next color

variables (in script element) var ctx; var pts=[//5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0;// points to next color

variables (in script element) var ctx; var pts=[//5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0;// points to next color

function init() { ctx = document.getElementById('canvas').getContext('2d'); } function makestar() { ctx.clearRect(0,0,600,400); ctx.fillStyle=colors[c]; c = c +1; // can reduce to one line using colors[c++] c = (c<3)?c:0; ctx.beginPath(); ctx.moveTo(pts[0][0],pts[0][1]); ctx.lineTo(pts[3][0],pts[3][1]); ctx.lineTo(pts[1][0],pts[1][1]); ctx.lineTo(pts[4][0],pts[4][1]); ctx.lineTo(pts[2][0],pts[2][1]); ctx.lineTo(pts[0][0],pts[0][1]); ctx.stroke(); //outline (necessary for white star! ctx.fill(); }

Images The drawImage method ctx.drawImage(head, x, y, w, h) draws an Image object at an x, y, location with a width of w and a height of h. See ml5/alternativecointoss.html

Event: clicking on canvas The coin toss positions the coin face at the mouse cursor. How???? set up event handling for the click AND extract / modify mouse positions. –requires browser-specific code –need to adjust because I want the coin face to be centered at the mouse cursor and NOT have the upper-left corner at the mouse cursor. Read (study) the tutorial: games/alternativecointoss.doc

Start of idea Alternative coin toss shows how to do something at a position calculated from where the mouse is clicked. So…we/you can write code to determine if that position is on or off or to the right or to the left or over or under some known value, and if so, do one thing; if not, do another…

Assignment Use what you have learned: drawing rectangles and paths –a path can include arcs and lines. Try stroke and fill Can include multiple moveTo –think of picking up your pen and moving to a new spot on the paper/canvas. Do alternative coin toss! –Consider adding text to do counts!

Text Text is drawn on canvas based on string of characters, and x and y coordinates. Text can be fill-ed or stroke-d. Assignment: go online and look up how to do text. Also check out alternative coin toss tutorial. –What are good keywords to put in search? –What about fonts?

index.html If you specify as an address (URL) just a folder without any files, the browser "looks" for a file named index.html –this is why faculty.purchase.edu/jeanine.meyer works! Create a file index.html to be a table of contents for your work. You can use ul and li and /ul to make a list with bullets OR ol, li, /ol, to make a numbered list OR you can use or and OR you use like in the favorite sites.

Homework Do [static] drawing(s) with rectangles, paths (arcs), images, text. –We will do transformations of the coordinate system later. This can be used to produce ovals, rotated shapes, and other things! Prepare alternative coin toss. Upload work to your website –create an index file with list of projects and upload using an ftp program –upload the html and, if required, any image files

Status and Preview Work to be completed this week: favorite sites, basic coin toss, biased coin, drawings, coin toss using canvas, index.html, all uploaded to your site Next: dice game (game of craps)