Generative Design with p5.js / Sketch P_2_1_1_04 を試しながらアレンジ。
元ネタ：https://editor.p5js.org/generative-design/sketches/P_2_1_1_04
新たに覚えたコマンドなど
imageMode(mode)
// Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted.
// mode: either CORNER, CORNERS, or CENTER
// CORNER => image(img, x1, y1, width, height)
// CORNERS => image(img, x1, y1, x2, y2)
// CENTER => image(img, centerX, centerY, width, height)
atan2(y, x)
// Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis.
// Values are returned as a float in the range from PI to -PI.
dist(x1, y1, x2, y2)
// Calculates the distance between two points.ロジックのポイント
SVG画像を読み込んでタイル状に並べる。
画像とカーソルとの位置関係によって画像の回転角度を決定する。
var angle = atan2(mouseY - posY, mouseX - posX) + (shapeAngle * (PI / 180));Dキーを押すと3種類のサイズモード（一様／カーソルから遠ざかるほど小さい／カーソルから遠ざかるほど大きい）を順に変更できる。
if (sizeMode == 0) newShapeSize = shapeSize;
if (sizeMode == 1) newShapeSize = shapeSize * 1.5 - map(dist(mouseX, mouseY, posX, posY), 0, 500, 5, shapeSize);
if (sizeMode == 2) newShapeSize = map(dist(mouseX, mouseY, posX, posY), 0, 500, 5, shapeSize);オリジナルの画像を読み込ませて試してみた。
