上のほうに行くほど揺らぎが大きくなる四角。炎のイメージ。少しずつProcessing思い出してきた。
void setup() {
size(512, 512);
colorMode(HSB, 360, 100, 100);
noLoop();
}
void draw() {
PGraphics g = createGraphics(512, 512, JAVA2D);
g.beginDraw();
g.noStroke();
g.background(255, 255, 255, 0);
g.colorMode(HSB, 360, 100, 100, 100);
g.rectMode(CENTER);
float hue = 60;
for (int y = 16; y < 512; y += 32) {
for (int x = 16; x < 512; x += 32) {
float ratio = map(y, 0, 512, 45, 5);
float r = map(noise(x, y), 0, 1, -ratio, ratio);
float offset = map(noise(x, y), 0, 1, -ratio, ratio) / 4;
g.translate(x + offset, y + offset);
g.rotate(radians(r));
g.fill(hue, 100, 100, map(y, 0, 512, 0, 100));
g.rect(0, 0, 24, 24);
g.rotate(radians(-r));
g.translate(-x - offset, -y - offset);
}
hue -= 4;
hue = hue > 360 ? 0 : hue;
hue = hue < 0 ? 360 : hue;
}
save("tile.png");
g.endDraw();
image(g, 0, 0);
g.save("tile.png");
}