Context of what we are doing. Programming games Context of what we are doing. Drawing on canvas. Homework: [Complete coin toss examples.] Do your own drawings. Upload files to website. Now that you have some experience with random (aka stochastic) processes, you can apply it everywhere. For example, on your index.html page, you can randomly choose between two different images to decorate the page. With a little more work, you can select from a list. Homework: update your work and update index.html to point to all the projects. You don't have to update all your drawings.
Recall Source of diagram: Coursera course Programming for Everyone, (Python), Charles Severance, U of Michigan We are creating programs, aka HTML documents, with JavaScript scripts, that is, software. Software resides on hardware, shown in diagram from a Coursera course on Python. The CPU may be viewed as always "asking" what to do next. Note: when we save our programs, we save to Secondary Memory, often 'the hard drive'. When we close a program (for example, a browser), our program disappears from main memory).
Computer can be connected to other computers….
Software A browser can open files on secondary storage OR go to the Internet (using the Purchase server). An editor creates and/or opens and modifies a file on the local file system. An ftp program uploads or downloads from your account on a Purchase server. Your program Browser (Firefox) Editor (Sublime) ftp (Filezilla) Operating System, including file system (Mac OS)
Correct terminology We use the Filezilla program—it runs file transfer protocol– to upload and download our work. We do NOT store our files on Filezilla. We use Google (on google.com or the google ap) to find web sites. These are mainly NOT google web sites. BUT, later in the course, we will use google sites for information on the Google Maps API.
HTML5 drawing on canvas canvas is a new[er] type of element drawing is done using what is termed the 2d context of a drawing element This requires statement done AFTER the body is loaded can draw rectangles, paths (lines and arcs), images, text, and image from a video! can also display video element directly. Note: you (your code) can draw on a canvas. There can be more than one canvas. You (your code) can also position elements on the screen, NOT on a canvas.
Screen geometry Origin is upper left corner!!!! units are pixels (very small) Sometimes the terms top or y is used for vertical vertical values increase going down the screen. Think of “from the top” Sometimes the terms left or x is used for horizontal. Think of “from the left”. horizontal values increase going to the right. Screen geometry holds for Processing and some, though not all, programming languages/environments. Some call this upside down.
Drawings Default color is black. Drawing done for stroke versus fill. Colors are set using Names: for 16 specific colors and others http://www.tutorialspoint.com/html5/html5_color_names.htm. red-green-blue values, each as numbers 0 to 255 Hexadecimal Will get to this later. Browsers may not recognize all named colors, so sometimes the red-green-blue or hexadecimal (more on this in a later class) may be better.
0,0, default color, 10 by 10, stroke 500,0,default color,20 by 20, fill 0,0, default color, 10 by 10, stroke Code on next chart rgb(200,0,100) 0,300,green,30 by 30, stroke 500,300, 50 by 50, fill
<html> <head> <title>Four rectangles</title> <!DOCTYPE html> <html> <head> <title>Four rectangles</title> <script> var ctx; function init() { ctx = document.getElementById('canvas').getContext('2d'); ctx.lineWidth = 2; ctx.strokeRect(0,0,10,10); ctx.fillRect(500,0,20,20); ctx.strokeStyle = "green"; ctx.fillStyle = "rgb(200,0,100)"; ctx.strokeRect(0,300,30,30); ctx.fillRect(500,300,50,50); } </script> </head> <body onLoad="init();"> <canvas id="canvas" width="600" height="400"> Your browser doesn't support the HTML5 element canvas.</canvas> </body> </html> The strokeStyle and the fillStyle can be set any time before a stroke or fill is made. Remember: black is the default. Squares are made using fillRect and strokeRect.
Errors JavaScript is scripting language: interpret statements at execution time. NOT compiled, with error messages Semantic errors (errors of meaning) are more difficult to detect and fix! Syntactic errors are errors of form, analogous to grammatical errors FireFox Tools/Web Developer/Web Console can help Most common: bad bracketing ctx.fillStyle("rgb(200,0,100)"); fillStyle is attribute,not method A semantic error would be drawing a blue rectangle when I meant to draw a red one or drawing something in a different place.
Example of error given in the Web Console.
Comments The drawing is done by the init function which is called when the body element is loaded. The canvas element with id="canvas" does not exist until the body is loaded. if there was more than one canvas element, we would use different names for the ids. The name init is my choice. It could be something else. Default color is black. Red green blue values each are 0 to 255 (8 bits of intensity). The strokeStyle and the fillStyle are attributes, not methods. GO: experiment with colors (by name) and rgb (note the quotation marks) and location and width and height. The init function does not have to be called init, but that is a good name.
Classwork Do this now even if you haven't finished the coin toss programs. After you get my example working, change it! Put rectangles of different sizes in different places. Change colors. Confirm that your code does what you intended. Continue to do this yourself. Notice that you can put rectangles on top of rectangles. This is like paint on a canvas. After it is done, JavaScript doesn't "know" it was done by a fillRect or strokeRect command.
More comments Drawings are …paint on the canvas. These rectangles are not objects to be moved or referenced later. Use ctx.clearRect(…) method to erase. Need to do calculations to detect hits. See memory game in book. Alternative is dynamic placement of html markup See quiz, hangman. There are many examples to examine. Go to my HTML examples from my main site.
Reading code: sketch <html> <head> <title> Stuff </title> <script> var ctx; function init() { ctx = document.getElementById('canvas').getContext('2d'); ctx.lineWidth = 10; ctx.fillStyle = "green"; ctx.fillRect(500,10,150,300); ctx.strokeStyle = "pink"; ctx.strokeRect(10,320,650,30); } </script> </head> <body onLoad="init();"> <canvas id="canvas" width="900" height="600"> Your browser doesn't support the HTML5 element canvas.</canvas> </body> </html> If we aren't in class, try to sketch this and then copy it and save as an html file and open in a browser.
Images var himg = new Image(); himg.src = "head.jpg"; var timg = new Image(); timg.src = "tail.jpg"; … ctx.drawImage(himg,100,200, 60,60); or if you set x, y, w, h variables appropriately drawImage(himg, x, y, w, h); Note: if values are off screen, JavaScript does not complain! You can draw an image on a canvas.
Notice Compare img and Image img is the html element type Image is the built-in JavaScript object In html document: Elements: <html >, <body >, <a >, <img > Elements are Singletons: <img > Proper way is <img … /> or pairs: <a…>…. </a> Elements can contain attributes <a href=….>, <img src=….>, <body onLoad=…> Elements can contain text and/or other elements html document contains head and body head contains title, style, script body contains Write in notebook
Advice: Take notes Key concepts Questions & clarifications Ideas Drawings Combining what you know Random choice Changing img src Changing input values in a form Drawing on canvas More drawing tools coming Look at my examples, others
From now on… Modify (add to) your index.html file. Using Filezilla, Upload new programs The .html file and any other files Upload modified index.html file Also, can use web space or FILE space for unfinished work
Radians … are the units used for angles Not degrees An angle is specified in terms of the portion of a circle There are 2 * pi radians in a circle Math.PI is built in constant So Math.PI corresponds to 180 degrees Math.PI / 2 corresponds to 90 degrees
Drawing arcs If ctx is the context of a canvas element, ctx.arc(x, y, r, start, end) draws arc of circle with center at x, y, radius r, starting angle start, ending angle end, and going clockwise ctx,arc(x, y, r,start, end, true) produces arc going counterclockwise
Examples Use W3C Schools: http://www.w3schools.com/tags/canvas_arc.asp
Note/ Preview You can draw ovals using transformations. There also are other ways to draw curves Including Bezier curves. Research it!
Experiment Make drawings You can stick with rectangles or add arcs Try specifying different colors ctx.fillStyle = ctx.strokeStyle =
Classwork / homework [Finish basic coin toss, biased coin, counts] Practice drawings (your drawings). Preview (more in next class): coin toss drawing images on canvas. Saving it as new file, change your basic coin toss to draw images on the canvas. consult tutorial. You can do this. You can look at other examples. Look online for help. The logic is pretty much the same. The body element needs to hold a canvas element and a button element. The script element sets the ctx variable. More coming…