Download presentation
Presentation is loading. Please wait.
1
CS 352: Computer Graphics Graphics Programming and HTML Canvas
2
Interactive Computer Graphics
How would you…
3
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'
4
Interactive Computer Graphics
The business end
5
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
6
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
7
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)
8
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; . . .
9
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>
10
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>
11
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
12
Canvas Primitives Primitives: Rectangles
Interactive Computer Graphics Canvas Primitives Primitives: Rectangles Paths (lines, arcs, bezier curves) Text Images
13
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
14
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";
15
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?
16
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)
17
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?
18
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…
19
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
20
jQuery jQuery simplifies some JavaScript constructs, e.g. attaching handlers to events jQuery also makes JavaScript more cross-platform compatible
21
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”);
22
The jQuery Function $(CSS expression): returns a list of jQuery objects Selectors: css $(“#navbar”) $(“ul.navbar li”) $(“ul.oddevenlist li:even”)
23
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
24
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');
25
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) Not using the text’s ML library (non–standard, incomplete, no documentation)
26
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?
27
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
28
Program 2: Self Portrait
Interactive Computer Graphics Program 2: Self Portrait
Similar presentations
