クリエイティブコーディング(p5.js)入門(高尾俊介)第6・7回
以下の講義を進めていきます。
【2020後期】プログラミングB – Takawo Shunsuke | 高尾俊介
今回は第6回目と第7回目。
第6回の講義のリンクはこちら。
第7回の講義のリンクはこちら。
第6回のポイントは、
原点の座標移動・回転・縮小の際には、pushとpopで挟む形で行う
ということ。
push→translate→rotate→図形描画→popの流れ。
それを利用して作ったものがこちら
(お手本のソースコードをちょっと改造したもの)
割とあっさりしていたので、第7回目の講義も続いてやりました。
第7回は、ランダム、ノイズ、マッピング。
random(): ランダム。乱数を生成。
random()関数の使い方は、3つ。
①random(); //0~1の範囲で不規則な数値を生成。
②random(max); //0~maxの範囲で不規則な数値を生成。
③random(min, max); //min~maxの範囲で不規則な数値を生成。
お手本コードを参考に写経したもの↓。
noise(): ノイズ。0〜1の範囲でゆらぎを持った連続的に変化する数値を生成。
不規則で連続的なゆらぎを持った値を生成する。
ポイントとしては、変化する値を小さくして、ゆらぎを小さくすること。
10や1などの数値ではなく、0.1や0.01など小さい値を入れる。
下は、xの値を1/100にして生成。
xをそのままの値で、noise()の引数に入れると下のような感じ。
map(): マッピング。範囲A(minA,maxA)にある値nを範囲B(minB,maxB)に再配置する。
以下のコードを実行。
map関数を用いて、noiseで生成した0〜1のランダム値を、色相および円の大きさにマッピングした。
以上になります。