ch2 by shuifanglj

VIEWS: 5 PAGES: 29

									 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/projn directory on udu
               Supported browsers
                   WebKit browsers: supported
                   Firefox: supported (but FireFox 4 doesn't have sliders)
                   IE 8 or less – requires plugin
                   I'll check in Chrome 9
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      Interactive Computer Graphics




           Canvas
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
              Good development environments coming
              Cross-platform JavaScript libraries are
               sprouting like daisies on a grave!
JavaScript Libraries
   General purpose, open source (Stats 2009)
       Prototype (35%)
       Yahoo UI (21%)
       Dojo (20%)
       jQuery (25%, growing fastest)
jQuery
   Released in January 2006
   Highly effective, concise code
   Rapidly rising in popularity
   Focus:
       improving the interaction between JavaScript and HTML
       finding elements and performing actions
       smooth animated transitions
       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
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?
                    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 - 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

								
To top