Embed Size (px)
Citation preview
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.• http://faculty.purchase.edu/jeanine.meyer/
html5workshop/wkshopsmile.html • http://faculty.purchase.edu/jeanine.meyer/
html5workshop/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• http://faculty.purchase.edu/jeanine.meyer/
html5workshop/wkshopdrawingstars.html
opening screen
after 1st press of button
after next press
after next press
show body first<body onLoad="init();"><canvas id="canvas" width="600" height="400">Your browser doesn't support the HTML5 element
canvas.</canvas>
<button onClick="makestar();">Make Star </button>
</body></html>
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 successionvar 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 successionvar 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 successionvar 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 successionvar 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 successionvar 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
http://faculty.purchase.edu/jeanine.meyer/html5/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:http://faculty.purchase.edu/jeanine.meyer/
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 <br/> or <p> and </p> OR you use <article> 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)
