プログラミング入門

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

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

1. バラ曲線(Rose Curve)って何?

バラ曲線(Rose Curve:ローズカーブ)はバラの花のように見える曲線のことで、次の式で表現できる曲線のことです。


なんだか難しくてよくわかりませんね・・・。でも、上の式をScratchの数式に当てはめるだけなので、意味はわからなくても大丈夫です!できあがりは次のような素敵な模様になります。頑張りましょう。

 

2. 数式を作る

ではここから実際につくる手順をご紹介いたします。
 

2-1. 変数を作る

まず、変数を作りましょう。変数は今回はn、d、θの3つです。Scratch内ではギリシャ文字が使えないようなので、θは「シータ」というカタカナにしました。

 

2-2. rの式を作る

絵のないスプライトを用意して、そちらで式を組み立てていきたいと思います。まずは以下の式で表されるrから。

 
まずは、下の赤枠の部分を作ります。

 
これはScratchでは次のように表現します。

 
これは分解すると次のようになっています。n/dブロックを先に作って、掛け算のブロックの中に入れています。

 
つづいて、上で作ったブロックを使って、以下の赤枠部分を作ります。

まず、以下のブロックを用意します。

 
このブロックの「平方根」と書かれたところの▼をクリックすると、いろいろな計算方法を選ぶことができます。

 
今回は、この中から「cos(コサイン)」を選びましょう。そして、先ほどのブロックをcosブロックの中に入れると

 
できました。

 
さて、いよいよrの最後です。

両側にある棒みたいな記号は「絶対値」です。先ほどのcosと同じブロックの中に「絶対値」がありますのでそちらを使います。

 
はい。rの式が完成しました!

 

2-3. xとyの式を作る

では、次にxの式を作っていきます。xの式はこうでした。

 
先ほど作ったrとcosθを掛け算するだけですね。

 
xの式が完成しました。

 
 
yの式は次のようになっています。

 
xのcosのところがsin(サイン)に変わっただけですね。なので、先ほど作ったxの式をコピー(複製)しましょう。xの式の一番外側のブロックを右クリックすると、メニューが表示されます。

 
複製を選ぶともう一つ同じものができるので、複製された方のcosのところをsinに変えましょう。

 
これで、xの式とyの式が完成です。

 

3. 変数の中身を設定して線を引く

前の章までで式が完成しました。ここから先は変数を自由に設定できるようにしていきます。
 

3-1. nとdはどうやって決める?

Wikipediaにdとnの数値と、描かれる曲線の関係を表わした表が記載されています。
https://ja.wikipedia.org/wiki/%E3%83%90%E3%83%A9%E6%9B%B2%E7%B7%9A
nとdは自由に変えられるようにしておくと、いろいろな曲線が引けて楽しそうです。そこで、nとdの値はキャラクターに質問させるようにしてみたいと思います。
 
まず、Goboというキャラクターをスプライトに追加します。

Goboに対して次のようなプログラムを作ります。

「聞いて待つ」ブロックを使って、dの値を質問し答えを変数に設定するようにしました。

 

3-2. θはどうやって決める?

次はθです。これは絵のないスプライトで設定します。θは角度なので、0から徐々に増えていけばOKです。
なのでとても簡単。たったこれだけ。

 
このままだと、ずーっとθの値が大きくなり続けてプログラムが停止しないので、ある程度、θの値が大きくなったところでプログラムが停止するようにしておきましょう。

 

3-3. スプライトのxとy値を設定する

3つの変数の値を決めたので、いよいよスプライトを動かして線を引いていきましょう。
 
まず、ペンを下ろして線が引かれるようにします。そして、先ほどのθのブロックにxとyの座標を設定するプログラムを追加します。「x座標を●、y座標を●にする」ブロックにxとyの式を入れていきます。このとき、そのままだと描かれる曲線が小さ過ぎるので100をかけて大きさを100倍にしています。

基本となる部分のプログラムの作り方はここまでです。

 

3-4. 線の太さや色などを調整

その他、好みに応じて線の色や太さを変えたり、スタート地点を設定したり、また背景を変えたりするプログラムを追加してみてもいいですね。
筆者は今回は次のようなプログラムを作ってみました。
 
最初は背景が方眼紙です。

 
バラ曲線が完成すると、背景が黒くなって線を引き立たせるようにしました。

 

3-5. dとnの組み合わせでいろいろな曲線を描こう

サンプルプロジェクトはこちらです。ぜひ試してみてください。
https://scratch.mit.edu/projects/216952722/

埋め込み用コード

 

4. まとめ

今回はペンと難しい式を使ってバラ曲線にチャレンジしてみました。ちょっと難しかったかもしれませんが、掛け算や割り算を入れ子にしていくだけです。わかるところから、少しづつ作っていくようにしましょう。
 
複雑な幾何学模様を作るポイントは以下です。
 ・x座標の式とy座標の式を入手する
 ・式を分解し、少しづつ作る
 ・基本形ができたら、ペンの色やペンの太さなどを調整していく

 
難しいプログラムも、わかるところから手をつけていき、徐々に機能をつけたしていくと以外と簡単に作ることができますよ。まずは式を表現する練習から始めてみてくださいね。

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