Open Processingを使う上で大切になってくること2選。

この記事では、将来プログラミングをできるようになるために、プログラムについて学んだ知識を解説していく記事です。
今日学んだプログラミングの知識。

1. 乱数を使って円の描画位置をランダムにする方法。

2. 乱数を使って円の色をランダムにする方法。

乱数を使って円の描画位置をランダムにする方法。

random 関数を使うと、ランダムな値（乱数）を作ることができます。
例えば、random(200) と指定すると、0 以上 200 未満の中でランダムな値が取得できます。
random(100,200) と指定すると、値の範囲が 100 以上 200 未満の範囲となります。
直感的に、 random(200)と指定したらランダムな値の 1 つとして 200 も返ってくると感じますがそうではないので気をましょう。
プログラミングにおいてはこのように指定した値が含まれないことがよくあります。
直感に反するものでややこしいと感じるかもしれませんが、このほうが都合のいいこともあるのでこうなっています。
これを使って、円が不規則に描かれていく Sketch を作ってみます。
それでは circle(mouseX, mouseY, 20); を以下のように書き換えてしまいましょう。

function draw() {
-
  circle(mouseX, mouseY, 20);
+
  circle(random(windowWidth), random(windowHeight), 20);

}

createCanvas(windowWidth, windowHeight); でも使われていますが、windowWidth, windowHeight にはそれぞれブラウザの幅、高さが入っています。
実行してみると、毎秒 60 回ランダムな座標に半径 20 ピクセルの円が描かれていくという Sketch になります。

乱数を使って円の色をランダムにする方法。

次は乱数を使って円の色を変えてみます。
circle 関数を使って円を描く前に、fill 関数という円の色を変更するためのコードを書きます。
色の指定方法は background 関数の時のようにパラメータ 1 つで明るさのみを指定するか、パラメータ 3 つで色味まで指定できます。
今回は以下のように書いて、赤さ、緑さ、青さをそれぞれ 0~255 までのランダムな値で指定しましょう。

fill(random(256), random(256), random(256));

random 関数に渡す値よりも小さい値が乱数として返ってくるので、256 を渡しています。
渡す値を 255 にしてしまうと、乱数の値として 255 が返ってきませんので気をつけてください。
これで毎回円の色をランダムな色に変えることができます。

まとめ

今回はOpen Processingこ少し応用のようなものになってくる知識を二つ解説してみました。このような内容になってくるとやはり何を言っているのかや何が書いてあるのかがわからなくなってき、復習しながらでないと進みづらくなってきました。復習もしっかり行い新しい知識も頭に入れていきたいです。