Course notes 28
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

In class Exercise:

♦ Click HERE for the solution to the Workshop Exercise

  1. Copy the template and open it in Dreamweaver (template file)

  2. In the initialization area create a call to a function that draws the first image:
    1. It draws a black background the size of the canvas
    2. It draws three red stripes 50 pixels wide and the height of the canvas
    3. It draws two rectangles to the right of the stripes - one blue and one green

  3. In the initialization area, write a listener that calls doClick when it detects a click

  4. Write another listener in the initialization area that calls a function called doMousemove when there is a mousemove (notice that the functions are receiving the event - e)

  5. Write a third listener that looks for a keydown and call a function called doKeydown

  6. In doClick, write an if block that checks to see where the click is. We don't need to test for Y because it is the height of the canvas.
  7. if ((posX >= ___)&&(posX < ___)) {
    
    } else if ((posX >= ___)&&(posX <___)) {
    
    } else if ((posX >= ___)&&(posX <___)) {
    
    } 
    
    1. If it is in the first stripe, then call a function called: changeStripe1()
    2. If it is in the second stripe, call a function called: changeStripe2()
    3. If it is in the second stripe, call a function called: changeStripe3()
    4. Make all these functions and put an alert in each: ex: alert("stripe 1");

  8. In the doMousemove, write an if block that checks to see if the mouse moves inside one of the boxes. Use alerts to test for this. To check for the y and x position, you need a complex if statement:
  9. if ((posX >= ___)&&(posX < ___)&&(posY >= ___)&&(posY < ___)) {
    
    } else if ((posX >= ___)&&(posX <___)&&(posY >= ___)&&(posY < ___)) {
    
    } 
    
  10. Write a switch statement to test to see if a 1, 2, 3 or 4 on the keyboard are hit. Print the number on the screen if it is.
  11. ctx.font="18pt Calibri";
    ctx.fillStyle="black";
    ctx.fillText("1", 10, 25); //what you want to print and the x,y location
    
  12. Now let's do something interesting:
    1. Click stripe 1: redraw the stripes blue - comment out the alert() - hint: set your style before you call the doStripes (first time you call it and everytime)

    2. Click stripe 2: redraw stripes with a random colored stroke - hint: change your makeStripes function to take one parameter - whether or not it is stroke or fill then do an if block in the makeStripes function
      You will need to use this code to select a random color:
      var theColor = 'rgb('+chooseNum(0, 255)+', '+chooseNum(0, 255)+', '+chooseNum(0, 255)+')';
    3. Click stripe 3: change the lineWidth to be one pixel bigger each time you click it. You will need to redraw the stripes so we can see the lineWidth change. If the lineWidth is greater than 15 then reset it back to 1.You will have to draw a black rect over the area where the stripes are and recall the rectStyle function and then redraw the stripes (fill and stroke) when you reach 15.

  13. Lets do something when you move the mouse around in the blue and green rects:
    1. Blue box: Make the a colored bar start at the top and get bigger until it reaches to bottom then start over again. For a bigger challenge, start at the bottom and go up as the person moves the mouse around.

    2. Green box: when you move around in the box, it should use a yellow square to draw. You will need the mouse position.