Upload
jun-ichi-sakamoto
View
239
Download
0
Embed Size (px)
DESCRIPTION
2013/10/26(土)に北海道北見市で開催されたIT勉強会 Ohotech(オホテック) 特盛#5 http://connpass.com/event/3351/ で行われたセッションのひとつ、「タートルグラフィックでいろいろ模様描いてみよう」のスライドです。
Citation preview
Turtle Graphics - Do It!タートルグラフィックでいろんな模様を描いてみよう!
What's "Turtle Graphic"?タートルグラフィックってなに?
コンピュータ画面上の「亀 (Turtle)」に「○歩すすめ」「○度曲がれ」と指令を出して亀を動かし、その亀の軌跡で描き出す線描・図形のこと。
またはこれを行うためのコンピュータプログラミングシステムのこと。
How to play?どうやってやってみるの?
IE 10+
Firefox
Chrome
Safari 5.1+
- Offline Ready. -
Ohotech特盛#5 にあわせて構築した、JavaScript でプログラムするタートルグラフィックWeb アプリ
"Turtle Graphics Do It"
URL:http://turtlegraphics-doit.azurewebsites.net/
(or shorten: http://goo.gl/Ku6gPC)
"Turtle Graphics Do It"
How to control the turtle?どうやって動かすの?
= turtle* you can also use alias:'kame'
instead of 'turtle'.
Only 4 commands.
•move
•turn
•penUp/penDown
move移動
turtle.move(d);
d* d is pixels.
turn進行方向転換
turtle.turn(r);
+r-r
* r is degrees.
turtle.turn(-45);
turtle.turn(90);
penUp, penDown軌跡のオン/オフ
d1
turtle.penUp();
turtle.move(d1);
d2
turtle.penDown();
turtle.move(d2);
Canvas size & initial position
400px
400px
Center of
canvas
Let's draw!描いてみよう!
Koch curve
www.kushiro-ct.ac.jp/yanagawa/ap/kame05.html
C curve
www.kushiro-ct.ac.jp/yanagawa/ap/kame05.html
Dragon curve
www.kushiro-ct.ac.jp/yanagawa/ap/kame05.html
Let's play, and share the graphics & codes.
Lean, Practice, Share > Clone, Commit, Pull Request.
Thank you!
You are great programmer and creator!