Embed Size (px)
Citation preview
HTML5 Examplesdrawing on canvas (paths, text, video), mouse events, timed events, objects,
semantic elements, etc.
Jeanine MeyerPurchase College/SUNY
Author: The Essential Guide to HTML5
Overview• Background• Show and explain 4 examples, focus on
o drawing paths (lines & arcs), rectangles & text on canvaso semantic elements o use of CSS for font families, decoration, color of texto translate, scale coordinate systemo object oriented programming to produce stub application
for dragging of 'objects' using mouse eventso change of cursor icono video elements and drawing video on canvaso timed eventso structured way for sequence of drawings
• Q & A
Background• HTML5 is next new thing...still in development
o canvas, video, semantic elements, events, etc.• Browser support mixed
o Firefox, Safari, Chrome, Opera ahead of IEo Firefox NOT always ahead, but it does have Error
Console• Formal W3C document is not easy to decipher...but/and
many on-line sources, including you!
• My background: early career at IBM Research in robotics and manufacturing, now in academia, teaching math/cs, new media and also general education courses. I like programming!
Examples• HTML5 logo, with scaling and use of CSS formatted footer
http://faculty.purchase.edu/jeanine.meyer/html5/html5logoscale.html• Application stub: drawing rectangles and ovals, drag and
drop http://faculty.purchase.edu/jeanine.meyer/html5/build1.html• Bouncing video masked to be a circle
http://faculty.purchase.edu/jeanine.meyer/html5/videobounce.html • Origami
http://faculty.purchase.edu/jeanine.meyer/html5/origamifrog.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5/origamifish.html
NOTE on these and other HTML5 examplesYou always can look at the source using the View source option in the browser.
Complex examples may have separate and multiple files, especially for CSS and JavaScript.
Most people are open to comments. I sometimes write tutorials...
HTML5 logo • use beginPath, moveTo, lineTo, fill to draw shield
• built on other work (they had the x,y positions for the shield, but no HTML) and this motivated a use of translate
• added slider (new input type) -- use of another coordinate transformation: scale
• used drawing text on canvas and [regular] text
• used article and footer (CSS formatting)
Organization of dologo
text (HTML)
5 sided orange background right hand, lighter orange part of background light gray, left hand side part of the 5: 2 paths white, right hand side of the 5: 2 paths
Code snippets for logo<input id="slide" type="range" min="0" max="100" value="100" onChange="changescale(this.value)" step="10"/> function changescale(val) {factorvalue = val / 100;dologo(); } function dologo() { var offsety = 80 ; ctx.restore(); ctx.save(); ctx.clearRect(0,0,600,400); ctx.scale(factorvalue,factorvalue); ctx.fillText("HTML", 31,60); ctx.translate(0,offsety); ...
dologo, cont.
ctx.fillStyle = "#E34C26"; // given in W3C specctx.beginPath(); ctx.moveTo(39, 250); ctx.lineTo(17, 0); ctx.lineTo(262, 0); ctx.lineTo(239, 250); ctx.lineTo(139, 278); ctx.closePath(); ctx.fill();
....
CSS for footer, article<style> footer {display:block; border-top: 1px solid orange; margin: 10px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; } article {display:block; font-family: Georgia, "Times New Roman", Times, serif; margin: 5px;} </style>
NOTES The border-top puts an orange line before footer. The two font-family directives provide back-up. The display:block directives provide the line breaks.
Building and moving shapes (stub for application)• Use object style of
programming + display listo Rect and Ovalo constructor, draw,
move, check-for-collision methods
• Using mouse events requires access to accurate mouse position
• Changed cursor icon
init (invoked by onLoad in <body> )
function init() { canvas1 = document.getElementById('canvas'); canvas1.onmousedown = function () { return false; }; canvas1.addEventListener('mousedown',startdragging,false); ctx = canvas1.getContext("2d");
var r1 = new Rect(10,10,100,200,"red"); var s1 = new Rect(30,200, 50,50,"blue"); var oval1 = new Oval(200,350,60,2.0,1.0, "teal"); var cir1 = new Oval(300,200,100,1.0,1.0,"brown");
stuff.push(r1); stuff.push(s1); stuff.push(oval1); stuff.push(cir1); drawstuff(); }
drawstuff function
function drawstuff() { ctx.clearRect(0,0,600,500); for (var i=0;i<stuff.length;i++) { stuff[i].draw(); } }
Code expects that each element of step will have a draw method...
Constructor function for ovals
function Oval(x,y,r,hor,ver,c) { this.x = x; this.y = y; this.r = r; this.hor = hor; this.ver = ver; this.move = move; this.draw = drawoval; this.color = c; this.overcheck = checkoval;}
draw method for oval shapesfunction drawoval() { ctx.save(); ctx.translate(this.x,this.y); ctx.scale(this.hor,this.ver); ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(0,0,this.r,0,2*Math.PI,true); ctx.closePath(); ctx.fill(); ctx.restore(); }
definition of [what will be] overcheck methodfunction checkoval(mx,my) {//computes positions in translated &scaled coordinate systemvar x1 = 0; //this is this.x - this.xvar y1 = 0;var x2 = (mx-this.x)/this.hor;var y2 = (my-this.y)/this.ver;if (distsq(x1,y1,x2,y2)<=(this.r*this.r) ){ return true} else { return false }}
Video bouncing in a box• Current situation for native
support of video requires 3 video files for distinct codecs
• Use setIntervalo video captured at
different frames• drawImage to put video
on canvas with a shape (filled in paths) moving in sync to be a mask
• mask with hole works in Firefox, Opera but need two-paths for Chrome
see props
setup including animaitonfunction init(){ ctx = document.getElementById('canvas').getContext('2d'); v = document.getElementById("vid"); v.addEventListener("ended",restart,false); // because loop doesn't work on FF
v.width = v.videoWidth/3; v.height = v.videoHeight/3; videow = v.width; videoh = v.height; maskrad = .4*Math.min(videow,videoh); ctx.lineWidth = ballrad; ctx.strokeStyle ="rgb(200,0,50)"; ctx.fillStyle="white"; v.play(); setInterval(drawscene,50); }
Code/markup for videoIn body element<video id="vid" loop="loop" preload="auto"> <source src="joshuahomerun.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="joshuahomerun.webmvp8.webm" type='video/webm; codec="vp8, vorbis"'> <source src="joshuahomerun.theora.ogv" type='video/ogg; codecs="theora, vorbis"'> Your browser does not accept the video tag. </video>
In script element, in init function...v = document.getElementById("vid");
In script element, in drawscene, strategy is erase canvas draw video ctx.drawImage(v,ballx+boxx, bally+box, v.width,v.height); draw (white) filled in path to be the mask
ctx.beginPath(); ctx.moveTo(ballx+boxx,bally+boxy); ctx.lineTo(ballx+boxx+v.width,bally+boxy); ctx.lineTo(ballx+boxx+v.width,bally+boxy+.5*v.height); ctx.lineTo(ballx+boxx+.5*v.width+maskrad, bally+boxy+.5*v.height); ctx.arc(ballx+boxx+.5*v.width,bally+boxy+.5*v.height,maskrad,0, Math.PI,true); ctx.lineTo(ballx+boxx,bally+boxy+.5*v.height); ctx.lineTo(ballx+boxx,bally+boxy); ctx.fill(); ctx.moveTo(ballx+boxx,bally+boxy+.5*v.height); ctx.lineTo(ballx+boxx,bally+boxy+v.height); ctx.lineTo(ballx+boxx+v.width,bally+boxy+v.height); ctx.lineTo(ballx+boxx+v.width,bally+boxy+.5*v.height); ctx.lineTo(ballx+boxx+.5*v.width+maskrad,bally+boxy+.5*v.height); ctx.arc(ballx+boxx+.5*v.width,bally+boxy+.5*v.height,maskrad, 0,Math.PI,false); ctx.lineTo(ballx+boxx,bally+boxy+.5*v.height); ctx.fill();
Origami
• General system for origami directions o mountain fold lineo valley fold lineo other utility functions
• Use array to hold steps, a step being a function that draws and a text string
• Geometry, trig & algebra to determine coordinates
• Use mainly paths on canvas plus a photograph & videos
• My hobby but/and great example of mathematics AND programming!
Organize steps
• Use steps array• Each element is itself an array, consisting of the name of a
function that produces the drawing (or the photo or the video) and a piece of text.
var steps = [ [directions,"Diagram conventions"], [showkami,"Make quarter turn."], [diamond1,"Fold top point to bottom point."], [triangleM,"Divide line into thirds and make valley folds and unfold "], [thirds,"Fold in half to the left."], ...
• I developed these step by step, including going back and inserting new steps• demonstration of iterative design.
thirds()
function thirds() { triangle(); skinnyline(ex,ey,gx,gy); skinnyline(fx,fy,hx,hy); curvedarrow(cx,cy,ax,ay,0,-20); valley(jx,jy,dx,dy,"orange"); }
The donext (step) function
function donext() { if (nextstep>=steps.length) { nextstep=steps.length-1; } v.pause(); v.style.display = "none"; //erases last video played canvas1.height = 480; //restore height ctx.clearRect(0,0,cwidth,cheight); ctx.lineWidth = origwidth; steps[nextstep][0](); //invokes the function ta.innerHTML = steps[nextstep][1]; nextstep++;}
Q & ADiscussion
For JavaScript, Flash ActionScript, Processing, php, etc.: examples, tutorials, workshop charts, lecture charts & other materials for courses, books & papers, activities (e.g., origami), go to http://faculty.purchase.edu/jeanine.meyer
Contact (comments, questions, suggestions, your examples):
Thank you!
