趣味としてのクリエイティブ・コーディング：002：プログラムを書いてみよう

deconbatch

2018年10月8日 18:25

前回でクリエイティブ・コーディングの第一歩を踏み出しました。
今回は自分でプログラムを書いてみましょう。

プログラムは一からは書かない

プログラムを一から（ゼロから？）書くということはあまりありませんし、とても難しいものです。
ここでは、『既にあるコードを変更する、書き足す』ことから始めていきましょう。

まずは今回用のファイルを用意

前回のプログラムは記念すべき第一作ですから、これは取っておきたいですよね。
そこで、前回作ったファイルをコピーして、別の名前で今回用のファイルを作りましょう。

前回のプログラミングのソースを再掲しておきます。

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
  </head>
  <body>
    <script>
// Creative Commons CC0.
      
function setup() {
    createCanvas(400, 400);
    colorMode(HSB, 360, 100, 100, 100);
    blendMode(SCREEN);
    noStroke();
    noLoop();
}

function draw() {
    background(90, 20, 10, 100);
    translate(40.0, height / 2.0);
    fill(0, 60, 50, 100);
    for (i = 0; i < TWO_PI; i += 0.03) {
	ellipse(i * 50, -sin(i) * 50, 5, 5);
    }
}

    </script>
  </body>
</html>

そして、念のために今回用のファイルをブラウザで開いて、下記のように前回と同様の結果が得られることを確認しておきましょう。

プログラムとコード？
プログラム、コード、ソースファイル、どれも同じようなものを指している言葉です。
それぞれが何を指しているかはやってるうちに自然とわかってくると思います。
あまり気にしないで進めましょう。

さあ、プログラムを書いてみよう！

それでは、まずテキストエディタで今回用のファイルを開いて下さい。
そして、下記の最初の数値 0 を 120 に書き変えて、ファイルを保存してみてください。
保存は「上書き保存」でいいですよ。

fill(0, 60, 50, 100);

そしてブラウザを見ると…

何も変わってない！

そうです。プログラムのソースコードを変えただけだとブラウザには反映されません。

今ブラウザに表示されているのは、さっきファイルを開いて実行したときの結果がそのまま表示されているだけなんですね。
つまり、あなたが変更した新しいプログラムは、まだ実行されていないんです。

変更した新しいプログラムを実行するには、プログラムを読み込み直しましょう。
それには、いちいちファイルを開き直す必要はなくて、ブラウザで「再読込」をすれば OK です。

あるいはキーボードで Ctrl キーを押しながら離さずに r キーを押してもいいです。

どうでしょう？こうなりましたか？

ん？緑より青色が好き？
じゃあ、さっきのところを 240 にしてみましょう。

fill(240, 60, 50, 100);

こう変えて、保存して、ブラウザで再読込！

ほら！青くなりました。
120 だと緑で 240 だとなんで青になるのかは、おいおい説明いたしましょう。

次は下記の部分の -sin(i) * 50 を 150 にしてみましょう。

ellipse(i * 50, -sin(i) * 50, 5, 5);

どうです？大きくなりました？

じゃあ、 20 にしてみると？

ellipse(i * 50, -sin(i) * 20, 5, 5);

控えめなサインカーブになりましたか？

なんでそうなるのか？ -sin(i) * 50 にどんな意味があるのかはまあ置いといて。

どうでしょう？「ああ、fill() で色がつくんだな」とか「ellipse() はサインカーブを書くのに使われてるんだな」とか何となく感じられたんじゃないですか？

正解です！

私は fill() や ellipse() についてここまで一言も説明していません。
なのに、あなたは fill() や ellipse() が何をしているのかわかってしまいました！
天才ですかっ！？

きっとそうなんだろうと思いますが、そもそもプログラムにはこういう所があります。
見ただけでは何なのか全然わからなくても、手を加えながら動かすことでわかってくることが多いのです。
この「手を加えて動かす」というのはとっても大事なんです。

実はここからが本番です！

今回プログラムコードに手を入れて新しいプログラムを作ることができました。

ここまでもそれなりに楽しかったとは思いますが、ここで「ふ～ん、なるほどね」と終わってはもったいない。
本当の楽しさはここからなのです！

今回変更した箇所を説明した値とは別の数値にして試したり、説明しなかった箇所だけど、何やら数値が書いてある所を思い切ってエイヤッ！と変更してみたり、いろいろ試してみましょう。

変更したら保存して、ブラウザで再読込を忘れないでね。

とんでもない結果になったり、何も変わらなかったり、ヘタするとエラーになったりすると思いますが、その「どうなるかわからない」ドキドキ感がたまらないのです。

もし動かなくなったりしても、変更元のソースコードは前回作った別のファイルにちゃんと入っているので、いつでもそこからコピペして元に戻すことができます。
安心してメチャクチャ暴れてください！

私がメチャクチャに暴れた結果はこうなりました。

更新履歴
18/10/13 「さあ、プログラムを書いてみよう！」で最初の変更から保存の説明を少し丁寧に追記

この記事が面白かったらサポートしていただけませんか？ぜんざい好きな私に、ぜんざいをお腹いっぱい食べさせてほしい。あなたのことを想いながら食べるから、ぜんざいサポートお願いね 💕