1 / 29

CS 352: Computer Graphics

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.

ziva
Download Presentation

CS 352: Computer Graphics

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS 352: Computer Graphics Graphics Programming and HTML Canvas

  2. How would you…

  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'

  4. The business end

  5. 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

  6. HTML, CSS • 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 • Dynamic typing • No disk writing, other 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. 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>

  12. Canvas

  13. Canvas Primitives • Primitives: • Rectangles • Paths (lines, arcs, bezier curves) • Text • Images

  14. Drawing Attributes • Canvas is a state machine • Attributes • Color • Fill style • Line style • Line join • Shadow • Gradient • Pattern • Compositing • Transformation

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

  16. Coordinate system …but what if I don't like this coordinate system? (0,0) (400,0) (0,300)

  17. Define a new one! context.setTransform(300,0,0,-300,75,321); (1,0) (0,0) (0,1)

  18. 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?

  19. Typical program structure • HTML file defines UI elements • CSS file styles everything • JS file defines behavior • Keeping them separate eases development, maintenance, reuse…

  20. 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!

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

  22. 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

  23. 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”);

  24. The jQuery Function • $(CSS expression): returns a list of jQuery objects • Selectors: css • $(“#navbar”) • $(“ul.navbar li”) • $(“ul.oddevenlist li:even”)

  25. 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

  26. 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');

  27. 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/

  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?

  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

More Related