ch2x - CS

cornawakeSoftware and s/w Development

Nov 4, 2013 (3 years and 10 months ago)

103 views

CS 352: Computer Graphics

Graphics Programming

and

HTML Canvas

How would you…

Interactive Computer Graphics

Chapter 2
-

2

Interactive Computer Graphics

Chapter 2
-

3

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

Interactive Computer Graphics

Chapter 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

Chapter 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

Chapter 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, …


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>

Canvas

Interactive Computer Graphics

Chapter 2
-

12

Canvas Primitives


Primitives:


Rectangles


Paths (lines, arcs, bezier curves)


Text


Images

Interactive Computer Graphics

Chapter 2
-

13

Drawing Attributes


Canvas is a state machine


Attributes


Color


Fill style


Line style


Line join


Shadow


Gradient


Pattern


Compositing


Transformation

Interactive Computer Graphics

Chapter 2
-

14

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


Interactive Computer Graphics

Chapter 2
-

15

Coordinate system

…but what if I don't like this coordinate system?

Interactive Computer Graphics

Chapter 2
-

16

(0,0)

(400,0)

(0,300)

Define a new one!


context.setTransform(300,0,0,
-
300,75,321);

Interactive Computer Graphics

Chapter 2
-

17

(0,0)

(0,1)

(1,0)

How would you. . .

Interactive Computer Graphics

Chapter 2
-

18


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?


Interactive Computer Graphics

Chapter 2
-

19

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


Easy


Good development environments coming


Cross
-
platform JavaScript libraries are
sprouting like daisies on a grave!


Interactive Computer Graphics

Chapter 2
-

20

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(“<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');





Interactive Computer Graphics

Chapter 2
-

26

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/

Interactive Computer Graphics

Chapter 2
-

27

Interactive Computer Graphics

Chapter 2
-

28

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

Chapter 2
-

29

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