Algorithmic Art

算法艺术创作

概述

使用 p5.js 创建基于算法的生成艺术作品。

核心功能：

• 种子随机数（可重现）
• 交互式参数调整
• 导出高质量图像
• Web 交互查看器

基础模板

标准结构

let params = {
  seed: 12345,
  param1: 0.5,
  param2: 100,
  color1: '#3498db',
  color2: '#e74c3c'
};

function setup() {
  createCanvas(1200, 1200);
  randomSeed(params.seed);
  noiseSeed(params.seed);
  noLoop(); // 静态图像
}

function draw() {
  background(255);
  // 生成艺术
  generateArt();
}

function generateArt() {
  // 艺术生成逻辑
}

基础元素

粒子系统

let particles = [];

function setup() {
  createCanvas(1200, 1200);
  randomSeed(params.seed);

  for (let i = 0; i  width) this.vx *= -1;
    if (this.y  height) this.vy *= -1;
  }

  display() {
    noStroke();
    fill(params.color1);
    circle(this.x, this.y, this.size);
  }
}

流场（Flow Field）

function draw() {
  background(255, 10); // 拖尾效果

  const scale = params.noiseScale;
  const stepSize = params.stepSize;

  for (let i = 0; i  4) {
    push();
    rotate(angle);
    drawBranch(len * 0.67, angle);
    pop();

    push();
    rotate(-angle);
    drawBranch(len * 0.67, angle);
    pop();
  }
}

L-System

let sentence = "F";
let rules = [];
let len = 100;

function setup() {
  createCanvas(600, 600);
  rules[0] = {
    a: "F",
    b: "FF+[+F-F-F]-[-F+F+F]"
  };

  for (let i = 0; i  {
    params.density = this.value();
    redraw();
  });
}

种子控制

function keyPressed() {
  if (key === 'n') {
    params.seed++;
    randomSeed(params.seed);
    noiseSeed(params.seed);
    redraw();
  }
}

导出

保存图像

function saveArt() {
  saveCanvas('artwork', 'png');
}

function mousePressed() {
  saveArt();
}

批量生成

function generateBatch() {
  for (let s = 1; s <= 100; s++) {
    params.seed = s;
    randomSeed(params.seed);
    noiseSeed(params.seed);
    redraw();
    saveCanvas(`artwork-${s}`, 'png');
  }
}

最佳实践

1. 使用种子

// 总是使用种子确保可重现
randomSeed(params.seed);
noiseSeed(params.seed);

2. 参数化设计

// 使用参数对象
let params = {
  count: 100,
  size: 50,
  speed: 2,
  colors: ['#fff', '#000']
};

3. 性能优化

// 使用 noLoop() 静态图像
// 使用限制循环次数
// 避免复杂计算

依赖要求

• p5.js: npm install p5 或从 CDN 加载
• 浏览器或 Node.js 环境

艺术原则

关键原则：

• 过程重于产品：美在于算法的执行
• 参数化表达：思想通过数学关系传递
• 可重现性：相同种子产生相同结果
• 探索性：交互式参数调整
• 工艺精湛：精心调整每个参数

代码风格指南

• 使用描述性变量名
• 封装复杂逻辑到函数
• 添加注释解释算法
• 测试不同种子值
• 优化性能

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: hhhh124hhhh
• Source: hhhh124hhhh/SkillMate
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.