Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const canvas = document.getElementById('artCanvas');
+ const ctx = canvas.getContext('2d');
+ let animationId;
+ let particles = [];
+
+ function resizeCanvas() {
+ canvas.width = canvas.offsetWidth;
+ canvas.height = canvas.offsetHeight;
+ }
+
+ window.addEventListener('resize', resizeCanvas);
+ resizeCanvas();
+
+ class Particle {
+ constructor() {
+ this.reset();
+ }
+
+ reset() {
+ this.x = Math.random() * canvas.width;
+ this.y = Math.random() * canvas.height;
+ this.size = Math.random() * 5 + 1;
+ this.speedX = Math.random() * 3 - 1.5;
+ this.speedY = Math.random() * 3 - 1.5;
+ this.color = document.getElementById('color').value;
+ }
+
+ update() {
+ this.x += this.speedX;
+ this.y += this.speedY;
+
+ if (this.x > canvas.width || this.x < 0) this.speedX *= -1;
+ if (this.y > canvas.height || this.y < 0) this.speedY *= -1;
+ }
+
+ draw() {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+ ctx.fillStyle = this.color;
+ ctx.fill();
+ }
+ }
+
+ function initParticles() {
+ particles = [];
+ const complexity = document.getElementById('complexity').value;
+ const numParticles = complexity * 2;
+
+ for (let i = 0; i < numParticles; i++) {
+ particles.push(new Particle());
+ }
+ }
+
+ function animate() {
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ particles.forEach(particle => {
+ particle.update();
+ particle.draw();
+ });
+
+ animationId = requestAnimationFrame(animate);
+ }
+
+ document.getElementById('generate').addEventListener('click', () => {
+ cancelAnimationFrame(animationId);
+ initParticles();
+ animate();
+ });
+
+ document.getElementById('save').addEventListener('click', () => {
+ const link = document.createElement('a');
+ link.download = 'artgen-creation.png';
+ link.href = canvas.toDataURL();
+ link.click();
+ });
+
+ document.getElementById('color').addEventListener('change', () => {
+ particles.forEach(particle => {
+ particle.color = document.getElementById('color').value;
+ });
+ });
+
+ // Initialize
+ initParticles();
+ animate();
+ });
