【実践例】プログラミングで対称な図形を学ぶ

プログラミングで正多角形を学んだ記事をこのまえ共有させいただきました。

今回は、プログラミングで対称な図形を学んだ実践例についてご紹介いたします。実際に東京コミュニティスクールの小学５・６年生と算数の学びの中でプログラミングを使いながら「対称な図形」の単元を学びました。

基本的な学びの方針

今回は「言葉で表現する」ということに最も主眼をおいています。まさにそれこそ、プログラミングの本質です。そして、今回の学びの流れは、「図形を言葉で表現して伝える」ことから始まり、伝える相手を途中でコンピュータに変え、Processing言語を使って「点対称・線対称」な図形を描いていくことで、「手順の言語化」と「座標軸」の感覚を、遊びながらつけてしまおうという学びです。

学びの流れ

１．図形を言葉で表現して伝え合う
２．線対称・点対称な図形を言葉で表現する。
３．線対称な図形と点対称な図形を方眼紙のノートに手書きする
４．ノートに書いた図形をProcessingで描く
５．点対称でもあり線対称でもある「豪華な」図形をノートに手書きする
６．点対称でもあり線対称でもある「豪華な」図形をProcessingで描く

１．図形を言葉で表現して伝え合う。

みなさんは、ノートの上に書いた絵を相手に見せずに、正確に伝えることができるでしょうか？

例えば、円を言葉で表現して相手に同じものを書かせることを考えれば、いろいろな方法があることに気づきます。

「直径が１０ｃｍの円を書いて」
「コンパスの幅を５ｃｍにして、ノートの中心で回して書いて」

「絵描き歌」はよくできていて、聞けばうまく目標の絵を書くことができます（できるはずです）

円は簡単ですが、これが幾つかの図形が組み合わさったものであれば、書くことがより難しくなります。

今回は、まず直線を組み合わせた図をノートに書き、その図形を書くための手順を、図形を見せずに相手に伝えて描いてもらうワークから始まります。ルールはこうです。

＊２人１組になって、相手の机の上が見えないくらい向かい合って離れる。
＊ノートに１０ｃｍのマスをつくり、その中に直線を使った絵を書く。
＊直線を使った絵を書く手順をことばにする。
＊交代で、相手に絵を見せずにその絵を書く手順を伝える。
＊相手が書いた絵と自分の意図した絵を見比べる。
＊大きく違っていたら手順を見返してみる。

こうして交互にやっていくとかなり盛り上がります。

「うまく伝えられた！」という子もいるかもしれないし、逆に「最初の位置がうまく伝えられなくて変なことになった」という子も出てくるはずです。

うまくいった伝え方も、うまくいかなかった伝え方も、全員にシェアできると、「どのように相手に伝えるか」の工夫への関心は高まるはずです。

２．線対称・点対称な図形を言葉で表現する。

では、どのようにすれば、線対称、点対称な図形を言葉で表現できるでしょうか？

これもまた案外難しく、

「真ん中で折り返してぴったり」や

「回転させてピッタリ」という、

紙に書いてある場合を例に挙げて説明してくれる子が現れることでしょう。もちろん、この説明は私達の直感にそっているので、わかりやすい説明です。ちなみに、それぞれの特徴をまとめると下記のようになります。

図形をことばで表現するためには色々な方法がありえます。ただし、この線対称と点対称でいえば、「対称の軸」と「対称の中心」というキーワードを外すことはできません。

どこに対称の軸や対称の中心を持ってこれるか、そこまで説明ができるようになってくれば、このステップもクリアと言っていいでしょう。

３．線対称な図形と点対称な図形を方眼紙のノートに手書きする

対称の軸や対称の中心に関して説明ができるようになったら、線対称、点対称な図形を描いてみましょう。

対称の軸や中心からの線を引いてみたり、長さを図ってみることで、自分で描いた図形が「本当に線対称か、点対称か」ということを確かめることができるようになります。

方眼紙のノートを使っていればある程度補助がある上で図形を描くことができます。今回はあくまで「対称な図形」への理解を高めるためなので、「さらでも正確な図形を描ける」ことは求めません。方眼紙を使えばスピーディーにたくさんの図形を描くことができるので、メリットが高いです。

４．ノートに書いた図形をProcessingで描く

それでは、ノートに書いた図形をProcessingで描いてみましょう！Processingは、コンピュータ上で動かすことのできる言語で、点を指定したり長さを指定したりすることで簡単に図形を描くことができます。

Welcome to Processing!

まずは簡単に、正方形と直角二等辺三角形から。

quad(150,150,150,300,300,300,300,150); #四点の座標を指定して正方形を描く。
triangle(350,200,450,300,350,300); #三点の座標を指定して直角二等辺三角形を描く。

この二つの行だけで簡単に図形が描けてしまいます。特にquad関数は、４点を指定して図形を描くことができるので大変便利な関数です。

お次は、線対称な図形。条件として「対称の軸」も描くことを伝えてあります。

line(150,100,150,200); #二点を指定して縦線を描く
line(100,150,200,150); #二点を指定して横線を描く

line関数を使うだけで簡単に直線が描けてしまいます。今回の左上の図形の場合には二通りの対称の軸があるので、対称の軸が二本描かれています。

そして、点対称な図形。条件として「対称の中心」も描くことを伝えてあります。

strokeWeight(5); #点の大きさを5に指定する（デフォルトは1）
point(150,150); #(x,y)=(150,150)に対称の中心を描く

point関数で点を描く時、注意が必要なのはstrokeWeight関数を使わないと点が小さくなってしまうことです。まず大きさを指定してから点を描きましょう。

５．点対称でもあり線対称でもある「豪華な」図形をノートに手書きする

では、最終アウトプットに向けて設計をしていきます。点対称でもあり、線対称でもある図形をノートに手書きして設計をしていきます。

今までのProcessingの関数からすれば、「座標」を強く意識していたので、ほとんどの子どもたちは設計図の各点の座標を書き込むようになりました。

６．点対称でもあり線対称でもある「豪華な」図形をProcessingで描く

実際に豪華に仕上がったかはなんとも言えない感じではありますが、豪華さを目指してつくった作品を３つご紹介します！

円が入っていたり、三角形と☓印が入っていたり、様々な工夫がなされています。入れ子になっている図形もなかなかおもしろいですね。

ここまでで一連の「点対称・線対称」の学びです。前回の記事も同様に「図形」の問題がややプログラミングと融合しやすい印象があります。というのも、どちらのプロジェクトにおいてもプログラミングは「表現方法」の一つとして活躍できる場面があるためです。

ぜひ、子どもたちの「表現方法」としてプログラミングを算数やその他の学びで活用してみてください。