CS 490: Computer Graphics Graphics Programming and HTML Canvas

How would you… Interactive Computer Graphics Cha pter 2 - 2

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 Cha pter 2 - 3

The business end Interactive Computer Graphics Cha pter 2 - 4

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/352/proj2 directory Supported browsers: all relatively modern ones Interactive Computer Graphics Cha pter 2 - 5

HTML, CSS I'll assume you can copy/modify the examples as needed If you'd like a tutorial, see w3schools.com Interactive Computer Graphics Cha pter 2 - 6

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, … Document 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 : scripts to be executed when they are called or when an event triggers function message() { alert("This alert box was called with the onload event"); }

Where to put it : scripts to be executed when they are loaded document.write(“This message is from JavaScript”);

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; }

Canvas Interactive Computer Graphics Cha pter

Canvas Primitives Primitives: Rectangles Paths (lines, arcs, bezier curves) Text Images Interactive Computer Graphics Cha pter

Drawing Attributes Canvas is a state machine Attributes Color Fill style Line style Line join Shadow Gradient Pattern Compositing Transformation Interactive Computer Graphics Cha pter

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?)why? Use this font for any upcoming text: context.font = "20pt Arial"; Interactive Computer Graphics Cha pter

Coordinate system …but what if I don't like this coordinate system? Interactive Computer Graphics Cha pter (0,0) (400,0) (0,300)

Define a new one! context.setTransform(300,0,0,-300,75,321); Interactive Computer Graphics Cha pter (0,0) (0,1) (1,0)

How would you... Interactive Computer Graphics Cha pter 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… Interactive Computer Graphics Cha pter

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 Good development environments coming Cross-platform JavaScript libraries are sprouting like daisies on a grave! Interactive Computer Graphics Cha pter

JavaScript Libraries General purpose, open source (Stats 2011) jQuery (38%, growing fastest) jQuery UI (16%) MooTools (13%) Prototype (12%) Yahoo UI (11%)

jQuery Released in January 2006 Highly effective, concise code Extremely popular, nearly ubiquitous Focus: improving the interaction between JavaScript and HTML finding elements and performing actions smooth animated transitions cross-browser compatibility plug-ins for UI widgets

jQuery Overview Elegant transitions $(“#menu”).slideDown(“slow”); Handling events $(“div”).click(function() { alert(“div clicked”); }); DOM modification $(“#li”).append(“ An item ”); 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) + ") "); $('#pointcount').text($('#slider1').val()); Later: $('#toolBar').toggle(); $('#saveImg').attr('src',dataURL); $(this).addClass('selected'); $(this).removeClass('selected'); Interactive Computer Graphics Cha pter

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) Interactive Computer Graphics Cha pter

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? Interactive Computer Graphics Cha pter

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 Interactive Computer Graphics Cha pter