前回の記事で、プログラミングを学びはじめるにあたって、明確な目的が絶対に必要かといえばそうではないということをお伝えしました。目的は大切ですが、まだ経験したことのない多くのことは、まず遊ぶように「いろいろなことを試す」ことが大事だということも前回の記事で触れたとおりです。では、そのような入り口はどこにあるのでしょうか。今回はそのことについてお話しします。
- コンピューターで「遊ぶ」ことが大事。
- プログラミングで絵を描いてみよう。
- やり方次第で絵以外にも応用できる。
これまでの【やらずに死ねないプログラミング】はこちら
コンピューターという「道具」を遊ぶには
プログラミングで「絵を描く」ことはお勧めのひとつです。プログラミングで絵を描くというと、ピンと来ない人もいるかもしれませんが、ゲームやコンピューターグラフィック（CG）などは、プログラミングで描かれていることが多いです。
【コラム】なぜ絵なの？
絵を描くのであればプログラミングより、パワーポイントやお絵かきソフトを使って描いたほうが早いかもしれません。それなのにわざわざプログラミングで絵を描くことが必要なのでしょうか？ どうせならプログラミングでコンピュータにもっと高度な計算をさせたいと思いますよね。
「絵」をプログラミングしてみる大きな利点は、絵は楽しいからとか、子どもでも理解できるからというだけではありません。結論を先に言ってしまえば、絵としての結果には多様性があるからです。言い換えるなら、プログラムは単純でも、その結果の絵は千差万別、作者の個性が出しやすいのです。
もう少し説明しましょう。結果が絵ではない場合、たとえば「あるクラス全員のテストの点数の平均値を求めるプログラム」があったとします。これには色々な書き方がありますが、正解はたった1つであって、正解と違う結果を出力するプログラムはすべて間違いです。
このように、計算で正しい答えを導くためのプログラミングは、学び初めのうちに覚えたプログラムを活かして創造的なトライ&エラーをするには、できることの幅が狭くあまり適さないのです。
作ったものに自分の個性が映し出される経験は、ものづくりを学ぶ上でとても大切です。自分が書いたプログラムが意図通りであったり、意外な結果であったりすることを視覚を通じて認識し、再びプログラムにフィードバックする。この繰り返しがコンピューター本来の道具性を引き出し、深い理解につながります。
絵をプログラミングする
絵をプログラミングするのは、どのような感じか、ここからは筆者も美術大学で教えている「 」というプログラミング言語を使って、実例を紹介しましょう。
まずは、円を描かくプログラムです。
ellipse(50,50,30,30);
これを実行した結果はこのようになります。
どうしてこの１行がこの絵になるのか、少し翻訳してみます。「ellipse」とは「円を書きなさい」という命令です。そして、カッコの中にある4つの数字「50,50,30,30」は円の場所や大きさを指示しているものです。つまりellipse(50,50,30,30); は、「画面の左端から右に50、上端から下に50の位置に中心があり、幅が30、高さが30の円を書きなさい」という意味になります。
さて、ルールがわかったところで、コードを２つ追加してみましょう。
ellipse(50,50,30,30);
ellipse(20,50,30,30);
ellipse(80,50,30,30);
追加した2つのコードは、はじめに書いたコードと比べて、カッコ内の先頭の数字が違います。（20と80になっています。）先頭の数字は、円の中心を画面の左端からみて右にどれだけ離れた位置に置くかという意味でしたね。ですから、最初に書いた円を挟み込むように2つの円が描かれたわけです。
次に、文字を表示する「text」という命令を使ってみましょう。先ほどのコードに1行追加し、「hello」という文字を、画面左端から右に5、上端から下に30の位置に表示させます。
ellipse(50,50,30,30);
ellipse(20,50,30,30);
ellipse(80,50,30,30);
text("hello", 5, 30);
さらに、線を表示する「line」という命令を使います。先ほどのコードに1行追加し、画面左端から右に50、下に0の位置と、右に50、下に100の位置を結ぶ線を引きます。
ellipse(50,50,30,30);
ellipse(20,50,30,30);
ellipse(80,50,30,30);
text("hello", 5, 30);
line(50,0,50,100);
ここまでに出てきたルールは、円を描く（ellipse）、文字を打つ（text）、線を引く（line）の3つです。しかし、たった3つのルールを覚えただけでも、その表現の幅はとても広いことが感じていただけたでしょう。
さて、ここまでのプログラムと結果の関係から、この「遊び場」の秩序が理解できたかと思いますが、もう少し複雑な秩序を導入しましょう。それは、反復とランダムです。
まず、反復です。これまでのルールでは、円を100個描くには、ellipseを100行も書かなければいけませんが、同じことを決まった回数だけ繰り返すのであれば、その必要はありません。「決まった回数だけ繰り返す」には「for」という命令を使います。次の例では、「for」を使って「ellipse」を100回繰り返すように指示しています。
for(int i=0; i< 100; i++){
ellipse( 50, 50 , 20, 20);
}
ただし、同じ場所に同じ大きさの円を100回描いても、結果は1個の円だけしか描かれていないように見えます。そこで、円の中心を毎回ランダムに変えながら100回繰り返すようにしたものが次のコードです。
for(int i=0; i<100; i++){
ellipse( random(0,100), random(0,100), 20 , 20);
}
「random(0,100)」とは「0から100までの間の任意の数」という意味になります。このように書くことで、円の中心は、画面端から右にも下にも任意の距離（ただし0〜100の間）の位置に描かれることになります。このルールがわかれば、文字をランダムに反復できるでしょう。
for(int i=0; i< 100; i++){
text("hello",random(0,100) , random(0,100));
}
また、線をランダムに反復させることもできるでしょう。
for(int i=0; i< 100; i++){
line(random(0,100), random(0,100), random(0,100), random(0,100));
}
最後に画面を任意の大きさに広げる「size」という命令を使って、描く領域を幅600、高さ600に広げ、反復とランダムを使って、円や文字や線を描いてみます。
size(600, 600);
for (int i=0; i< 2000; i++) {
line(random(0, 600), random(0, 600), random(0, 600), random(0, 600));
}
for (int i=0; i< 100; i++) {
ellipse( random(0, 600), random(0, 600), 20, 20);
}
for (int i=0; i< 50; i++) {
text("hello", random(0, 600), random(0, 600));
}
反復の回数とランダムの使い方を少し変えれば、全く違った絵になります。
size(600, 600);
for (int i=0; i< 2000; i++) {
line(300,300, random(0, 600), random(0, 600));
}
for (int i=0; i< 100; i++) {
ellipse( random(0, 600), random(300, 600), 20, 20);
}
for (int i=0; i< 50; i++) {
text("hello", random(0, 600), random(0, 300));
}
いかがでしょうか。シンプルなルールを少しずつアレンジしていくだけでも、結果の多様性は無数に広がることが伝わったのではないでしょうか。
もちろん、今日ご紹介したことができることのすべてではありません。他にも、色を変える命令や、曲線を描く命令、画像を表示する命令、3Dの物体を表示する命令などを使いこなせば、多様性の幅も増え、より創造的なコードが書けます。
興味次第で絵以外のことにも応用できる
最後に、「やっぱり絵を描いているだけじゃ不安」と思う方に伝えたいことがあります。今回紹介したプログラムは、Processingという言語を使いました。Processingは初心者にも優しく、かつ、視覚的な表現をシンプルなコードで実現することに重きを置いて開発された言語です。（ちなみに、前回紹介したIEEEの調査に基づくポピュラーなプログラミング言語ランキングでの順位は25位。PerlやObjective-Cよりも上位です。）
また、Processingは他の言語との連携を考慮しながら発展してきた歴史があります。たとえば、Webブラウザで動作するアプリケーション開発言語であるJavaScriptに対応するp5.jsや、ハードウェアを制御するArduinoなど、Processingから派生した言語も多くあります。ですから、もし他の分野に興味が向いてきてもProcessingに慣れた後であれば、比較的スムーズに移れるのです。
視覚的なプログラムから少しずつ練習を重ねることが効果的
「遊び」を深めるためには、視覚的なプログラムから少しずつ練習を重ねることが効果的です。次回は、実際に自分で取り組むためのプログラミングツールについてご紹介します。
記事トップの写真について：多摩美術大学情報デザイン学科2年次のカリキュラム「プログラミング演習」の作品展示風景。Processingで作られたグラフィカルな作品が並ぶ。（筆者撮影）
この記事が気に入ったら「フォロー」＆「いいね！」をクリック！バレッドプレス（VALED PRESS）の最新情報をお届けします！
これまでの【やらずに死ねないプログラミング】はこちら
