スクラッチコーチキャンプ スクラッチで使える無料素材集
  • 素材
  • 修行
  • はじめての方へ
  • スクラッチゲームの作り方

    #017 ペン拡張機能で正三角形を描く方法|外角の仕組みを理解してタートルグラフィックス入門

    #017 ペン拡張機能で正三角形を描く方法|外角の仕組みを理解してタートルグラフィックス入門
    この記事は スクラッチコーチで掲載されているオリジナル記事 のバックアップです。
    スターター作品
    なし
    今回の完成サンプル
    なし
    [soy-series name="はじめてのスクラッチ"]

    さぁ、スクラッチでナニ作る!?

    動画で見てみよう

    [talk]チャンネル登録して応援よろしく!チャンネル登録する[/talk]

    チュートリアルの元になった作品

    [prj-embed prj="1314572017" mini="1" title="プレイしておこう" prj-title="sb3_20260501094616" prj-author="ok-scratch"]今回の[prj-link prj="1314572017" title="sb3_20260501094616" author="ok-scratch"]スクラッチを作る参考作品[/prj-link]です。100歩進んで120度回転、たった3回繰り返すだけで正三角形が完成するシンプルさがヤバい。「なんで120度?」ってなるけど、内角60度じゃなくて進行方向の外角で曲がるってところが数学っぽくてキレッキレ。360÷辺の数で任意の正多角形が描けるって法則にも自然と気づけるのがイカす。ペンブロックの基本がこの一作に全部詰まってる。どう作るか見ていこう。参考資料:スクラッチプログラミング事例大全集[/prj-embed]

    今回の目標

    ペン拡張機能を使って、ネコが正三角形を描くプログラムを作ろう。100歩進んで120度回転を3回繰り返すと、ぴったり元の向きに戻る正三角形が完成するよ。

    スターター作品をリミックスしよう

    このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
    スターター作品をダウンロード

    #1ペンの準備

    [talk class="m-l-n"]前回までにいろんなブロックを使ってきたけど、今回は拡張機能の「ペン」に挑戦だよ。スプライトが動いた軌跡がそのまま線になる仕組みで、ネコに三角形を描かせてみよう。[/talk]

    準備

    スプライト「グリーンペン」を開く

    グリーンペングリーンペン
    スプライトについて
    ペンブロックを使って緑色の正三角形を描くスプライト。旗が押されると原点から100歩×3辺、120度ずつ左に曲がりながら三角形を描く。
    どんな役割か
    ペンで緑色の正三角形を描くよ!原点からスタートして100歩進んでは120度曲がるを3回繰り返すと、きれいな三角形が完成するんだ。ペンの色と太さを最初に設定してから描くから、仕上がりもばっちりだよ。

    実装

    step-0

    旗を押したらスプライトを表示して、ペン全部消すで前の描画を全部消す。そのあとペンの太さを3に、色を緑に設定するよ。何度実行しても同じ状態から始められる初期化だね。

    #2最初の一辺

    step-1

    準備ができたら、いよいよ描画スタート。ペンペンを下ろすでペンを下ろすと、ここからスプライトが動くたびに線が引かれるようになるんだ。

    原点(x: 0, y: 0)に移動して向きを90度(右向き)にセットしたら、動き( ) 歩動かすで100歩進む。右に向かって長さ100の直線が引けるよ。0.5秒の待ち時間は、描いている過程をアニメーションとして見せるためだね。

    確認プレビューしておこうという口コミを寄せてくれた方 確認プレビューしておこう
    ペンの色と太さをセットして、原点から右に100歩進んで最初の1辺が描けたね。

    #32辺目を描く

    step-2

    1辺目が描けたから、次は方向転換して2辺目だよ。動き( ) ( ) 度回すで左に120度回転して、もう一度100歩移動するよ。

    「なんで120度?」って気になるよね。三角形の内角は60度だけど、ネコが曲がるのは外角(180° − 60° = 120°)のほうで、この角度にしないと三角形にならず六角形みたいな形になるんだ。進行方向から120度向きを変えると、ちょうど三角形の角になるんだよ。

    [talk]Scratchの角度は数学の座標系とちょっと違うんだよね。Scratchでは0度が上向きで時計回りに増えるけど、数学では0度が右向きで反時計回りが正の方向。でも動き( ) ( ) 度回すは「今の向きから反時計回りに回す」だけだから、基準が違っても気にしなくて大丈夫だよ。[/talk]

    [talk]この「進む→回る」で図形を描くやり方、実は「タートルグラフィックス」って呼ばれているんだ。1960年代の教育用言語「Logo」がルーツで、Scratchのペンブロックもこの流れを受け継いだものだよ。回転角度を変えれば四角形(360÷4=90度)や五角形(360÷5=72度)だって描けるから、「360 ÷ 辺の数」で回転角度が求められるっていう法則、覚えておくと便利だね。[/talk]

    確認プレビューしておこうという口コミを寄せてくれた方 確認プレビューしておこう
    左に120度回転してさらに100歩進んで、2辺目も描けた。

    #4三角形の完成

    [talk class="m-l-n"]最後の辺も同じパターン――120度回転して100歩進む。これで3つの辺がつながって、きれいな正三角形の完成だ。[/talk] step-3

    描き終わったらもう一度120度回転して元の向きに戻し、見た目隠すでスプライトを非表示にするよ。ネコが消えて、描いた三角形だけがステージに残るんだ。

    ペンを下ろしてから移動するのがポイント

    まとめ

    ペン拡張機能で三角形が描けたね!100歩進んで120度曲がるを3回繰り返すだけで正三角形になるのが気持ちいいよね。「360÷辺の数」で正多角形の回転角度が求められるから、四角形(90度)や五角形(72度)でも試してみよう。次回はオウムにしゃべらせてみるよ!

    ブクマよろしくお願いします!という口コミを寄せてくれた方 ブクマよろしくお願いします!
    どんどん追記・更新していくので、ブックマークやシェアよろしくお願いします!