CS 352: Computer Graphics Graphics Programming and HTML Canvas
Interactive Computer Graphics How would you…
The Sierpinski Gasket pick a random point P inside a triangle Interactive Computer Graphics 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'
Interactive Computer Graphics The business end
HTML Canvas (2D) We'll use HTML's Canvas element for 2-D graphics Interactive Computer Graphics HTML Canvas (2D) 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/352/proj2 directory Supported browsers: all relatively modern ones
Interactive Computer Graphics HTML, CSS, JavaScript 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 Becoming more powerful, more used (trend toward doing more on the client side with e.g. Angular.js) Dynamic typing No disk writing, other security 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>
Canvas Interactive Computer Graphics What do you think about the Canvas vs. Flash wars? Microsoft's person in charge of Silverlight said that HTML/JavaScript is the only truly cross-platform solution now
Canvas Primitives Primitives: Rectangles Interactive Computer Graphics Canvas Primitives Primitives: Rectangles Paths (lines, arcs, bezier curves) Text Images
Drawing Attributes Canvas is a state machine Attributes Color Interactive Computer Graphics 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 Interactive Computer Graphics 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 (0,0) (400,0) (0,300) Interactive Computer Graphics Coordinate system (0,0) (400,0) (0,300) …but what if I don't like this coordinate system?
Define a new one! context.setTransform(300,0,0,-300,75,321); (1,0) Interactive Computer Graphics Define a new one! context.setTransform(300,0,0,-300,75,321); (1,0) Click link – see what it does. Points get multiplied! Homogeneous coordinates! (0,0) (0,1)
How would you. . . Make an app window with panels? Make a message box? Interactive Computer Graphics 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 Interactive Computer Graphics 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 Interactive Computer Graphics 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 Easy Chrome has nice developer tools
jQuery jQuery simplifies some JavaScript constructs, e.g. attaching handlers to events jQuery also makes JavaScript more cross-platform compatible
jQuery Overview Transitions Handling events DOM modification Ajax $(“#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: Later: Interactive Computer Graphics $(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: Interactive Computer Graphics 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/ Not using the text’s ML library (non–standard, incomplete, no documentation)
Gasket using paths? Draw a triangle of depth d: Base case? Interactive Computer Graphics 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?
Summary We'll use HTML, Canvas, JavaScript, jQuery, Sylvester Interactive Computer Graphics 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
Program 2: Self Portrait Interactive Computer Graphics Program 2: Self Portrait