290 likes | 397 Views
CS 352: Computer Graphics. Graphics Programming and HTML Canvas. How would you…. The Sierpinski Gasket. pick a random point P inside a triangle for I = 1 to n select one of the three vertices (V) at random find the point P' halfway between P and V plot P' P = P'. The business end.
E N D
CS 352: Computer Graphics Graphics Programming and HTML Canvas
The Sierpinski Gasket pick a random point P inside a triangle for I = 1 to n select one of the three vertices (V) at random find the point P' halfway between P and V plot P' P = P'
HTML Canvas • We'll use HTML's Canvas element for 2-D graphics • Programming in JavaScript • You can do your development with any (modern) browser • Turn in programs by copying them to your public_html/projn directory on udu • Supported browsers • WebKit browsers: supported • Firefox: supported (but FireFox 4 doesn't have sliders) • IE 8 or less – requires plugin • I'll check in Chrome 9
HTML, CSS • I'll assume you can copy/modify the examples as needed • If you'd like a tutorial, see w3schools.com
JavaScript • What is it? • JavaScript, ECMAScript (ISO-16262), ActionScript… • Cross-platform, object-oriented, light-weight scripting language for the Web • Dynamic typing • No disk writing, other restrictions • Powers Web apps (gmail, google maps, google docs)
Object Orientation • Built-in JavaScript objects • String, Date, Array, Boolean, Math, RegExp • DOM: document object model • Document, Anchor, Button, Table, Style, … • Your own objects: add properties or methods to any variable var sierpinski = { radius: 0.7, } sierpinski.init = function () { var returnVal = 0; . . .
Where to Put It • <head>: scripts to be executed when they are called or when an event triggers <html> <head> <script type="text/javascript”> function message() {alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()”> </body> </html>
Where to Put It • <body>: scripts to be executed when they are loaded <body> <script type="text/javascript”> document.write(“This message is from JavaScript”); </script> </body>
JavaScript Clock setInterval("settime()", 1000); function settime() { var d = new Date(); var hour = d.getHours(); hour = (hour < 10 ? "0" : "") + hour; var min = d.getMinutes(); min = (min < 10 ? "0" : "") + min; var sec = d.getSeconds(); sec = (sec < 10 ? "0" : "") + sec; document.getElementById("clock").innerHTML = hour + ":" + min + ":" + sec; } <div id="clock"> </div>
Canvas Primitives • Primitives: • Rectangles • Paths (lines, arcs, bezier curves) • Text • Images
Drawing Attributes • Canvas is a state machine • Attributes • Color • Fill style • Line style • Line join • Shadow • Gradient • Pattern • Compositing • Transformation
Using Attributes • Make all future shapes red with 50% opacity context.fillStyle = "rbga(128,0,0,0.5)"; • Draw lines with the following end caps: context.lineJoin = "round"; (why?) • Use this font for any upcoming text: context.font = "20pt Arial";
Coordinate system …but what if I don't like this coordinate system? (0,0) (400,0) (0,300)
Define a new one! context.setTransform(300,0,0,-300,75,321); (1,0) (0,0) (0,1)
How would you. . . • Make an app window with panels? • Make a message box? • Make the draw button draw? • Make a slider? • Make the slider control the number of dots drawn? • Separate code from presentation?
Typical program structure • HTML file defines UI elements • CSS file styles everything • JS file defines behavior • Keeping them separate eases development, maintenance, reuse…
HTML/JS as dev environment • Really the only cross-platform environment • In some ways, a step back • Class library is small • Tools are limited • Cross-platform compatibility can be an issue • Good development environments coming • Cross-platform JavaScript libraries are sprouting like daisies on a grave!
JavaScript Libraries • General purpose, open source (Stats 2009) • Prototype (35%) • Yahoo UI (21%) • Dojo (20%) • jQuery (25%, growing fastest)
jQuery • Released in January 2006 • Highly effective, concise code • Rapidly rising in popularity • Focus: • improving the interaction between JavaScript and HTML • finding elements and performing actions • smooth animated transitions • plug-ins for UI widgets
jQuery Overview • Elegant transitions • $(“#menu”).slideDown(“slow”); • Handling events • $(“div”).click(function() { alert(“div clicked”); }); • DOM modification • $(“#li”).append(“<li>An item</li>”); • Ajax • $(“#results”).load(“myresults.html”);
The jQuery Function • $(CSS expression): returns a list of jQuery objects • Selectors: css • $(“#navbar”) • $(“ul.navbar li”) • $(“ul.oddevenlist li:even”)
jQuery Attributes • Things you can retrieve or set for objects • attr() or attr(key, value) – get or set attribute • removeAttr(name) • hasClass(), addClass(), removeClass(), toggleClass(), toggle() • val() or val(val) – get or set contents • html(), html(val) – get or set HTML contents • text() or text(val) – get or set text contents
How We'll Use jQuery • Sierpinski: $(document).ready(function () { gasket.init(); }); $('#drawbutton').bind('click', gasket.draw); $('#slider1').bind('change', gasket.slider); $('#messages').prepend("Starting point: (" + p.e(1) + "," + p.e(2) + ")<br>"); $('#pointcount').text($('#slider1').val()); • Later: $('#toolBar').toggle(); $('#saveImg').attr('src',dataURL); $(this).addClass('selected'); $(this).removeClass('selected');
Sylvester • Vector and matrix math library • Example: var V1 = $V([3,4,5]); var V2 = $V([9,-3,0]); var d = V1.dot(V2); // d is 15 var c = V1.cross(V2); // c is the vector (15,45,-45) • http://sylvester.jcoglan.com/
Gasket using paths? • Draw a triangle of depth d: • Base case? • If d=0, draw a solid triangle • Recursive steps? • Divide the triangle into 4 smaller triangles • Recursively draw a triangle in each of the three outer sub-triangles, at depth d-1 • How to compute the midpoint of a line seg? • Linear combination (average) of endpoints • How to do this in HTML Canvas?
Chapter 2 summary • We'll use HTML, Canvas, JavaScript, jQuery, Sylvester • Primitives supported by Canvas: rectangles, text, paths, images • Canvas is a state machine; can set attributes for future drawing • Canvas event loop: event handlers. If necessary, recompute/redisplay every few milliseconds