差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン 次のリビジョン両方とも次のリビジョン | ||
lecture:design_with_prototyping:p5.js編:15.ランダムとノイズ [2021/05/13 00:21] – [一本の線] baba | lecture:design_with_prototyping:p5.js編:15.ランダムとノイズ [2021/05/13 01:06] – [一本の線] baba | ||
---|---|---|---|
行 147: | 行 147: | ||
randomとはことなり,一度実行するとアニメーションが描画されません.これは実行時のnoise関数における初期値が変化しないため,何度描画しても同じ線分になるためです.この値は実行するたびに変化するので,確認してみてください.せっかくなのでなだらかに変化する様子をアニメーションにしてみたいと思います. | 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> | ||
+ | {{ : | ||
+ | </ | ||
+ | </ | ||