turtle graphics do it!

Post on 31-May-2015

235 Views

Category:

Technology

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

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

TRANSCRIPT

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!

top related