差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン 次のリビジョン両方とも次のリビジョン | ||
lecture:design_with_prototyping:p5.js編:15.ランダムとノイズ [2021/05/13 00:10] – [一本の線] baba | lecture:design_with_prototyping:p5.js編:15.ランダムとノイズ [2021/05/13 01:06] – [一本の線] baba | ||
---|---|---|---|
行 90: | 行 90: | ||
</ | </ | ||
+ | では次に上記のコードにおいて,yの値をrandomを使って上下+20, | ||
+ | |||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | < | ||
+ | function setup(){ | ||
+ | createCanvas(500, | ||
+ | } | ||
+ | |||
+ | function draw() | ||
+ | { | ||
+ | background(255); | ||
+ | | ||
+ | beginShape(); | ||
+ | for( let i = 0; i < width; i += 10){ | ||
+ | vertex(i, height/ | ||
+ | } | ||
+ | endShape(); | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP half column> | ||
+ | 出力結果.png{{: | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ではここで,ちょっと趣を変えます.この「ガチャガチャ〜」っていうのがうるさいので,少しなめらかに変化して「うにょにょにょ〜」みたいに変化してくんないかな〜って考えてみます.なめらかに変化していく様子に修正するには,noiseを利用すると良いです.ただしnoise関数は先程のrandomと違って,返す値は0.0-1.0と決まっていますので,その点注意してください. | ||
+ | |||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | < | ||
+ | function setup(){ | ||
+ | createCanvas(500, | ||
+ | } | ||
+ | |||
+ | function draw() | ||
+ | { | ||
+ | background(255); | ||
+ | | ||
+ | beginShape(); | ||
+ | for( let i = 0; i < width; i += 10){ | ||
+ | vertex(i, height/ | ||
+ | } | ||
+ | endShape(); | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP half column> | ||
+ | 出力結果.png{{: | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | randomと比べて値がなだらかに変化している様子がわかります.ポイントはnoise関数への引数が大きく変化しないようにすることです.例えば noise(i) としてしまうと,randomと同様にガチャガチャした描画になってしまいます.試しにやってみてください.この引数の変化量に応じて値の滑らかさが変わる点に注意してください. | ||
+ | |||
+ | randomとはことなり,一度実行するとアニメーションが描画されません.これは実行時のnoise関数における初期値が変化しないため,何度描画しても同じ線分になるためです.この値は実行するたびに変化するので,確認してみてください.せっかくなのでなだらかに変化する様子をアニメーションにしてみたいと思います. | ||
+ | |||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | < | ||
+ | let offset = 0.0; | ||
+ | |||
+ | function setup(){ | ||
+ | createCanvas(500, | ||
+ | } | ||
+ | |||
+ | function draw() | ||
+ | { | ||
+ | background(255); | ||
+ | | ||
+ | beginShape(); | ||
+ | for( let i = 0; i < width; i += 10){ | ||
+ | vertex(i, height/ | ||
+ | } | ||
+ | endShape(); | ||
+ | offset += 0.01; | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP half column> | ||
+ | {{ : | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | では最後に頂点がカクカクしているので,vertexではなく,curveVertexを利用してみると,なだらかな変化になります. | ||
+ | |||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | < | ||
+ | let offset = 0.0; | ||
+ | |||
+ | function setup(){ | ||
+ | createCanvas(500, | ||
+ | } | ||
+ | |||
+ | function draw() | ||
+ | { | ||
+ | background(255); | ||
+ | | ||
+ | beginShape(); | ||
+ | for( let i = 0; i < width; i += 10){ | ||
+ | curveVertex(i, | ||
+ | } | ||
+ | endShape(); | ||
+ | offset += 0.01; | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP half column> | ||
+ | {{ : | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== ふにゃふにゃする丸 ===== | ||
+ | ではここまでの内容を踏まえて,ふにゃふにゃアニメーションする丸を描いてみます.まず最初に先程までの線を円上に並べ直してみます.極座標を使って描きなおします. | ||
+ | <WRAP center round tip 60%> | ||
+ | ちょっと見た目を可愛くするのに,drawingContextというものを利用しています.これを使うと自動で描画したグラフィックに影をつけることができます. | ||
+ | </ | ||
+ | |||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | < | ||
+ | let offset = 0.0; | ||
+ | |||
+ | function setup() { | ||
+ | createCanvas(400, | ||
+ | drawingContext.shadowBlur = 10; | ||
+ | drawingContext.shadowOffsetX = 5; // | ||
+ | drawingContext.shadowOffsetY = 5; // | ||
+ | drawingContext.shadowColor = color(0, 0, 0, 150); // | ||
+ | } | ||
+ | |||
+ | function draw() { | ||
+ | background(255, | ||
+ | |||
+ | fill(140, 180, 80); | ||
+ | strokeWeight(5); | ||
+ | stroke(150); | ||
+ | |||
+ | let r; | ||
+ | |||
+ | beginShape(); | ||
+ | for (let i = 0; i < 360; i += 12) { | ||
+ | //r = 100 + 20 * noise(100 * sin(radians(i + offset))); | ||
+ | r = 100 + 20 * noise(i*0.1+offset); | ||
+ | curveVertex( | ||
+ | width / 2 + r * sin(radians(i)), | ||
+ | height / 2 + r * cos(radians(i)) | ||
+ | ); | ||
+ | } | ||
+ | endShape(CLOSE); | ||
+ | offset += 0.01; | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP half column> | ||
+ | {{ : | ||
+ | </ | ||
+ | </ | ||