差分

このページの2つのバージョン間の差分を表示します。

--- lecture:design_with_prototyping:p5.js編:15.ランダムとノイズ [2021/05/13 00:10] – [一本の線] baba
+++ lecture:design_with_prototyping:p5.js編:15.ランダムとノイズ [2021/05/25 13:31] (現在) – [ふにゃふにゃする丸] baba
@@ 行 90: / 行 90: @@
 </WRAP>
+では次に上記のコードにおいて，yの値をrandomを使って上下+20, -20方向にずらしてみようと思います．以下は静止画ですが，実際は「ガチャガチャガチャ〜」っと線画描かれる様子が観察できます．これは描画するごとにrandom(-20,20)によって適当な値が入るためです．そりゃそうだと思っていただけると思います．
+<WRAP group>
+<WRAP half column>
+<code>
+function setup(){
+  createCanvas(500,250);
+}
+function draw()
+{
+  background(255);
+  beginShape();
+  for( let i = 0; i < width; i += 10){
+    vertex(i, height/2+random(-20,20));
+  }
+  endShape();
+}
+</code>
+</WRAP>
+<WRAP half column>
+出力結果.png{{:lecture:design_with_prototyping:p5.js編:pasted:20210513-001257.png}}
+</WRAP>
+</WRAP>
+ではここで，ちょっと趣を変えます．この「ガチャガチャ〜」っていうのがうるさいので，少しなめらかに変化して「うにょにょにょ〜」みたいに変化してくんないかな〜って考えてみます．なめらかに変化していく様子に修正するには，noiseを利用すると良いです．ただしnoise関数は先程のrandomと違って，返す値は0.0-1.0と決まっていますので，その点注意してください．
+<WRAP group>
+<WRAP half column>
+<code>
+function setup(){
+  createCanvas(500,250);
+}
+function draw()
+{
+  background(255);
+  beginShape();
+  for( let i = 0; i < width; i += 10){
+    vertex(i, height/2+50*(0.5-noise(i*0.01)));
+  }
+  endShape();
+}
+</code>
+</WRAP>
+<WRAP half column>
+出力結果.png{{:lecture:design_with_prototyping:p5.js編:pasted:20210513-001758.png}}
+</WRAP>
+</WRAP>
+randomと比べて値がなだらかに変化している様子がわかります．ポイントはnoise関数への引数が大きく変化しないようにすることです．例えば noise(i) としてしまうと，randomと同様にガチャガチャした描画になってしまいます．試しにやってみてください．この引数の変化量に応じて値の滑らかさが変わる点に注意してください．
+randomとはことなり，一度実行するとアニメーションが描画されません．これは実行時のnoise関数における初期値が変化しないため，何度描画しても同じ線分になるためです．この値は実行するたびに変化するので，確認してみてください．せっかくなのでなだらかに変化する様子をアニメーションにしてみたいと思います．
+<WRAP group>
+<WRAP half column>
+<code>
+let offset = 0.0;
+function setup(){
+  createCanvas(500,250);
+}
+function draw()
+{
+  background(255);
+  beginShape();
+  for( let i = 0; i < width; i += 10){
+    vertex(i, height/2+50*(0.5-noise(i*0.1+offset)));
+  }
+  endShape();
+  offset += 0.01;
+}
+</code>
+</WRAP>
+<WRAP half column>
+{{ :lecture:design_with_prototyping:p5.js編:may-13-2021_00-54-53.gif?nolink |}}
+</WRAP>
+</WRAP>
+では最後に頂点がカクカクしているので，vertexではなく，curveVertexを利用してみると，なだらかな変化になります．
+<WRAP group>
+<WRAP half column>
+<code>
+let offset = 0.0;
+function setup(){
+  createCanvas(500,250);
+}
+function draw()
+{
+  background(255);
+  beginShape();
+  for( let i = 0; i < width; i += 10){
+    curveVertex(i, height/2+50*(0.5-noise(i*0.1+offset)));
+  }
+  endShape();
+  offset += 0.01;
+}
+</code>
+</WRAP>
+<WRAP half column>
+{{ :lecture:design_with_prototyping:p5.js編:may-13-2021_00-58-42.gif?nolink |}}
+</WRAP>
+</WRAP>
+===== ふにゃふにゃする丸 =====
+ではここまでの内容を踏まえて，ふにゃふにゃアニメーションする丸を描いてみます．まず最初に先程までの線を円上に並べ直してみます．極座標を使って描きなおします．極座標のrは，各角度毎にノイズのパラメータが決定すれば比較的フニャッとした円を描くことができます．
+<WRAP center round tip 60%>
+ちょっと見た目を可愛くするのに，drawingContextというものを利用しています．これを使うと自動で描画したグラフィックに影をつけることができます．
+</WRAP>
+<WRAP group>
+<WRAP half column>
+<code>
+let offset = 0.0;
+function setup() {
+  createCanvas(400, 400);
+  drawingContext.shadowBlur = 10;
+  drawingContext.shadowOffsetX = 5; //X軸正方向へのズレ
+  drawingContext.shadowOffsetY = 5; //Y軸正方向へのズレ
+  drawingContext.shadowColor = color(0, 0, 0, 150); //シャドウの色
+}
+function draw() {
+  background(255, 255);
+  fill(140, 180, 80);
+  strokeWeight(5);
+  stroke(150);
+  let r;
+  beginShape();
+  for (let i = 0; i < 360; i += 12) {
+    r = 100 + 100*noise(i*0.1+offset);
+    curveVertex(
+      width / 2 + r * cos(radians(i)),
+      height / 2 + r * sin(radians(i))
+    );
+  }
+  // もう一度最初の2点を指定するのは，curveVertexを閉じるため
+  // https://infosmith.biz/blog/it/p5js-curvevertex-2
+   for (let i = 0; i < 36; i += 12) {
+    r = 100 + 100*noise(i*0.1+offset);
+    curveVertex(
+      width / 2 + r * cos(radians(i)),
+      height / 2 + r * sin(radians(i))
+    );
+  }
+  endShape();
+  offset += 0.01;
+}
+</code>
+</WRAP>
+<WRAP half column>
+{{ :lecture:design_with_prototyping:p5.js編:may-13-2021_01-46-04.gif?nolink |}}
+</WRAP>
+</WRAP>
+こんなんで，それっぽく見えるんですが，描かれた円の下側をみると微妙にとんがったところが見えます．これは，始点と終点の位置が大きくずれてしまっているためです．とは言ってもこのままでも気にならない場合は全然構わないと思います．
+noiseを利用すればズレをなだらかに表示できたわけですが，結局始点と終点ではnoiseへの引数が異なるため，大きく値が異なってしまっているわけです．どのようにすればよいかですが，このページではnoiseにわたす引数をsin関数を用いて最初と最後の値が同じになるようにしてみました．
+以上，randomとnoiseに関してでした．アンビエントな表現にはnoiseを多用すると良いでしょう．