プログラミング入門

Scratchでバーンスレイのシダを描こう

プログラミング初心者の子供に何を教えたらいいの?とお悩みの保護者のためのScratch(スクラッチ)の入門講座。Scratchで猫の動かし方はわかったけど・・・次にどんなことをしたらいいの?という疑問にお答えするシリーズです。

プログラミングを勉強していると、「再帰」や「フラクタル図形」という言葉を目にすると思います。フラクタル図形についていろいろ調べていると「プログラムでシダが描ける」ということを知ることになるでしょう。
知ってしまったら最後・・・あなたはシダをプログラムで描きたくてたまらないはずです。今日はそんな、シダをScratchで描きたい!というあなたに向けてバーンスレイのシダを描く方法を解説してみたいと思います。

 

1. バーンスレイのシダって何?

シダはわかるけど・・・バーンスレイって何?という方がほとんどだと思いますので、簡単に解説します。

1-1. フラクタルって何?

フラクタルとは、あるもの一部分が、そのもの全体と似ているような図形のことを言います。別の言い方をすれば、あるフラクタル図形の一部分を拡大していくと全体と同じ形が現れる、ということです。フラクタルの図形は、自然界の中でも現れることがあり、シダ、ロマネスコというブロッコリーの一種、リアス式海岸の海岸線などがフラクタル図形だと言われています。

1-2. バーンスレイのシダって何?

シダを描くための方法を発表したのが、英国の数学者マイケル・バーンスレイ氏です。そのため、バーンスレイ氏の式を使って表現されたシダのことを「バーンスレイのシダ」と呼ぶようになりました。

バーンスレイシダは「点」を無数にプロットしていくことで表現されます。そして、その点の座標は以下の式で表現されます。

点を打つ座標を(x座標, y座標)とします。

この上の ①〜④のどれになるか?の確率は次のようになります。①は1%の確率、②と③がそれぞれ7%の確率、④が85%の確率となっています。

 

2. バーンスレイのシダを描こう

では、実際にScratchでバーンスレイのシダを描くプログラム作りに挑戦です!

2-1. 点を描画する

Scratchにペンという機能があることはご存知だと思います。ペンは移動した軌跡に「線」を引く機能です。今回使いたいのは「線」ではなく「点」です。「点」はペンの下げて上げるだけでやってみるだけでOK。

試しにペンの上げ下げだけで、点が描けるかテストしてみたいと思います。

まず、絵のないスプライトを用意します。ペンの太さ10にして、ペンを太くしわかりやすくしておきましょう。そして、ペンを下ろしてすぐに上げるようにします。
こんなプログラムになります。

このプログラムをクリックすると・・・

はい。点が描画できました。シダを作る際には、点は細かい方が美しいのでペンの太さを1に戻して定義ブロックで描画プログラムを定義しておきましょう。

 

2-2. 座標の計算式を作ろう

次に、描画する座標の計算式を変数をつかって表現しましょう。 次のように4つの変数を用意します。

そして、1-2に載せた式にしたがって①〜④の式をブロックで作っていきましょう。

 

2-3. 確率を表現する

点の描画と、点の座標の位置を決める式を作りました。あとは、上の①〜④の式が選ばれる確率を指定するのですが・・・どうしたらいいでしょうか?このような時は乱数を使ってみたいと思います。

確率という変数をつくり、その変数の中に1〜100までの数値がランダムに入るようにしましょう。

たとえば、変数「確率」の中に、1が入る確率はどれぐらいでしょう?もちろん1%ですね。では、変数「確率」の中に、2が入る確率はどれぐらいでしょう?これもやはり1%です。ある数字が現れる確率はそれぞれ1%ということになります。

したがって、下の表のように単純に数字の範囲=確率という風に考えることもできます。

上の表のような考え方で確率を表したプログラムを作ってみましょう。

変数「確率」=1が入る確率が1%なので、式①の計算が行われます。
変数「確率」=2〜8が入る確率は7%なので、式②の計算、
変数「確率」=9〜15が入る確率は7%なので、式③の計算、
変数「確率」=16以上の数値が入る確率は85%なので、式④の計算が行われるということになり・・・プログラムは次のようになります。

 

2-4. アルゴリズムを考えよう

だいぶプログラムが出来上がってきましたね。ここで、アルゴリズムを考えたいと思います。

まず、描き始めのスタート地点を決めないといけないので、x(n)とy(n)にスタート地点の座標を入れて点を描画します。フローチャート風に処理を書くとこんな感じでしょうか。なお、スタート地点の座標はx座標が0、y座標が0になります。

次の点の座標は先ほど作った計算式でx(n+1)、y(n+1)を求めて、計算結果の座標を求めればいいのでこうなります。

ここまでは簡単ですね。さて、次の点の座標を求めるにはどうしたらいいでしょうか?
x(n)とy(n)を式にいれると次の座標x(n+1)とy(n+1)がもとめられるので、さっきの計算結果の値をを変数x(n)、y(n)に入れればいいということになります。これを繰り返せばシダが描けそうですね。フローチャート風に表すとこうなります。

ではこの内容でプログラムを作ってみましょう。

 

2-5. アルゴリズムをプログラムにしよう

バーンスレイのシダは無限に繰り返しを行いますが、まずは繰り返し回数を100回にしてプログラムを作ってみたいと思います。
先ほどまでのプログラムに、考えたアルゴリズムの処理を追加しました。

このプログラムで描いてみましょう。

シダっぽいものが描けましたが・・・絵が小さすぎます。この式で描かれる絵だと小さくなってしまうのですね。

 

2-6. 絵のサイズと繰り返しの回数を調整しよう

では絵を拡大するために座標の位置を縦横にそれぞれ50倍してみたいと思います。

50倍で描くと・・・今度は上に点が散らばってしまいました。縦方向が入りきらないようです。

では、y座標を下にずらしましょう。何度か試した結果、y座標が50倍のままではどうしてもはみ出してしまうことがわかりました。そこでy座標は33倍に拡大し、上で下に-160ずらすとちょうど画面におさまるサイズになりました。

結果がこちら。なんとなーくシダっぽいですが、点が少なすぎてよくわかりません。繰り返しの回数を増やしてみましょう。

繰り返し回数8000回です。まだちょっとスカスカです。

回数を増やして何度も試した結果、64000回!でこんなシダが描けました。やったー!

この作品はこちらにあります。

シダの色を変えてみたり、繰り返しの回数を減らしたり、増やしたり・・・といろいろリミックスしてみてください。

4. まとめ

今回は、バーンスレイのシダを描くことをテーマに以下のことを学びました。

・点の描画方法
・確率をScrathでどう表すか?
・アルゴリズムをどう考えるか?

一見難しそうな作品でもわかるところから一つづつ分解していけば大丈夫。ぜひいろいろな作品作りにチャレンジしてみてくださいね。

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