A more complex example

• For now, we will concentrate on drawing images
  • on the default canvas.
  • Only setting "pixels"
  • Using fillRect(x,y,1,1);
  • With one exception.
• I am really working on javascript now.
• My goal is to
  • Draw a series of colored dots on the screen.
  • Which can be redrawn.
  • See this page for example.
• Javascript strikes me as this strange combination of C and java.
  • For the most part, if you know c/c++ you can do this easily.
  • My instincts are right 90% of the time.
  • There are many references out there, I have been using this one, aong with my javascript book.
• Javascript:
  • Does has limited types and extremely limited type checking.
  • Declarations are very lose.
  • The type system is dynamic.
• We will start with a crude 130 style program and move up to something more object oriented.
• Oh, debugging,
  • In chrome press <ctl><shift>j
  • In firefox too.
  • use console.log(info) but more on this in a second.
  • It is helpful to disable browser caching too
    • In chrome
    • Select the console customize button
    • 
    • Select settings
    • 
    • Mark "Disable Cache"
    • 
    • This will reload .js files when you refresh the page.
• Control structures and variables
  • Variables can be primitive or objects.
  • primitives are numbers, strings, booleans and null
  • objects are objects.
  • for now, declare primitives just like in c, BUT everything is of type var
  • All, or nearly all of the control structures you know in C are there.

       console.log("Hello from the demo");
    
       for(var i=1;i<9;i++) {
          console.log("I is ", i);
          if (i%2 == 0) {
             console.log(i, "is even");
          }
          switch(i) {
             case 1: console.log("one"); break;
             case 2: console.log("two"); break;
             case 3: console.log("three"); break;
             case 4: console.log("four"); break;
             case 5:
             case 6: console.log("five or six"); break;
             default:
                 console.log("too high");
          }
    
       }
       i = 3;
       while (i < 5) {
          console.log("in while i=",i);
          i+=1;
       }
    
       i = 10;
       do {
          console.log("in do while i=",--i);
       } while (i > 5);
    	

  • And in this page
• Declaring the canvas in the script.

  var WIDTH = 300;
  var HEIGHT = 300;
  
  var canvas = document.createElement('canvas')
      canvas.height = HEIGHT;
      canvas.width = WIDTH;
      canvas.style = "border:1px";
  
  document.body.appendChild(canvas);
  
  var CTX = canvas.getContext("2d");
  	

  • This declares the height and width.
  • Then creates a canvas element in the current document.
  • Attributes are set.
  • The canvas is appended to the document.
  • And the context is retreived.
• Functions
  • Functions are just objectes, and can be declared a number of ways.
  • I mostly stick with the C++ way.
  • Parameters are a bit tricky, but we will put those off for a bit.
  • I want to build a RandomPattern() function that I can call at the press of a button.
    • This will clear the canvas
    • Loop over a preset number of points
      • Generate a random color
      • Generate a random location.
  • The fuction declaration

    function RandomPattern() {
        var i;              // a loop control variable.
        var x,y;            // random coordinates.
        var r,g,b;          // random red, green and blue color components.
        var color;          // the color  string 
    
        // function body
    
        return;
    } 
    	

• Now the body
  • Clear the canvas

    CTX.fillStyle="#cccccc";
    CTX.fillRect(0,0,WIDTH,HEIGHT);
    	

    • Just draw a rectangle,
      • Filled with the clear color
      • The size of the canvas
      • Starting at 0,0
    • Notice, canvas elements do not have depth, they are drawn in the order they are drawn
      • We will later use this type of behavior in the "painters algorithm"
      • But for now, just draw the deepest things first.
    • Also notice that WIDTH, HEIGHT and CTX are global and used as globals.
  • Generate the random colors and positions.

    // generate a random color
    r = Math.floor(Math.random()*255);
    g = Math.floor(Math.random()*255);
    b = Math.floor(Math.random()*255);
    color = "rgb("+r+","+g+","+b+")";
    CTX.fillStyle = color;
    
    // and a random point.
    x = Math.random()*WIDTH;
    y = Math.random()*HEIGHT;
    	    

    • We will discuss colors later, but you probably know html colors have a red, green and blue component between 0 and 255.
    • Look here for a primer.
    • The rgb(r,g,b) html command generates a color
    • In javascript, Math.random() generates a random nuber between n, 0 ≤ n < 1
    • Math.floor(n) returns the integer less than or equal to n.
    • Oh, and I am doing string concatenation and conversion from int to string in the color= line
  • Finally draw the point

    CTX.fillRect(x, y, 2, 2);
    	    

• After the function is defined, I call it once, so it sets up the canvas on startup.

      return;
  }
  
  RandomPattern();
  
  	    

• One last bit, I want to be able to redraw the dots.
  • I will do this with an <button> tag.
  • A reference is here.

  <button type="button" onclick="RandomPattern()">Redraw</button>
  	    

• When the button is clicked, the function RandomPattern() is called.