差分

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

--- lecture:design_with_prototyping:p5.js編:15.ランダムとノイズ [2021/05/13 00:21] – [一本の線] baba
+++ lecture:design_with_prototyping:p5.js編:15.ランダムとノイズ [2021/05/25 13:31] (現在) – [ふにゃふにゃする丸] baba
@@ 行 148: / 行 148: @@
 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を多用すると良いでしょう．