// the user said: "make me something beautiful, particles, glow"
// the model wrote this. it's rendering live in the right pane.
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let numCurves = 4, speed = 1.5, spread = 1.4, vol = 0.7;
function draw() {
ctx.fillStyle = 'rgba(12,3,26,0.08)';
ctx.fillRect(0, 0, W, H);
time += 0.012 * speed;
for (let i = 0; i < numCurves; i++) {
const phase = time + i * 2.1;
const hue = (300 + i * 60 + time * 20) % 360;
ctx.strokeStyle = `hsla(${hue}, 80%, 65%, 0.6)`;
ctx.beginPath();
for (let t = 0; t < Math.PI * 2; t += 0.01) {
const r = 200 * spread * (1 + 0.3 * Math.sin(t * 3 + phase));
const x = W/2 + r * Math.cos(t + phase);
const y = H/2 + r * Math.sin(t * 2 + phase) * 0.6;
t === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
}
ctx.stroke();
}
requestAnimationFrame(draw);
}
function setupControls() {
const ids = ['curves','speed','spread','volume'];
ids.forEach(id => {
const el = document.getElementById(id);
el.oninput = () => {
if (id === 'curves') numCurves = parseInt(el.value);
if (id === 'speed') speed = parseFloat(el.value);
if (id === 'spread') spread = parseFloat(el.value);
};
});
}
// the user said: "make me something beautiful, particles, glow"
// the model wrote this. it's rendering live in the right pane.
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let numCurves = 4, speed = 1.5, spread = 1.4, vol = 0.7;