03-01 タートルグラフィックスのライブラリを作る

p5.js にはタートルグラフィックスを行う関数はないので、「turtle.js」を用意した。

・turtle.js

// ----------------------------------------------
// *     タートルグラフィックス・ライブラリ     *
// ----------------------------------------------

let LPX, LPY,            // 現在位置
    ANGLE;               // 現在角

function move(leng) {
  let x = LPX + leng*Math.cos(Math.PI * ANGLE / 180.0);
  let y = LPY - leng*Math.sin(Math.PI * ANGLE / 180.0);
  line(LPX, LPY, x, y);
  LPX = x; LPY = y;
}

function turn(a) {  
  ANGLE += a;
  ANGLE %= 360;
}

function moveto(x, y) {
  line(LPX, LPY, x, y);
  LPX = x; LPY = y;
}

function setpoint(x, y) {
  LPX = x; LPY = y;
}

function setangle(a) {
  ANGLE = a;
}

move と turn を実現するためには，描画の現在位置（LP）と現在角を内部的に記憶しておかなければならない．現在位置の座標を(LPX, LPY)，現在角をANGLEとすると、この向きに長さｌの直線を引いた時の終点は以下のように計算できる。

・ move(leng) 指定長の直線の描画

現在位置(LPX, LPY)から現在角ANGLE（度）の方向に長さlengの直線を引く．反時計まわりの向きを正とする

・moveto(x, y) LPから指定点への直線の描画

LP位置から(x, y)位置に直線を引く

・turn(a) 現在角の回転

現在角をa°回転する．回転後の現在角は0～360°に入るように補正される

・setpoint(x, y) LP位置の設定

現在位置LP(LPX, LPY)を(x, y)に移動する．

・setangle(a) 現在角の設定

現在角をa°に設定する．

１．turtle.jsを利用するには以下のようにする

turtle.jsをアップロードする

２．index.htmlにturtle.jsの取り込みを記述

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/addons/p5.sound.min.js"></script>
    <script src="turtle.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>