cs 352 computer graphics n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
CS 352: Computer Graphics PowerPoint Presentation
Download Presentation
CS 352: Computer Graphics

Loading in 2 Seconds...

play fullscreen
1 / 29

CS 352: Computer Graphics - PowerPoint PPT Presentation


  • 120 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CS 352: Computer Graphics' - ziva


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
cs 352 computer graphics

CS 352: Computer Graphics

Graphics Programming

and

HTML Canvas

the sierpinski gasket
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'

html canvas
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
html css
HTML, CSS
  • I'll assume you can copy/modify the examples as needed
  • If you'd like a tutorial, see w3schools.com
javascript
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
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
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 it1
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
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 primitives
Canvas Primitives
  • Primitives:
    • Rectangles
    • Paths (lines, arcs, bezier curves)
    • Text
    • Images
drawing attributes
Drawing Attributes
  • Canvas is a state machine
  • Attributes
    • Color
    • Fill style
    • Line style
    • Line join
    • Shadow
    • Gradient
    • Pattern
    • Compositing
    • Transformation
using attributes
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
Coordinate system

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

(0,0)

(400,0)

(0,300)

define a new one
Define a new one!

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

(1,0)

(0,0)

(0,1)

how would you1
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
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
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
JavaScript Libraries
  • General purpose, open source (Stats 2011)
    • jQuery (38%, growing fastest)
    • jQuery UI (16%)
    • MooTools (13%)
    • Prototype (12%)
    • Yahoo UI (11%)
jquery
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
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
The jQuery Function
  • $(CSS expression): returns a list of jQuery objects
  • Selectors: css
    • $(“#navbar”)
    • $(“ul.navbar li”)
    • $(“ul.oddevenlist li:even”)
jquery attributes
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
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
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
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
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