HTML Canvas Graphics Programming and CS 352: Computer Graphics
advertisement
CS 352: Computer Graphics
Graphics Programming
and
HTML Canvas
Chapter 2 - 2
Interactive Computer Graphics
How would you…
Chapter 2 - 3
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'
Chapter 2 - 4
Interactive Computer Graphics
The business end
Chapter 2 - 5
Interactive Computer Graphics
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
Chapter 2 - 6
Interactive Computer Graphics
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">&nbsp;</div>
Chapter 2 - 12
Canvas
Interactive Computer Graphics
Chapter 2 - 13
Interactive Computer Graphics
Canvas Primitives
Primitives:
Rectangles
Paths (lines, arcs, bezier curves)
Text
Images
Chapter 2 - 14
Interactive Computer Graphics
Drawing Attributes
Canvas is a state machine
Attributes
Color
Fill style
Line style
Line join
Shadow
Gradient
Pattern
Compositing
Transformation
Chapter 2 - 15
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";
Chapter 2 - 16
Interactive Computer Graphics
Coordinate system
(0,0)
(400,0)
(0,300)
…but what if I don't like this coordinate system?
Chapter 2 - 17
Interactive Computer Graphics
Define a new one!
context.setTransform(300,0,0,-300,75,321);
(1,0)
(0,0)
(0,1)
Chapter 2 - 18
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?
Chapter 2 - 19
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…
Chapter 2 - 20
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
Good development environments coming
Cross-platform JavaScript libraries are
sprouting like daisies on a grave!
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
Handling events
$(“div”).click(function() { alert(“div clicked”); });
DOM modification
$(“#menu”).slideDown(“slow”);
$(“#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
Chapter 2 - 26
Interactive Computer Graphics
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');
Chapter 2 - 27
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/
Chapter 2 - 28
Interactive Computer Graphics
Gasket using paths?
Draw a triangle of depth d:
Base case?
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?
If d=0, draw a solid triangle
Linear combination (average) of endpoints
How to do this in HTML Canvas?
Chapter 2 - 29
Interactive Computer Graphics
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
Chapter 2 - 30
Interactive Computer Graphics
Program 2: Self Portrait
