List_html

function drawHouse(x, y) {
      fill(255, 255, 0);
      noStroke();
      triangle(x, y - 15, x - 10, y, x + 10, y);
      rect(x - 10, y + 2, 20, 15);
    }

function drawTree(x, y) {
      noStroke();
      fill(0, 255, 0);
      ellipse(x, y - 10, 8, 8);
      ellipse(x - 3, y - 7, 10, 10);
      ellipse(x + 3, y - 7, 10, 10);
      fill(200, 150, 0);
      rect(x - 2, y - 2, 4, 20);
    }
  </script>

</head>

</html>

run stop and close

./WS05_Slide16_result_functions_paint_and_move.html

<html>

function setup() {
      createCanvas(200, 200);
    }

function draw() {
      paint();
      move();
    }

function paint() {
      background(0);
      stroke(175);
      strokeWeight(5);
      fill(0);

ellipse(circleX, circleY, 50, 50);
      drawHouse(circleX + 5, circleY);
      drawTree(circleX - 10, circleY);
    }

function move() {
      circleX = circleX + 1;
      if (circleX > width) {
        circleX = 0;
      }
    }

function drawHouse(x, y) {
      fill(255, 255, 0);
      noStroke();
      triangle(x, y - 15, x - 10, y, x + 10, y);
      rect(x - 10, y + 2, 20, 15);
    }

</head>

</html>

run stop and close

./WS05_Slide17_Job02(Given).html

<html>

function setup() {
      createCanvas(200, 200);
    }

function draw() {

//paint
      background(0);
      stroke(175);
      strokeWeight(5);
      fill(0);

ellipse(circleX, circleY, 50, 50);
      drawHouse(circleX + 5, circleY);
      drawTree(circleX - 10, circleY);

//move
      circleX = circleX + direction;

//bounce
      if (circleX > width - 25 || circleX < 25) {
        direction = direction * -1;
      }
    }

function drawHouse(x, y) {
      fill(255, 255, 0);
      noStroke();
      triangle(x, y - 15, x - 10, y, x + 10, y);
      rect(x - 10, y + 2, 20, 15);
    }

</head>

</html>

run stop and close

./WS05_Slide20_clickRect_keyClear.html

run stop and close

./WS05_Slide21_ZoogLego.html

<html>

function setup() {
      createCanvas(240, 360);
      ellipseMode(CENTER);
      rectMode(CENTER);

isPressed = false;
    }

function draw() {
      background(225);

if (isPressed == false) {
        x = mouseX;
        y = mouseY;
      }

drawEyes();
      drawLegs();

placeLego();
      drawEyes(); //redraw eyes on lego

textSize(10);
      noStroke();
      fill(255, 0, 0);
      text("x: " + x + ", y: " + y + ", isPressed: " + isPressed, 5, 355);
    }

function drawEyes() {
      fill(0);
      ellipse(101, 160, 16, 32);
      ellipse(139, 160, 16, 32);
    }

function drawLegs() {
      stroke(0);
      line(110, 240, 100, 250);
      line(130, 240, 140, 250);
    }

function placeLego() {
      // Draw body and head (mouse location)

stroke(0);
      fill(175);
      rect(x, y, 20, 100);

stroke(0);
      fill(255);
      ellipse(x, y - 30, 60, 60);
    }

function mousePressed() {
      isPressed = true;
    }
  </script>
</head>

</html>

run stop and close

./WS05_Slide23_AsgGiven.html

<html>

function setup() {
      createCanvas(600, 300);
      background(255,220,200);
    }

function draw() {
      drawCar(xCar - sizeCar - 6, yCar, sizeCar);
      drawCar(xCar, yCar, sizeCar);
      ellipse(xCar - sizeCar / 2 - 3, yCar, 5, 5);
    }

// x and y specify location of car
    // theSize specifies car size
    function drawCar(x, y, theSize) {
      var offset = theSize / 4;
      rectMode(CENTER);
      stroke(0);
      fill(100);
      rect(x, y, theSize, theSize / 2);
      fill(200);
      rect(x - offset, y - offset, offset, offset / 2);
      rect(x + offset, y - offset, offset, offset / 2);
      rect(x - offset, y + offset, offset, offset / 2);
      rect(x + offset, y + offset, offset, offset / 2);
    }

function mousePressed() {
      if (mouseButton == LEFT) {
        theSize *= 2;
      } else if (mouseButton == RIGHT) {
        theSize /= 2;
      }
    }
  </script>
</head>

</html>

run stop and close

Example Usage 1 (basic):
Example Usage 2 (add filter:CHAN):
Example Usage 3 (set the defaultShowInFrame parameter to true):