ペン(タートルグラフィックス)

for Squeak 4.4 on Mac OS X (macOS 10.13 High Sierra or earlier) / Windows (Windows 7 or later)
for Squeak 5.2 on Mac OS X (macOS 10.14 Mojave or later) / Windows (Windows 7 or later)


導入

ペン(Pen)を用いて、いろいろなタートルグラフィックス(turtle graphics)を作成してみましょう。タートルとは亀のことです。この亀が尻尾に鉛筆をつけて動きまわることにより、その動いた軌跡(足跡:正確には尻尾の鉛筆の跡)が図形になります。画面上の亀(ペン)に「100進んで」「90度向きを変えて 」「50@100に移動して」などといった命令を与えることで、面白い図形を描くことができます。

Plotter_curveOfSinAndCos1.jpg
curveOfSinAndCos1
Plotter_curveOfSinAndCos2.jpg
curveOfSinAndCos2
Plotter_penExample.jpg
penExample
Plotter_sample1_triangles.jpg
sample1_triangles
Plotter_sample2_star.jpg
sample2_star
Plotter_sample3_dragon.jpg
sample3_dragon
Plotter_sample4_mandala.jpg
sample4_mandala
Plotter_sample5_spirals.jpg
sample5_spirals
Plotter_sample7_polylines.jpg
sample7_polylines
Plotter_sample8_fill.jpg
sample8_fill
Plotter_sample9_spirals.jpg
sample9_spirals
Plotter_sampleA_combination.jpg
sampleA_combination

解説

まず始めに、ペン(Pen)を1本、手に入れるプログラムを示しましょう。以下のプログラムになります。1行目がペン1本を束縛する(つなぎとめて覚えておく)一時変数の宣言です。2行目がPenのクラスに向かってnewのメッセージを送ってペンを1本作り、それをaPenとするということを表しています。3行目はaPenを応答するという意味です。

    | aPen |
    aPen := Pen new.
    ^ aPen

上記のプログラムに新たなメッセージ式を2つ(2行)付け加えましょう。defaultNib: 5はペン先の太さを5にしてください、place: 300 @ 300はペンの場所(位置)をx座標300、y座標300にしてください、という意味になります。

    | aPen |
    aPen := Pen new.
    aPen defaultNib: 5.
    aPen place: 300 @ 300.
    ^ aPen

さらに新たなメッセージ式を1つ(1行)付け加えましょう。aPenに対してgo:(進みなさい)というのです。go: 100はペン(亀)に対して100進みなさい、ということを指示しています。コロンの後に、進む長さを指定するわけです。

    | aPen |
    aPen := Pen new.
    aPen defaultNib: 5.
    aPen place: 300 @ 300.
    aPen go: 100.
    ^ aPen

すると、次のようになります。黒い太めの線が現れます。最初、ペン(亀)は画面の左上から300 @ 300の位置におり、そして、上(北方向)を向いています。そこで、100進みなさい、と言われたので、ペン先が5で、100の長さの黒い線が上方向に向かって現れたのです。

Figure01

さらにさらに新たなメッセージ式を2つ(2行)付け加えましょう。aPenに対してturn:(回転しなさい)と言うのです。turn: 90はペン(亀)に対して時計回りで90度回転しなさい、という意味になります。コロンの後に、回転角を指定するのです。そして、その後、また、100進みなさい、と言います。

    | aPen |
    aPen := Pen new.
    aPen defaultNib: 5.
    aPen place: 300 @ 300.
    aPen go: 100.
    aPen turn: 90.
    aPen go: 100.
    ^ aPen

次のようになります。直角に曲がった新たな黒い太めの線が現れます。

Figure02

ペンの色を変えてみましょう。新たなメッセージ式を1つ(1行)付け加えます。color: Color redというメッセージは、ペンの色を赤にしなさい、ということを表現しています。

    | aPen |
    aPen := Pen new.
    aPen defaultNib: 5.
    aPen place: 300 @ 300.
    aPen go: 100.
    aPen turn: 90.
    aPen color: Color red.
    aPen go: 100.
    ^ aPen
Figure03

それでは、0.5秒(500ミリ秒)ごとに、黒・赤・緑・青の線を引き、四角形を描いてみましょう。

    | aPen |
    aPen := Pen new.
    aPen defaultNib: 5.
    aPen place: 300 @ 300.
    (Delay forMilliseconds: 500) wait.
    aPen color: Color black.
    aPen go: 100.
    aPen turn: 90.
    (Delay forMilliseconds: 500) wait.
    aPen color: Color red.
    aPen go: 100.
    aPen turn: 90.
    (Delay forMilliseconds: 500) wait.
    aPen color: Color green.
    aPen go: 100.
    aPen turn: 90.
    (Delay forMilliseconds: 500) wait.
    aPen color: Color blue.
    aPen go: 100.
    aPen turn: 90.
    ^ aPen
Figure04

もっと簡潔なプログラムは、以下のようになります。

    "黒・赤・緑・青で四角形を描く。"
    | aPen |
    aPen := Pen new.
    aPen defaultNib: 5.
    aPen place: 300 @ 300.
    #(#black #red #green #blue )
        do: [:aSymbol | 
            | aColor |
            (Delay forMilliseconds: 500) wait.
            aColor := Color perform: aSymbol.
            aPen color: aColor.
            aPen go: 100.
            aPen turn: 90].
    ^ aPen

では、茶色の矢印を描いてみましょう。末尾の付録を参考にして、以下のプログラムを読み砕いてみてください。ペン(亀)の位置と方向をaLocationとaDirectionという変数に記憶(束縛)しているところがミソ(肝)になります。

    "茶色の矢印を描く。"
    | aPen aLocation aDirection |
    aPen := Pen new.
    aPen defaultNib: 5.
    aPen place: 300 @ 300.
    aPen color: Color brown.
    aPen go: 100.
    aLocation := aPen location.
    aDirection := aPen direction.
    (Delay forMilliseconds: 500) wait.
    aPen turn: -140.
    aPen go: 30.
    aPen
        location: aLocation
        direction: aDirection
        penDown: true.
    (Delay forMilliseconds: 500) wait.
    aPen turn: 140.
    aPen go: 30.
    ^ aPen
Figure05

問題

さぁ!必須問題と自由問題にチャレンジしてみましょう。

【必須問題】

五芒星(星形)を描くプログラムを作成して提出してください。

Figure06

【自由問題】

色とりどりな円を描くプログラムを作成して提出してください。

Figure07

付録

Penの基本的なもの(メッセージ)を紹介しておきます。
詳細は「System Browser」を開いて調べましょ。

Pen class

Pen


Updated: 2019/02/06 (Created: 2008/11/11) KSU AokiHanko