P5.js Study 017

Generative Design with p5.js / Sketch P_2_1_2_01 を試しながらアレンジ。
元ネタ:https://editor.p5js.org/generative-design/sketches/P_2_1_2_01

新たに覚えたコマンドなど

特になし。
もはや今までに出てきた基本的なコマンドだけで、アイディア次第で多様な表現が可能なことが分かる。

ロジックのポイント

タイル状に並べた円を、カーソルの位置に応じて移動や変形をさせている。
カーソルのX座標が移動量に、Y座標が拡大率に連動している。

移動量にはランダム性をもたせているので、途中からグリッドが認識できなくなるのが面白い。

var shiftX = random(-mouseX, mouseX) / 20;
var shiftY = random(-mouseX, mouseX) / 20;

さらに、拡大率にもランダム性を追加してみた。

var scale = random(10, 25);
ellipse(posX + shiftX, posY + shiftY, mouseY / scale, mouseY / scale);

複雑性が増加して面白くなった。
ただCPU負荷は高いようだ。

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です