プログラミング入門

プログラミング初心者のためのScratch(スクラッチ)入門-ペン編(6)

プログラミング初心者の子供に何を教えたらいいの?とお悩みの保護者のためのScratch(スクラッチ)の入門講座。Scratchで猫の動かし方はわかったけど・・・
次にどんなことをしたらいいの?という疑問にお答えするシリーズです。
今回は「ペン」をつかった応用作品についてお届けします。
 
対象は小学校高学年のお子さん向けになっています。小学校低学年のお子さんは、保護者がまず作り、お子さんがプログラムを改造するという方法がおすすめです。
 
今回も幾何学模様2種類を作成してみましょう。
 

1. リサージュ(リサジュー:Lissajous)図形を描いてみよう

1-1. リサージュ図形(Lissajous Figure)って何?

直行する単振動を合成してできる曲線のことをリサージュ図形といいます。リサジューさんという人が考えた図形だからリサジュー図形というそうです。教科書に「リサージュ」という呼び方が採用されているという情報があったため、こちらでは「リサージュ」という呼び方にします。

リサージュ図形は振り子からインクや粉(食塩など)を垂らして描くこともできます。縦方向と横方向に揺れるように動かしてみると作れます。実験した図形とプログラミングで作った図形を比較してみても面白いかもしれません。

▼実験の参考サイト
https://site.ngk.co.jp/lab/no66/exam.html
 

1-2. リサージュ図形(Lissajous Figure)の式をScratchで表そう

リサージュ図形の式はこちらです。

 

今回はaを「sinの変数」bを「cosの変数」という名前で変数を作りました。tはそのまま「t」という変数にします。これをScratchで表現すると次のようになります。

 

1-3. リサージュ図形(Lissajous Figure)をペンで描こう

式ができたら、ペンで描くプログラムを作ります。適当なスプライトを用意して、次のようなプログラムを作成しましょう。
上記の式そのままでは図が小さすぎるので、100倍の大きさで描くようにしました。

 

sinの変数とcosの変数は、スライダーで自由に設定できるようにしています。このプログラムを実行すると・・・リサージュ図形が描けましたね!(線がかなりカクカクしているのが残念ですが。)

 

1-4. 色や太さを調整しよう

線がカクカクしていて見た目が残念なので少し線を太くしてみます。またグラデーションカラーの線になるようにペンの濃さを調整するブロックを追加しました。


 

相変わらずカクカクした線ですが、少しは綺麗になったでしょうか????

 

1-5. いろいろな模様を描いてみよう

sinの変数とcosの変数を変化させていろいろな模様を作ってみましょう。

sinの変数=8、cosの変数=9

 

sinの変数=3、cosの変数=7の場合

 

sinの変数=2、cosの変数=9の場合

 

これ以外にもいろいろな数値を入れて試してみてくださいね。

このサンプルプログラムはこちらです
https://scratch.mit.edu/projects/217524234/
 

 

2. アステロイドを描いてみよう

2-1. アステロイドって何?

アステロイドは日本語で「星芒形」という形のことで、4つの尖った点をもつ曲線のことです。内サイクロイドと呼ばれる曲線の中の一つです。
 

2-2. アステロイドの式をScratchで表そう

アステロイドの式はこちらです。

 

cosとsinの三乗に定数をかけたものが、アステロイドの式です。Scratchには●乗という式がありません。
ですから三乗を表現するためには3回掛け算をしてください。具体的には掛け算ブロックを入れ子にします。
 
それぞれxとyは次のようになります。

 

2-3. アステロイドをペンで描こう

式ができたら、ペンで描くプログラムを作ります。絵のないスプライトを用意して、次のようなプログラムを作成しましょう。

 
tは1ずつ増えるようにして、360まで繰り返します。aはアステロイドの大きさになりますので、まずは100を設定してみました。このプログラムを実行すると・・・アステロイドの完成です。

 

2-4. だんだん大きくする

このアステロイドは半径100歩(ピクセル)の円に内接するアステロイドです。半径の大きさは変数aで決めています。変数aを1から100までだんだん大きくしてアステロイドを重ねて模様を作ってみましょう。

まず、変数aを1にしておきます。変数tが360でアステロイドを1回描き終わったら、変数aを大きくします。また変数tは0に戻すようにしておきます。
 
このプログラムで描いた図形がこちらです。

 
綺麗な図形になりましたね。もう少し繰り返しの数を増やして図形を大きくしてみましょう。
先ほどはアステロイドを20回繰り返し描きましたが、今度は35回に増やしてみました。

 
大きな模様になりましたね。
 

2-5. 色・太さ・濃さを調整する

いつものように、ペンの色や太さや濃さを調整するブロックを追加します。

 
ペンの太さを5にしてだんだん色が薄くなるようにすると・・・

こんな図形ができあがりました!
 

2-6. 横に並べてみる

この図形、一つだけだとなんか寂しいですね。並べると幾何学模様がつくれそうな気がしてきました。そこで図形の大きさを小さくして、横に並べてみたいと思います。
新しく「x座標移動距離」という変数を作って、次のようにプログラムを修正してみました。

 

x移動距離をだんだん大きくしていくことで、図形が描かれる場所をどんどん横方向(=x座標が大きくなる方向)へ移動していきます。
このプログラムで描いた図形がこちらです。

 

2-7. 縦にも並べてみる

横方向がうまくいったので、縦方向にもチャレンジしてみましょう。新しく「y座標移動距離」という変数を作って、次のようにプログラムを修正してみました。

 

このプログラムの実行結果はこちらです。

 

縦横に図形を並べて模様ができました。最後に背景に色をつけて完成です。

 

サンプルプロジェクトはこちらです。色や線の太さ、濃さを調整してリミックスしてみてくださいね。
https://scratch.mit.edu/projects/218314521/


 

ペン編(6)まとめ

今回はリサージュ図形とアステロイドを作ってみました。
シンプルな図形は並べてみると幾何学模様を作ることができます。さらにずらして重ねて色を変えてみても面白そうです。
 
作り方をまとめると次のようになります。
 ・基本の式で図形を作る
 ・大きさを変えて重ねてみる
 ・場所をずらして並べてみる

 
この手順を繰り返しと変数を組み合わせて作ります。
まずは変数の値を変えてリミックスするところから始めてみてくださいね。

伴野悠佳 / YUKA TOMONO
この記事の著者伴野悠佳 / YUKA TOMONO
教育ヲタクの1児の母。自称ニコニコキッズクリエーター。東京理科大学大学院卒。元SE。小学生の頃から教育書を読んでいた教育ヲタク。大学では、電池の素材の性質について実験とコンピューターシミュレーションを比較する研究を行っていたことがきっかけでSEになる。出産&育休後、子ども向けプログラミング教室講師、子どもたちの考える力を育てるオンライン塾の講師。