List_html

Available files (Total=6): Hide listing

./Example_TurtleGraphics_A.html
./Example_TurtleGraphics_B_given_basic.html
./Example_TurtleGraphics_B_given_bonusExample.html
./Exercise01_given_Sound_and_Picture.html
./Exercise02_given_UpDownLeftRight.html
./Exercise03_given_RollingOnHill.html

./Example_TurtleGraphics_A.html

<html>

function t_start(x, y) {
      t_x = x;
      t_y = y;
    }

function t_left(d) {
      t_angle -= d;
    }

function t_right(d) {
      t_angle += d;
    }

function t_forward(p) {
      var rad = radians(t_angle);
      var newx = t_x + cos(rad) * p;
      var newy = t_y + sin(rad) * p;
      t_goto(newx, newy);
    }

function t_back(p) {
      t_forward(-p);
    }

function t_penDown() {
      t_penIsDown = true;
    }

function t_penUp() {
      t_penIsDown = false;
    }

function t_goto(x, y) {
      if (t_penIsDown) {
        stroke(t_color);
        strokeWeight(t_weight);
        line(t_x, t_y, x, y);
      }
      t_x = x;
      t_y = y;
    }

function t_distanceTo(x, y) {
      return sqrt(sq(t_x - x) + sq(t_y - y));
    }

function t_angleTo(x, y) {
      var absAngle = map(atan2(y - t_y, x - t_x), 0, TWO_PI, 0, 360);
      var angle = ((absAngle - t_angle) + 360) % 360.0;
      return angle;
    }

function t_turnToward(x, y, d) {
      var angle = t_angleTo(x, y);
      if (angle < 180) {
        t_angle += d;
      } else {
        t_angle -= d;
      }
    }

function t_setColor(c) {
      t_color = c;
    }

function t_setWeight(w) {
      t_weight = w;
    }

function t_face(angle) {
      t_angle = angle;
    }

function setup() {
      createCanvas(300, 300);
      background(230);
      t_start(50, 100);
      t_penDown();
      t_setColor(0);
      for (var i = 1; i <= 50; i++) {
        t_forward(200);
        t_right(145);
      }
    }
  </script>
</head>

</html>

run stop and close

./Example_TurtleGraphics_B_given_basic.html

<html>

function t_start(x, y) {
      t_x = x;
      t_y = y;
    }

function t_left(d) {
      t_angle -= d;
    }

function t_right(d) {
      t_angle += d;
    }

function t_forward(p) {
      var rad = radians(t_angle);
      var newx = t_x + cos(rad) * p;
      var newy = t_y + sin(rad) * p;
      t_goto(newx, newy);
    }

function t_back(p) {
      t_forward(-p);
    }

function t_penDown() {
      t_penIsDown = true;
    }

function t_penUp() {
      t_penIsDown = false;
    }

function t_goto(x, y) {
      if (t_penIsDown) {
        stroke(t_color);
        strokeWeight(t_weight);
        line(t_x, t_y, x, y);
      }
      t_x = x;
      t_y = y;
    }

function t_distanceTo(x, y) {
      return sqrt(sq(t_x - x) + sq(t_y - y));
    }

function t_angleTo(x, y) {
      var absAngle = map(atan2(y - t_y, x - t_x), 0, TWO_PI, 0, 360);
      var angle = ((absAngle - t_angle) + 360) % 360.0;
      return angle;
    }

function t_turnToward(x, y, d) {
      var angle = t_angleTo(x, y);
      if (angle < 180) {
        t_angle += d;
      } else {
        t_angle -= d;
      }
    }

function t_setColor(c) {
      t_color = c;
    }

function t_setWeight(w) {
      t_weight = w;
    }

function t_face(angle) {
      t_angle = angle;
    }

function setup() {
      createCanvas(300, 300);
      background(230);
      frameRate(3);
      t_start(50, 100);
      t_penDown();
      t_setColor(0);
    }

function draw() {
      background(230, 20);
      t_forward(200);
      t_right(145);
    }
  </script>
</head>

</html>

run stop and close

./Example_TurtleGraphics_B_given_bonusExample.html

<html>

function t_start(x, y) {
      t_x = x;
      t_y = y;
    }

function t_left(d) {
      t_angle -= d;
    }

function t_right(d) {
      t_angle += d;
    }

function t_forward(p) {
      var rad = radians(t_angle);
      var newx = t_x + cos(rad) * p;
      var newy = t_y + sin(rad) * p;
      t_goto(newx, newy);
    }

function t_back(p) {
      t_forward(-p);
    }

function t_penDown() {
      t_penIsDown = true;
    }

function t_penUp() {
      t_penIsDown = false;
    }

function t_goto(x, y) {
      if (t_penIsDown) {
        stroke(t_color);
        strokeWeight(t_weight);
        line(t_x, t_y, x, y);
      }
      t_x = x;
      t_y = y;
    }

function t_distanceTo(x, y) {
      return sqrt(sq(t_x - x) + sq(t_y - y));
    }

function t_angleTo(x, y) {
      var absAngle = map(atan2(y - t_y, x - t_x), 0, TWO_PI, 0, 360);
      var angle = ((absAngle - t_angle) + 360) % 360.0;
      return angle;
    }

function t_turnToward(x, y, d) {
      var angle = t_angleTo(x, y);
      if (angle < 180) {
        t_angle += d;
      } else {
        t_angle -= d;
      }
    }

function t_setColor(c) {
      t_color = c;
    }

function t_setWeight(w) {
      t_weight = w;
    }

function t_face(angle) {
      t_angle = angle;
    }

function setup() {
      createCanvas(300, 300);
      background(230);
      frameRate(30);
      t_start(150, 150);
      t_penDown();
      t_setColor(0);
    }

function draw() {
      background(230, 5);

//straight line
      t_forward(frameCount * 0.5);

//square - side 1 (red)
      t_setColor(color(255, 0, 0));
      t_left(26.5); //turn
      t_forward(20); //draw square side

//square - sides 2-4 (black)
      t_setColor(0);
      t_right(90);
      t_forward(20);
      t_right(90);
      t_forward(20);
      t_right(90);
      t_forward(20);

//turn the turtle for next frame
      t_left(26.5);

if (frameCount == 250)
        noLoop(); //stop the animation
    }
  </script>
</head>

</html>

run stop and close

./Exercise01_given_Sound_and_Picture.html

run stop and close

./Exercise02_given_UpDownLeftRight.html

<html>

function preload() {

}

function setup() {
      createCanvas(500, 500);

}

function draw() {

}

function keyPressed() {
      if (keyCode == UP_ARROW) {

}

}
  </script>
</head>

<body>
  <div style="width:400px;font-size:15pt; background-color:yellow; color:red;margin:10px">
    Press the up / down / left / right arrows to rotate the images:
  </div>
</body>

</html>

run stop and close

./Exercise03_given_RollingOnHill.html

run stop and close

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