CS 352: Computer Graphics

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

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

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

CS 352: Computer Graphics