クリエイティブコーディング(p5.js)入門(高尾俊介)第6・7回

以下の講義を進めていきます。

【2020後期】プログラミングB – Takawo Shunsuke | 高尾俊介

今回は第6回目と第7回目。

 

第6回の講義のリンクはこちら。


第7回の講義のリンクはこちら。

 

第6回のポイントは、
原点の座標移動・回転・縮小の際には、pushとpopで挟む形で行う
ということ。
push→translate→rotate→図形描画→popの流れ。
それを利用して作ったものがこちら
(お手本のソースコードをちょっと改造したもの)

f:id:techtack:20211017102727p:plain

 

割とあっさりしていたので、第7回目の講義も続いてやりました。

第7回は、ランダム、ノイズ、マッピング


random(): ランダム。乱数を生成。

random()関数の使い方は、3つ。
①random();  //0~1の範囲で不規則な数値を生成。
②random(max);  //0~maxの範囲で不規則な数値を生成。
③random(min, max);  //min~maxの範囲で不規則な数値を生成。

 

お手本コードを参考に写経したもの↓。

f:id:techtack:20211017215210p:plain

f:id:techtack:20211017215228p:plain

 

f:id:techtack:20211017215254p:plain



noise(): ノイズ。0〜1の範囲でゆらぎを持った連続的に変化する数値を生成。

不規則で連続的なゆらぎを持った値を生成する。
ポイントとしては、変化する値を小さくして、ゆらぎを小さくすること。
10や1などの数値ではなく、0.1や0.01など小さい値を入れる。

下は、xの値を1/100にして生成。

f:id:techtack:20211113150457p:plain


xをそのままの値で、noise()の引数に入れると下のような感じ。

f:id:techtack:20211113150825p:plain



map(): マッピング。範囲A(minA,maxA)にある値nを範囲B(minB,maxB)に再配置する。

以下のコードを実行。

map関数を用いて、noiseで生成した0〜1のランダム値を、色相および円の大きさにマッピングした。

p5.js Web Editor

f:id:techtack:20211113150925p:plain

 

以上になります。