算法艺术 (algorithmic-art)

算法艺术（algorithmic-art）

概述

algorithmic-art 是使用 p5.js 创建算法艺术的技能。它的核心是：通过代码生成独特的算法艺术，包括粒子系统、流场、噪点等。

作为创作者，你可能遇到过：

• “想创作生成艺术但不知道怎么写代码”
• “想用代码生成独特的视觉效果”
• “想创建交互式艺术作品”

algorithmic-art 就是解决这些的。

核心理念

算法哲学

算法艺术 = 计算美学运动

特点：
- 计算过程生成
- 涌现行为
- 数学之美
- 有机系统

创作步骤

1. 创建算法哲学
   - 定义美学运动
   - 编写宣言
   - 规划生成逻辑

2. 用代码表达
   - p5.js  sketches
   - 90% 算法生成
   - 10% 参数调整

p5.js 基础

1. 初始化

function setup() {
  createCanvas(800, 600);
  background(0);
}

function draw() {
  // 绘制逻辑
}

2. 基本图形

function draw() {
  // 圆形
  circle(x, y, diameter);

  // 矩形
  rect(x, y, width, height);

  // 线
  line(x1, y1, x2, y2);

  // 颜色
  fill(255, 0, 0);
  stroke(255);
}

3. 动画

let x = 0;

function setup() {
  createCanvas(800, 600);
  background(0);
}

function draw() {
  background(0, 10); // 轨迹效果

  circle(x, height/2, 50);
  x += 2;

  if (x > width) x = 0;
}

算法模式

1. 粒子系统

class Particle {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.vx = random(-1, 1);
    this.vy = random(-1, 1);
    this.size = random(2, 8);
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;

    // 边界反弹
    if (this.x < 0 || this.x > width) this.vx *= -1;
    if (this.y < 0 || this.y > height) this.vy *= -1;
  }

  display() {
    noStroke();
    fill(255, 100);
    circle(this.x, this.y, this.size);
  }
}

let particles = [];

function setup() {
  createCanvas(800, 600);
  for (let i = 0; i < 100; i++) {
    particles.push(new Particle());
  }
}

function draw() {
  background(0, 20);
  for (let p of particles) {
    p.update();
    p.display();
  }
}

2. 噪点场

function draw() {
  background(0);
  noLoop();

  let scale = 0.01;
  for (let x = 0; x < width; x += 5) {
    for (let y = 0; y < height; y += 5) {
      let n = noise(x * scale, y * scale);
      let size = map(n, 0, 1, 2, 20);
      fill(255, n * 255);
      circle(x, y, size);
    }
  }
}

3. 旋转对称

function setup() {
  createCanvas(800, 600);
}

function draw() {
  background(0);
  translate(width/2, height/2);

  let num = 12;
  for (let i = 0; i < num; i++) {
    push();
    rotate(TWO_PI * i / num);

    // 绘制形状
    fill(255, 100);
    noStroke();
    rect(-50, -10, 100, 20);

    pop();
  }
}

交互式艺术

1. 鼠标交互

function draw() {
  background(0, 10);

  let d = dist(mouseX, mouseY, width/2, height/2);

  fill(255, d);
  circle(width/2, height/2, d);
}

2. 参数控制

let param = 50;

function setup() {
  createCanvas(800, 600);
}

function draw() {
  background(0);
  translate(width/2, height/2);

  for (let i = 0; i < 100; i++) {
    let angle = i * param * 0.01;
    let r = i * 2;
    let x = r * cos(angle);
    let y = r * sin(angle);

    fill(255, 100);
    circle(x, y, 3);
  }
}

function mousePressed() {
  param += 10;
}

创作流程

第一步：定义哲学

创建算法哲学文档：

1. 美学运动名称
2. 核心理念
3. 生成规则
4. 参数变量

第二步：编写代码

p5.js 实现：

1. 设置画布
2. 实现核心算法
3. 添加交互
4. 优化性能

第三步：输出文件

生成文件：

1. .md - 算法哲学
2. .html - 交互查看器
3. .js - 生成算法

最佳实践

1. 使用种子

// 可重现的随机
randomSeed(42);
noiseSeed(42);

2. 性能优化

// 减少计算
noStroke();
simpleShapes();

// 使用 offscreen buffer
let pg;
function setup() {
  pg = createGraphics(width, height);
}

3. 美学追求

避免：
- 随机堆砌
- 缺乏主题
- 过于复杂

追求：
- 有意义的模式
- 数学之美
- 简洁优雅

速查卡片

基础

setup(), draw(), circle(), rect()

算法

粒子系统、噪点场、旋转对称

交互

mouseX, mouseY, mousePressed()

优化

randomSeed(), noStroke(), pg

---

查看源文件: GitHub原始文件