「チョウの羽を左右同じ形に描きたいけれど、反対側を描くと形が変わってしまう」。Scratchなら、マウスで描くペンと、それを鏡のように写すペンを用意して作れます。
画面中央を境目にする場合は、横の座標を「0−元の横座標」にし、縦の座標は変えません。この記事では、押している間だけ左右に線が増える「ミラー描画」を作ります。ScratchJrではなく、Scratchのペン拡張機能を使う作例です。
左右を入れ替えるのは、横の座標だけ
中央の縦線を折り目にして、紙を左右に折る場面を思い浮かべてください。右側の点を左側へ写しても、高さは同じです。変わるのは、中央から見た左右の位置になります。
たとえば、元の点が横80・縦40なら、写す点は横−80・縦40です。次の数字は仕組みを確かめるための作例用の値で、決まった設定ではありません。
| 元の点のx座標 | 写す点のx座標 | y座標 |
|---|---|---|
| 80 | −80 | どちらも40 |
| −60 | 60 | どちらも20 |
| 0 | 0 | どちらも50 |
Scratchでは「0−描画x」という引き算で、横の値の符号を反転できます。引き算ブロックは、最初の数から二番目の数を引く働きです。Scratch公式ヘルプの引き算の説明でも確認できます。
数字の説明だけでは分かりにくければ、まず表の一行目だけ試しましょう。「右の点が左へ移る」「高さは変わらない」が見えれば、描画の仕組みへ進めます。
準備するのは二本のペンと、共有する二つの変数
新しい練習用プロジェクトを開き、拡張機能から「ペン」を追加します。ペンでスプライトの移動を線として描く活動は、Scratch Foundationの公式描画教材でも紹介されています。
スプライトを二つ用意し、名前を「入力ペン」「鏡ペン」にします。姿は何でも構いません。この作例では実行中に隠し、線だけを見せます。
- 入力ペン：マウスから読み取った位置へ移動する。
- 鏡ペン：横を反転した位置へ移動する。
次に、「描画x」「描画y」という変数を「すべてのスプライト用」で作ります。二本のペンが同じ位置情報を使うためです。変数の表示は、描画の邪魔にならないようチェックを外しておきます。
鏡ペンにも別々にマウスの位置を読ませるのではなく、入力ペンが読んだ値を共有する構成にします。マウスを動かしている途中でも、一組の座標から左右の位置を決められます。
以下は本記事用に組んだ作例です。ブロックの並びを文字で示しており、字下げは繰り返しの内側を表します。「繰り返しの終わり」というブロックを追加する必要はありません。
入力ペンが座標を読み、鏡ペンへ知らせる
まず入力ペンを選び、次の並びを作ります。メッセージは「準備」「描き始め」「鏡を動かす」「描き終わり」の四つを新しく作ってください。
緑の旗が押されたとき
隠す
ペンを上げる
全部消す
ペンの色を［青など見やすい色］にする
ペンの太さを（3）にする
［準備］を送って待つ
＜マウスが押された ではない＞まで待つ
ずっと
＜マウスが押された＞まで待つ
［描画x］を（マウスのx座標）にする
［描画y］を（マウスのy座標）にする
x座標を（描画x）、y座標を（描画y）にする
［描き始め］を送って待つ
ペンを下ろす
＜マウスが押された ではない＞まで繰り返す
［描画x］を（マウスのx座標）にする
［描画y］を（マウスのy座標）にする
x座標を（描画x）、y座標を（描画y）にする
［鏡を動かす］を送って待つ
ペンを上げる
［描き終わり］を送って待つ
「マウスが押された ではない」は、緑の演算ブロック「〜ではない」に、水色の「マウスが押された」を入れて作ります。ペンの太さ3は、線を確認しやすくするための仮の設定です。
位置の読み取りには「調べる」のマウス座標を使います。横の位置を返す働きは、Scratch公式ヘルプのマウスのx座標で確認できます。
ここで大切なのは、メッセージを単に「送る」のではなく、「送って待つ」にすることです。鏡ペンが移動し終わるまで次の座標に更新しないようにします。公式ヘルプの「送って待つ」の説明では、受信した処理が終わってから先へ進む働きが示されています。
鏡ペンは「0−描画x」で反対側へ動かす
鏡ペンを選び、四つの独立したブロックのまとまりを作ります。入力ペンの長い処理を丸ごと複製する必要はありません。
最初の準備
［準備］を受け取ったとき 隠す ペンを上げる ペンの色を［入力ペンと同じ色］にする ペンの太さを（3）にする
押し始めた位置へ移る
［描き始め］を受け取ったとき ペンを上げる x座標を（0−描画x）、y座標を（描画y）にする ペンを下ろす
押している間、反対側の線を描く
［鏡を動かす］を受け取ったとき x座標を（0−描画x）、y座標を（描画y）にする
離したら描くのをやめる
［描き終わり］を受け取ったとき ペンを上げる
「0−描画x」は文字として入力せず、緑の引き算ブロックを使います。左の穴に0、右の穴にオレンジ色の変数「描画x」を入れてください。
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。
左右とも、描き始めの場所に移ってからペンを下ろします。また、「全部消す」は入力ペンの実行開始時だけに置きます。鏡ペンが動くたびに消すと、線が積み重なりません。ペンを下ろした状態での移動や消去の働きは、Scratch公式公開コードのペン機能で確認できます。
完成を確かめる三つのテスト
緑の旗を押して一度マウスを離し、ステージの中央付近で試します。最初からチョウを完成させるのではなく、次の動きに分けると、反転する場所を見比べられます。
- 右側で短い縦線を描く。左側にも、同じ高さの範囲に縦線が出るかを見ます。
- 右側から中央へ近づける。左側の線も中央へ近づくか確かめます。左右が同じ方向へ流れるなら、鏡ペンのx座標を見直します。
- 一度離して、別の場所から描く。前の線と新しい線がつながらず、左右とも新しい場所から描けるかを見ます。
反対側が上下逆さまになるなら、y座標まで反転していないか確認してください。今回は縦の値をそのまま使います。線が片側に重なってしまう場合は、鏡ペンにも「描画x」をそのまま入れていないか見ます。
片側しか描けないときは、鏡ペンの四つの受信処理がそろっているかを確認します。「鏡を動かす」という名前だけが似た別のメッセージになっていないか、プルダウンから選び直す方法もあります。
動作が確かめられたら、右半分だけを使ってチョウの羽や葉の輪郭を描いてみましょう。中央を越えて描くと、その線も反対側へ写ります。「片側だけ描く」「中央をまたいで描く」の違いを試すと、模様の選択肢が増やせます。
よくある質問（FAQ）
左側から描き始めても使えますか？
使えます。横の値がマイナスなら、「0−描画x」でプラスになります。右側専用の仕組みではなく、描いた位置を中央の反対側へ写す仕組みです。
中央に描いた線が一本に見えるのはなぜですか？
x座標が0なら、反転しても0です。中央では二本のペンが同じ位置を通るため、線が重なります。中央付近で重なること自体は、この作例では想定した動きです。
二本の線を違う色にしてもよいですか？
構いません。鏡ペンの「準備」で指定する色だけを変えます。最初は色を分けたほうが、どちらのペンがどの線を描いているか追いやすい場合もあります。形を確認したあと、好みの配色に戻してください。
ステージの外をクリックしても反応することがありますか？
「マウスが押された」はステージ内だけの判定ではありません。Scratch公式ヘルプでも、画面上のクリックを調べると説明されています。この作例ではステージ内で描き、ブロックの編集に戻る前に赤い停止ボタンを押してください。描画範囲を限定する判定は含めていません。
幼児には座標の説明が難しそうです。全部理解してから使うべきですか？
家庭の遊びとしては、保護者が仕組みを用意し、子どもが描く役から始める方法もあります。「右を描くと左にも出る」を試し、数に関心を持ったら座標の対応表を見せる、という分け方ができます。組み立てを急がず、今楽しめる操作から選びましょう。
描きたい模様を、次の制作の入口に
今回の完成の目安は、片側の線が反対側に写り、マウスを離すと両方の描画が止まることです。その先は、チョウ、仮面、葉など、子どもが試したい形へ置き換えられます。
CotoMiraiでは、一人ひとりの興味や理解度に合わせて目標を相談する個別指導を案内しています。プログラミングやロボットなどの学び方は、個別指導の公式案内で確認できます。
南青山周辺で創作の学びを探している方は、「絵を描く仕組みを作りたい」といった希望を体験申し込み時に伝えてみてください。本記事の作例を体験で扱えるかは未確認のため、事前の相談が必要です。公式案内では年中以上に無料体験、年中未満にはプログラミングトイスポットを案内しています。
参考にした情報
関連する記事
お子さまに合う学び方診断
正解・不正解を決める診断ではありません。今の様子から、取り組みやすい学び方の入口をご案内します。