algorithmic-art

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Algorithmic Art

算法艺术

Create generative art with code using p5.js, featuring seeded randomness for reproducibility.

使用p5.js通过代码创作生成艺术，借助带种子的随机数实现可复现性。

Core Concepts

核心概念

Seeded Randomness

带种子的随机数

javascript

// Use seed for reproducible results
function setup() {
  randomSeed(42);
  noiseSeed(42);
}

javascript

// Use seed for reproducible results
function setup() {
  randomSeed(42);
  noiseSeed(42);
}

Noise Functions

噪声函数

javascript

// Perlin noise for organic patterns
let x = noise(frameCount * 0.01) * width;
let y = noise(frameCount * 0.01 + 1000) * height;

javascript

// Perlin noise for organic patterns
let x = noise(frameCount * 0.01) * width;
let y = noise(frameCount * 0.01 + 1000) * height;

Common Patterns

常见模式

Flow Fields

流场

javascript

let cols, rows, scale = 20;
let particles = [];
let flowfield;

function setup() {
  createCanvas(800, 800);
  cols = floor(width / scale);
  rows = floor(height / scale);
  flowfield = new Array(cols * rows);

  for (let i = 0; i < 1000; i++) {
    particles.push(new Particle());
  }
}

function draw() {
  let yoff = 0;
  for (let y = 0; y < rows; y++) {
    let xoff = 0;
    for (let x = 0; x < cols; x++) {
      let angle = noise(xoff, yoff) * TWO_PI * 2;
      let v = p5.Vector.fromAngle(angle);
      flowfield[x + y * cols] = v;
      xoff += 0.1;
    }
    yoff += 0.1;
  }

  particles.forEach(p => {
    p.follow(flowfield);
    p.update();
    p.show();
  });
}

javascript

let cols, rows, scale = 20;
let particles = [];
let flowfield;

function setup() {
  createCanvas(800, 800);
  cols = floor(width / scale);
  rows = floor(height / scale);
  flowfield = new Array(cols * rows);

  for (let i = 0; i < 1000; i++) {
    particles.push(new Particle());
  }
}

function draw() {
  let yoff = 0;
  for (let y = 0; y < rows; y++) {
    let xoff = 0;
    for (let x = 0; x < cols; x++) {
      let angle = noise(xoff, yoff) * TWO_PI * 2;
      let v = p5.Vector.fromAngle(angle);
      flowfield[x + y * cols] = v;
      xoff += 0.1;
    }
    yoff += 0.1;
  }

  particles.forEach(p => {
    p.follow(flowfield);
    p.update();
    p.show();
  });
}

Recursive Trees

递归树

javascript

function branch(len) {
  line(0, 0, 0, -len);
  translate(0, -len);

  if (len > 4) {
    push();
    rotate(PI / 6);
    branch(len * 0.67);
    pop();

    push();
    rotate(-PI / 6);
    branch(len * 0.67);
    pop();
  }
}

javascript

function branch(len) {
  line(0, 0, 0, -len);
  translate(0, -len);

  if (len > 4) {
    push();
    rotate(PI / 6);
    branch(len * 0.67);
    pop();

    push();
    rotate(-PI / 6);
    branch(len * 0.67);
    pop();
  }
}

Particle Systems

粒子系统

javascript

class Particle {
  constructor() {
    this.pos = createVector(random(width), random(height));
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.maxSpeed = 4;
  }

  follow(flowfield) {
    let x = floor(this.pos.x / scale);
    let y = floor(this.pos.y / scale);
    let force = flowfield[x + y * cols];
    this.acc.add(force);
  }

  update() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  show() {
    stroke(255, 5);
    point(this.pos.x, this.pos.y);
  }
}

javascript

class Particle {
  constructor() {
    this.pos = createVector(random(width), random(height));
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.maxSpeed = 4;
  }

  follow(flowfield) {
    let x = floor(this.pos.x / scale);
    let y = floor(this.pos.y / scale);
    let force = flowfield[x + y * cols];
    this.acc.add(force);
  }

  update() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }

  show() {
    stroke(255, 5);
    point(this.pos.x, this.pos.y);
  }
}

Color Palettes

调色板

javascript

// Define palette
const palette = ['#264653', '#2a9d8f', '#e9c46a', '#f4a261', '#e76f51'];

// Random from palette
fill(random(palette));

javascript

// Define palette
const palette = ['#264653', '#2a9d8f', '#e9c46a', '#f4a261', '#e76f51'];

// Random from palette
fill(random(palette));

Best Practices

最佳实践

Use
```
noLoop()
```
for static pieces, save with
```
save('art.png')
```
Experiment with blend modes:
```
blendMode(ADD)
```
Layer transparency for depth
Use frameCount for animation

使用
```
noLoop()
```
创建静态作品，通过
```
save('art.png')
```
保存
尝试混合模式：
```
blendMode(ADD)
```
使用分层透明度营造深度感
使用frameCount实现动画