p5.turtle.js

p5.jsのためのタートルグラフィックプログラム

これは、シンプルでアニメーションするタートルグラフィックプログラムです。処理は、2つのステップがあります。最初に、setup()の中で、タートルの動きを記録します。2番目に、draw()の中で、タートルの動きをアニメーションで表示します。このプログラムは、p5.jsとp5.play.jsライブラリを必要とします。

View Source

編集

ヘルプ

始め方

1.ダウンロード

次のファイルをダウンロードして解凍しておく

2.HTML

同じフォルダの中にHTMLファイルを作成して、次のエレメントを設置する

<div id = "p5Canvas"></div>

3.Javascript

HTMLファイルに次のライブラリを設置する

<script src="js/p5.js"></script>
<script src="js/p5.play_patch119.js"></script>
<script src="p5.turtle.js"></script>

4.タートルコードを編集する

p5.turtle.jsにある、次のタートルコードを自分の好みに編集する

// Start turtle code - recode turtle moving. -------------------------------------
turtle = new Turtle();
turtle.x = 140;
turtle.y = 80;
turtle.penDown = true;
turtle.penColor = turtle.color.blue;
for(var i = 0; i < 4; i++){
		turtle.forward(200);
		turtle.left(90);
};
turtle.right(360);
turtle.right(360);
// End of turtle code ------------------------------------------------------------

見本

リンク