lecture:design_with_prototyping:p5.js編:15.ランダムとノイズ

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
lecture:design_with_prototyping:p5.js編:15.ランダムとノイズ [2021/05/13 00:25] – [一本の線] babalecture:design_with_prototyping:p5.js編:15.ランダムとノイズ [2021/05/25 13:31] (現在) – [ふにゃふにゃする丸] baba
行 172: 行 172:
  
 <WRAP half column> <WRAP half column>
-出力結果.png{{:lecture:design_with_prototyping:p5.js編:pasted:20210513-002551.png}}+{{ :lecture:design_with_prototyping:p5.js編:may-13-2021_00-54-53.gif?nolink |}}
 </WRAP> </WRAP>
 </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を多用すると良いでしょう.
  
  • /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/attic/lecture/design_with_prototyping/p5.js編/15.ランダムとノイズ.1620833156.txt.gz
  • 最終更新: 2021/05/13 00:25
  • by baba