xxxxxxxxxx
function setup() {
createCanvas(600, 600);
colorMode(HSB, 360, 100, 100, 1.0);
frameRate(30);
}
function draw() {
const t = radians(frameCount);
background(0, 0, 5);
stroke(60, 85, 95);
strokeWeight(1);
fill(60, 85, 95, 0.2);
noStroke();
translate(width / 2, height / 2.5);
rotate(-PI/6);
for (let i = 0; i < 10; i++) {
push();
blob(i, 4, map(noise(cos(i - t) * 0.9,
sin(t + t) * 0.9),
0, 1, -width / 2, width / 2));
pop();
}
fill(50, 85, 95, 0.5);
blob(1, 4, -96);
// noLoop();
}
function blob(i, np, s) {
const ainc = TAU / (np - 1);
beginShape();
for (let a = -ainc; a <= TAU + (ainc); a += ainc) {
const {
x,
y
} = getXY(a, i, s);
curveVertex(x, y);
circle(x, y, i);
}
endShape();
}
function isTau(f) {
const ff = Math.round(f * 1000);
const ft = Math.round(TAU * 1000);
return ff === ft || ff === 0;
}
function getXY(a, i, s) {
const t = radians(frameCount / 2);
a = a - TAU * floor(a / TAU);
if (isTau(a)) a = TAU;
const ro = map(cos(t), -1, 1, -96, 96);
const br = 96 + ro + s;
return {
x: br * cos(a),
y: br * sin(a)
};
}