🎨 生成艺术工具

一个让用户通过简单操作创造独特艺术作品的在线工具。

🎯 项目理念

生成艺术（Generative Art）是将算法与创意结合的艺术形式。这个项目的目标是让每个人都能轻松体验创作的乐趣。

🖼️ 效果展示

基础图形生成

// 基础几何图形生成
function generatePattern(ctx, options) {
  const { count, colors, shapes } = options;
  
  for (let i = 0; i < count; i++) {
    const x = Math.random() * ctx.canvas.width;
    const y = Math.random() * ctx.canvas.height;
    const size = Math.random() * 100 + 20;
    const color = colors[Math.floor(Math.random() * colors.length)];
    
    ctx.fillStyle = color;
    ctx.beginPath();
    
    if (shapes.includes('circle')) {
      ctx.arc(x, y, size, 0, Math.PI * 2);
    } else if (shapes.includes('square')) {
      ctx.rect(x - size/2, y - size/2, size, size);
    }
    
    ctx.fill();
  }
}

粒子系统

// 粒子效果
class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = (Math.random() - 0.5) * 2;
    this.vy = (Math.random() - 0.5) * 2;
    this.size = Math.random() * 5 + 1;
    this.life = 100;
  }
  
  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.life--;
    this.size *= 0.99;
  }
  
  draw(ctx) {
    ctx.fillStyle = `rgba(100, 200, 255, ${this.life / 100})`;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
  }
}

✨ 特色功能

1. 实时预览: 所见即所得的创作体验
2. 参数调节: 精细控制每个参数
3. 导出功能: 支持 PNG、SVG、GIF 格式导出
4. 随机种子: 保存创作参数，随时复现

🎭 使用场景

• 🎁 制作独特的头像或壁纸
• 🖼️ 生成社交媒体配图
• 📐 设计师灵感来源
• 🎓 编程教育示例

🛠 技术实现

• HTML5 Canvas 2D
• WebGL 加速渲染
• p5.js 库支持
• Web Workers 后台处理

🚀 在线体验

访问 art.example.com 开始创作！

---

创意无限，用代码画出你的世界！