23
Turtle Graphics - Do It! タートルグラフィックでいろんな模様を描いてみよう!

Turtle Graphics Do It!

Embed Size (px)

DESCRIPTION

2013/10/26(土)に北海道北見市で開催されたIT勉強会 Ohotech(オホテック) 特盛#5 http://connpass.com/event/3351/ で行われたセッションのひとつ、「タートルグラフィックでいろいろ模様描いてみよう」のスライドです。

Citation preview

Page 1: Turtle Graphics Do It!

Turtle Graphics - Do It!タートルグラフィックでいろんな模様を描いてみよう!

Page 2: Turtle Graphics Do It!

What's "Turtle Graphic"?タートルグラフィックってなに?

Page 3: Turtle Graphics Do It!

コンピュータ画面上の「亀 (Turtle)」に「○歩すすめ」「○度曲がれ」と指令を出して亀を動かし、その亀の軌跡で描き出す線描・図形のこと。

またはこれを行うためのコンピュータプログラミングシステムのこと。

Page 4: Turtle Graphics Do It!

How to play?どうやってやってみるの?

Page 5: Turtle Graphics Do It!

IE 10+

Firefox

Chrome

Safari 5.1+

- Offline Ready. -

Ohotech特盛#5 にあわせて構築した、JavaScript でプログラムするタートルグラフィックWeb アプリ

"Turtle Graphics Do It"

Page 6: Turtle Graphics Do It!

URL:http://turtlegraphics-doit.azurewebsites.net/

(or shorten: http://goo.gl/Ku6gPC)

"Turtle Graphics Do It"

Page 7: Turtle Graphics Do It!

How to control the turtle?どうやって動かすの?

Page 8: Turtle Graphics Do It!
Page 9: Turtle Graphics Do It!

= turtle* you can also use alias:'kame'

instead of 'turtle'.

Page 10: Turtle Graphics Do It!

Only 4 commands.

•move

•turn

•penUp/penDown

Page 11: Turtle Graphics Do It!

move移動

Page 12: Turtle Graphics Do It!

turtle.move(d);

d* d is pixels.

Page 13: Turtle Graphics Do It!

turn進行方向転換

Page 14: Turtle Graphics Do It!

turtle.turn(r);

+r-r

* r is degrees.

Page 15: Turtle Graphics Do It!

turtle.turn(-45);

turtle.turn(90);

Page 16: Turtle Graphics Do It!

penUp, penDown軌跡のオン/オフ

Page 17: Turtle Graphics Do It!

d1

turtle.penUp();

turtle.move(d1);

d2

turtle.penDown();

turtle.move(d2);

Page 18: Turtle Graphics Do It!

Canvas size & initial position

400px

400px

Center of

canvas

Page 19: Turtle Graphics Do It!

Let's draw!描いてみよう!

Page 20: Turtle Graphics Do It!

Koch curve

www.kushiro-ct.ac.jp/yanagawa/ap/kame05.html

Page 21: Turtle Graphics Do It!

C curve

www.kushiro-ct.ac.jp/yanagawa/ap/kame05.html

Page 22: Turtle Graphics Do It!

Dragon curve

www.kushiro-ct.ac.jp/yanagawa/ap/kame05.html

Page 23: Turtle Graphics Do It!

Let's play, and share the graphics & codes.

Lean, Practice, Share > Clone, Commit, Pull Request.

Thank you!

You are great programmer and creator!