- スターター作品
- なし
- 今回の完成サンプル
- なし
さぁ、スクラッチでナニ作る！？
動画で見てみよう
[talk]チャンネル登録して応援よろしく！チャンネル登録する[/talk]チュートリアルの元になった作品
[prj-embed prj="1317913896" mini="1" title="プレイしておこう" prj-title="はじめてのスクラッチ #021" prj-author="ok-scratch"]今回の[prj-link prj="1317913896" title="はじめてのスクラッチ #021" author="ok-scratch"]スクラッチを作る参考作品[/prj-link]です。メインスクリプトがたった2行しかないのに、ネコが三角形と四角形を次々と描きあげるの、実はカラクリがある。「三角形を描く」「四角形を描く」って自分のブロックに全部まかせることで、メインは呼び出すだけでいい仕組みになってるんだよ。たったこれだけで、コードが一気にスッキリ読みやすくなるのがヤバい。どうやって作ってるか、見ていこう。参考資料：スクラッチプログラミング事例大全集[/prj-embed]今回の目標
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#1スプライトの初期化
[talk class="m-l-n"]これまでにいろんなブロックを組み合わせてきたよね。今回はペン機能と「自分だけのブロック」を使って、ネコに三角形と四角形を描かせるよ。[/talk]準備
スプライト「ジオペン」を開く
ジオペン| スプライトについて |
|---|
| ペンを使って三角形や四角形などの幾何学図形を描くスプライト |
| どんな役割か |
| ペンを使って三角形と四角形を描くスプライトを作るよ！動く距離と回転角度を組み合わせて、キレイな図形を自動で描けるようにしよう。「自分のブロック」を使ってコードを整理するのがポイントだよ。 |
実装
まず
こうやって最初にスプライトの位置や向きをリセットしておくと、何度旗を押しても同じ結果になる。初期化って地味だけどめちゃくちゃ大事な処理なんだよね。
#2ペンの準備
ここからペン拡張機能の出番。全部消すで前に描いた線を全部消して、まっさらな状態にするよ。
ペンを下ろすでペンを下ろしたら準備完了。ペンが下りた状態でスプライトが動くと、その軌跡が線として画面に残るんだ。
#3三角形の定義を作る
準備
カスタム定義「三角形を描く」を追加
ペンで正三角形を描く。100歩進んで120度左に曲がる動作を3回繰り返す
実装
ペンの準備ができたから、次は「三角形を描く」処理をまとめた自分だけのブロックを作るよ。定義 ( )で「三角形を描く」を定義するんだ。
中身は、0.5秒待ってから100歩動かすところからスタート。待ち時間を入れているのは、ネコが1辺ずつゆっくり描いていく様子をアニメーションで見せるため。
#4三角形の2辺目
( ) ( ) 度回すで120度左に回ってから、100歩動かしてもう1辺を描くよ。0.5秒の待ち時間を挟みつつ、さらにもう一度120度回転する。
なんで120度なのか？正三角形の内角は60度だけど、ネコが「次の辺の方向に向き直す」には外角にあたる120度だけ曲がる必要があるんだ。
[talk]正多角形を描くときの回転角度、実は「360 ÷ 辺の数」で一発で求められるんだよ。三角形なら360÷3＝120度、四角形なら360÷4＝90度。これは「外角の定理」っていう数学の法則で、正多角形の外角の合計はいつでもぴったり360度になる。五角形でも六角形でも、この法則さえ知っていればスクラッチで描けちゃうんだ。[/talk]
#5三角形の完成
[talk class="m-l-n"]ラストの辺を描こう。100歩動かして、0.5秒待ってから120度回転。これで3辺すべてが描けて、ネコは出発地点に戻ってくるよ。[/talk]
3回とも「100歩動かす→120度回す」というまったく同じ動作の繰り返しで、もし1回でも角度や歩数が正確じゃなかったら最後の辺が始点に戻らず三角形が閉じなくなってしまう。「三角形を描く」ブロックの定義はこれで完成！
#6四角形の定義を作る
準備
カスタム定義「四角形を描く」を追加
ペンで正方形を描く。100歩進んで90度左に曲がる動作を4回繰り返す
実装
三角形が描けるようになったから、今度は四角形用のブロックを作ろう。定義 ( )で「四角形を描く」を新しく定義するよ。
構造は三角形とほとんど同じ。0.5秒待って100歩進んだあと、( ) ( ) 度回すで90度だけ回転する。四角形だから回転角度が120度→90度に変わっただけなんだ。
#7四角形の2・3辺目
[talk class="m-l-n"]2辺目と3辺目を描いていくよ。動かして→待って→回転するパターンを繰り返して、四角形の輪郭がどんどんできあがっていく。[/talk]
三角形のときと見比べてみて。やっていることは「動いて曲がる」の繰り返しなのに、角度が120度→90度に変わるだけで全然違う形になるんだよね。角度の違いが図形の形を決めてるってこと。
#8四角形の完成
[talk class="m-l-n"]最後の90度回転と100歩の移動で4辺目を描いたら、締めにもう一度90度回して向きを元に戻す。これで四角形も完成だよ。[/talk]
三角形は「移動→回転」を3回、四角形は4回。辺の数だけ繰り返すっていう規則性がわかると、正五角形でも正六角形でも同じ要領で描けるようになるよ。
#9ブロックを呼び出す
いよいよメインスクリプトに戻って、さっき作ったブロックを呼び出すよ。( )で「三角形を描く」と「四角形を描く」を順番に実行するんだ。
メインスクリプトにはたった2行しかないのに、ネコが三角形と四角形を順番に描いてくれる。「何をやるか」はメインに書いて、「どうやるか」はブロック定義に任せる——この考え方がプログラミングの基本だよ。最後に隠すでスプライトを隠して、描いた図形だけが画面に残るようにしよう。
[talk]「自分のブロックを作る」って、プログラミングの世界では「関数」って呼ばれているんだ。もしこの仕組みがなかったら、三角形と四角形のコードを全部メインにベタ書きすることになって、どこが何の処理なのかパッと見でわからなくなる。関数に分けておけばメインは「三角形描いて」「四角形描いて」の2行で済むし、正五角形を追加したくなったら新しい関数を1つ作るだけなんだよ。[/talk]
まとめ
関数って最初は難しそうに聞こえるかもしれないけど、「処理に名前をつけてまとめる」だけのことなんだよ。三角形でも四角形でも、同じ発想で正五角形や正六角形にも応用できちゃう。コードを整理する感覚、なんとなく掴めてきたんじゃないかな。
