CodeArt Studio - Complete Recording System

Generative Art Studio
JavaScript Art Code
// Generative Art Template
// This code creates an animated particle system
// Modify parameters to create unique art

const canvas = document.getElementById('generativeCanvas');
const ctx = canvas.getContext('2d');

// Set canvas size to match container
canvas.width = canvas.parentElement.clientWidth;
canvas.height = canvas.parentElement.clientHeight;

// Particle system
const particles = [];
const particleCount = 150;
const colors = ['#7c3aed', '#06b6d4', '#10b981', '#f59e0b', '#ef4444'];

// Particle class
class Particle {
  constructor() {
    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 = colors[Math.floor(Math.random() * colors.length)];
    this.alpha = Math.random() * 0.5 + 0.2;
  }
  
  update() {
    this.x += this.speedX;
    this.y += this.speedY;
    
    // Bounce off walls
    if (this.x > canvas.width || this.x < 0) this.speedX = -this.speedX;
    if (this.y > canvas.height || this.y < 0) this.speedY = -this.speedY;
    
    // Slow down over time
    this.speedX *= 0.99;
    this.speedY *= 0.99;
  }
  
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.globalAlpha = this.alpha;
    ctx.fill();
    
    // Add glow effect
    ctx.shadowColor = this.color;
    ctx.shadowBlur = 15;
    ctx.fill();
    ctx.shadowBlur = 0;
  }
  
  connect(particles) {
    for (let i = 0; i < particles.length; i++) {
      const dx = this.x - particles[i].x;
      const dy = this.y - particles[i].y;
      const distance = Math.sqrt(dx * dx + dy * dy);
      
      if (distance < 100) {
        ctx.beginPath();
        ctx.strokeStyle = this.color;
        ctx.globalAlpha = 0.2 * (1 - distance / 100);
        ctx.lineWidth = 1;
        ctx.moveTo(this.x, this.y);
        ctx.lineTo(particles[i].x, particles[i].y);
        ctx.stroke();
      }
    }
  }
}

// Initialize particles
function init() {
  for (let i = 0; i < particleCount; i++) {
    particles.push(new Particle());
  }
}

// Animation loop
function animate() {
  // Clear with a fade effect
  ctx.fillStyle = 'rgba(15, 23, 42, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Update and draw particles
  for (let i = 0; i < particles.length; i++) {
    particles[i].update();
    particles[i].draw();
    particles[i].connect(particles);
  }
  
  requestAnimationFrame(animate);
}

// Start the animation
init();
animate();

// Handle window resize
window.addEventListener('resize', function() {
  canvas.width = canvas.parentElement.clientWidth;
  canvas.height = canvas.parentElement.clientHeight;
  particles.length = 0;
  init();
});
Live Art Preview
Art Gallery