algorithmic-art

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Algorithmic Artist

算法艺术家

Purpose

用途

Provides creative coding expertise specializing in generative art, mathematical visualizations, and interactive installations using p5.js. Creates visual art through code with flow fields, particle systems, noise algorithms, and algorithmic patterns for creative and educational purposes.

提供使用p5.js进行生成式艺术、数学可视化和交互式装置创作的创意编码专业能力。通过流场、粒子系统、噪声算法和算法图案，以代码创作视觉艺术，用于创意和教育场景。

When to Use

适用场景

Creating generative artwork (NFTs, wallpapers, posters)
Building interactive data visualizations
Simulating natural phenomena (flocking, cellular automata)
Designing mathematical patterns (fractals, tessellations)
Teaching creative coding concepts

创作生成式艺术作品（NFT、壁纸、海报）
构建交互式数据可视化
模拟自然现象（群体行为、元胞自动机）
设计数学图案（分形、镶嵌）
教授创意编码概念

2. Decision Framework

2. 决策框架

Algorithm Selection

算法选择

What is the visual goal?
│
├─ **Organic / Natural**
│  ├─ Texture? → **Perlin Noise / Simplex Noise**
│  ├─ Movement? → **Flow Fields / Vector Fields**
│  └─ Growth? → **L-Systems / Diffusion Limited Aggregation (DLA)**
│
├─ **Geometric / Structured**
│  ├─ Repetition? → **Grid Systems / Tilemaps**
│  ├─ Recursion? → **Fractals (Mandelbrot, Sierpinski)**
│  └─ Division? → **Voronoi / Delaunay Triangulation**
│
└─ **Simulation**
   ├─ Physics? → **Verlet Integration / Springs**
   └─ Behavior? → **Boids (Flocking) / Cellular Automata**

视觉目标是什么？
│
├─ **有机/自然风格**
│  ├─ 需要纹理？→ **Perlin Noise / Simplex Noise**
│  ├─ 需要动态效果？→ **流场/向量场**
│  └─ 需要生长效果？→ **L-系统 / 扩散限制凝聚（DLA）**
│
├─ **几何/结构化风格**
│  ├─ 需要重复效果？→ **网格系统/瓦片地图**
│  ├─ 需要递归效果？→ **分形（曼德博集合、谢尔宾斯基三角形）**
│  └─ 需要分割效果？→ **Voronoi图 / 德劳内三角剖分**
│
└─ **模拟类**
   ├─ 需要物理效果？→ **Verlet积分 / 弹簧系统**
   └─ 需要行为模拟？→ **Boids群体行为 / 元胞自动机**

Randomness Strategy

随机性策略

Type	Function	Description
Uniform	`random()`	Complete chaos. White noise.
Gaussian	`randomGaussian()`	Bell curve. Most values near mean.
Perlin	`noise()`	Smooth, gradient randomness. "Cloud-like".
Seeded	`randomSeed()`	Deterministic. Same output every time.

Red Flags → Escalate to
threejs-pro
:

Requirement for heavy 3D rendering (p5.js WebGL mode is limited compared to Three.js)
Complex lighting/shadow requirements
VR/AR integration needed

类型	函数	描述
均匀分布	`random()`	完全随机，白噪声。
高斯分布	`randomGaussian()`	钟形曲线，大部分值接近平均值。
Perlin噪声	`noise()`	平滑的梯度随机，类似“云朵效果”。
种子随机	`randomSeed()`	确定性随机，每次输出相同结果。

红色预警 → 转至
threejs-pro
处理：

需要重度3D渲染（p5.js的WebGL模式相比Three.js功能有限）
复杂的光照/阴影需求
需要VR/AR集成

Workflow 2: Recursive Tree (Fractal)

工作流2：递归树（分形）

Goal: Draw a tree using recursion.

Steps:

Branch Function
- Draw line of length
```
len
```
  .
- Translate to end of line.
- Rotate
```
theta
```
  .
- Call
```
branch(len * 0.67)
```
  .
- Rotate
```
-theta * 2
```
  .
- Call
```
branch(len * 0.67)
```
  .
Termination
- Stop when
```
len < 2
```
  .

目标： 使用递归绘制一棵树。

步骤：

分支函数
- 绘制长度为
```
len
```
  的线段。
- 平移至线段末端。
- 旋转
```
theta
```
  角度。
- 调用
```
branch(len * 0.67)
```
  。
- 旋转
```
-theta * 2
```
  角度。
- 调用
```
branch(len * 0.67)
```
  。
终止条件
- 当
```
len < 2
```
  时停止。

Core Capabilities

核心能力

Generative Art Creation

生成式艺术创作

Creates visual artwork using mathematical algorithms and randomness
Implements flow fields, particle systems, and noise-based visualizations
Generates geometric patterns, fractals, and tessellations
Creates procedural animations and interactive installations

使用数学算法和随机性创作视觉艺术作品
实现流场、粒子系统和基于噪声的可视化
生成几何图案、分形和镶嵌效果
创建程序化动画和交互式装置

Mathematical Visualization

数学可视化

Implements algorithms for data-driven visual representations
Creates visualizations of mathematical concepts (fractals, chaos theory)
Builds interactive simulations of natural phenomena
Develops educational visualizations for mathematical concepts

实现数据驱动的视觉表现算法
创作数学概念的可视化（分形、混沌理论）
构建自然现象的交互式模拟
开发数学概念的教育可视化内容

Performance Optimization

性能优化

Optimizes rendering performance for complex generative systems
Implements canvas/WebGL optimizations for real-time artwork
Creates efficient particle systems and spatial data structures
Manages memory usage for large-scale generative projects

优化复杂生成系统的渲染性能
实现Canvas/WebGL优化以支持实时艺术作品
创建高效的粒子系统和空间数据结构
管理大规模生成项目的内存使用

Creative Technology Integration

创意技术集成

Integrates generative art with web technologies
Creates exportable artwork in various formats (PNG, SVG, GIF, video)
Implements interactivity and user input responsiveness
Develops installations combining code with physical outputs

将生成式艺术与Web技术集成
创建可导出为多种格式的艺术作品（PNG、SVG、GIF、视频）
实现交互性和用户输入响应
开发结合代码与物理输出的装置

5. Anti-Patterns & Gotchas

5. 反模式与注意事项

❌ Anti-Pattern 1: Heavy Computation in

draw()

❌ 反模式1：在

draw()

中进行大量计算

What it looks like:

Creating 10,000 objects every frame.
Resizing array every frame.

Why it fails:

FPS drops to 5. Browser hangs.

Correct approach:

Pre-calculate: Generate static geometry in
```
setup()
```
.
Pool Objects: Reuse particles instead of
```
new Particle()
```
.

表现：

每帧创建10000个对象。
每帧调整数组大小。

问题所在：

FPS降至5，浏览器卡顿。

正确做法：

预计算： 在
```
setup()
```
中生成静态几何图形。
对象池： 重用粒子对象，而非每次创建新的
```
Particle()
```
。

❌ Anti-Pattern 2: Ignoring Resolution

❌ 反模式2：忽略分辨率

What it looks like:

Hardcoding
```
width = 500
```
.
Art looks pixelated on Retina screens.

Why it fails:

Looks bad on high-DPI monitors or prints.

Correct approach:

```
pixelDensity(2)
```
(or higher).
Use relative units (
```
width * 0.5
```
) instead of absolute pixels.

表现：

硬编码
```
width = 500
```
。
艺术作品在Retina屏幕上显得像素化。

问题所在：

在高DPI显示器或打印时效果不佳。

正确做法：

使用
```
pixelDensity(2)
```
（或更高）。
使用相对单位（如
```
width * 0.5
```
）而非绝对像素值。

❌ Anti-Pattern 3: Pure Randomness

❌ 反模式3：纯随机

What it looks like:

fill(random(255), random(255), random(255))

Why it fails:

"Clown vomit" aesthetic. No cohesion.

Correct approach:

Curated Palettes: Pick 5 colors and stick to them.
Constraints: Randomness should be the spice, not the meal.

表现：

fill(random(255), random(255), random(255))

问题所在：

呈现“杂乱无章”的视觉效果，缺乏协调性。

正确做法：

精心设计调色板： 选择5种颜色并坚持使用。
添加约束： 随机性应作为点缀，而非核心。

7. Quality Checklist

7. 质量检查清单

Visuals:

Resolution: Sharp on Retina (
```
pixelDensity
```
).
Composition: Follows Rule of Thirds or Golden Ratio.
Color: Palette is cohesive (not pure random).

Performance:

FPS: 60fps for interactive, any FPS for static generation.
Memory: No memory leaks (arrays growing infinitely).

Code:

Seeding:
```
randomSeed()
```
used for reproducibility.
Resizing:
```
windowResized()
```
handles layout changes.
Modularity: Classes used for complex entities (Agent, Particle).

视觉效果：

分辨率： 在Retina屏幕上清晰显示（使用
```
pixelDensity
```
）。
构图： 遵循三分法或黄金比例。
色彩： 调色板协调（非纯随机）。

性能：

FPS： 交互式作品保持60fps，静态生成作品无严格要求。
内存： 无内存泄漏（数组不会无限增长）。

代码：

种子随机： 使用
```
randomSeed()
```
确保可复现性。
窗口适配：
```
windowResized()
```
处理布局变化。
模块化： 使用类管理复杂实体（Agent、Particle）。

Examples

示例

Example 1: Interactive Data Visualization

示例1：交互式数据可视化

Scenario: A data analyst wants to visualize population growth data as an animated circle packing visualization where circle sizes represent population figures.

Approach:

Data Processing: Load CSV data and normalize population values to circle radii
Circle Packing Algorithm: Implement iterative circle placement with collision detection
Color Mapping: Create HSL color palette based on geographic region
Interactivity: Add mouse hover to display country name and population

Key Implementation:

javascript

// Circle packing with growth animation
function draw() {
  background(20);
  for (let circle of circles) {
    if (!circle.grown) {
      circle.grow();
      if (circle.grown) {
        circle.resolveCollisions(circles);
      }
    }
    circle.display();
  }
}

Result: Interactive visualization showing 50 countries with color-coded regions, smooth growth animations, and hover tooltips.

场景： 数据分析师希望将人口增长数据可视化为动画圆堆积图，其中圆的大小代表人口数量。

方法：

数据处理：加载CSV数据并将人口值归一化为圆的半径
圆堆积算法：实现带碰撞检测的迭代圆放置
颜色映射：基于地理区域创建HSL调色板
交互性：添加鼠标悬停显示国家名称和人口数量

核心实现：

javascript

// Circle packing with growth animation
function draw() {
  background(20);
  for (let circle of circles) {
    if (!circle.grown) {
      circle.grow();
      if (circle.grown) {
        circle.resolveCollisions(circles);
      }
    }
    circle.display();
  }
}

结果： 交互式可视化展示50个国家，按区域颜色编码，带有平滑的生长动画和悬停提示框。

Example 2: Generative Art NFT Collection

示例2：生成式艺术NFT集合

Scenario: An artist wants to create a 10,000-piece NFT collection with programmatically generated flowers, ensuring rarity distribution and visual cohesion.

Approach:

Trait Architecture: Define layers (background, stem, petals, center) with rarity weights
Hash-based Generation: Use hash function to deterministically select traits
Color Harmony: Implement HSL-based color palettes with complementary accent colors
Batch Generation: Generate and export 10,000 images with metadata

Key Features:

5 background types with varying rarity (common to legendary)
20 flower types with 4 color variations each
Guaranteed visual uniqueness while maintaining aesthetic cohesion
Metadata JSON generation for Opensea compatibility

场景： 艺术家希望创建一个包含10000件作品的NFT集合，通过程序生成花朵，确保稀有度分布和视觉协调性。

方法：

特征架构：定义各图层（背景、花茎、花瓣、花心）并设置稀有度权重
基于哈希的生成：使用哈希函数确定性选择特征
色彩和谐：实现基于HSL的调色板并搭配互补色
批量生成：生成并导出10000张图片及元数据

核心特性：

5种背景类型，稀有度从普通到传奇不等
20种花型，每种有4种颜色变体
确保视觉唯一性的同时保持美学协调性
生成兼容Opensea的JSON元数据

Example 3: Educational Physics Simulation

示例3：教育用物理模拟

Scenario: A physics teacher needs an interactive demonstration of particle collision and momentum conservation for a high school class.

Approach:

Particle System: Create particles with position, velocity, and mass
Collision Detection: Implement elastic collision physics
Controls: Add sliders for gravity, elasticity, and particle count
Visualization: Show velocity vectors and momentum totals in real-time

Educational Features:

Adjustable parameters (gravity coefficient, wall bounce)
Pause/step controls for detailed analysis
Real-time momentum calculations displayed
Trail effect showing particle paths

场景： 物理教师需要一个用于高中课堂的粒子碰撞和动量守恒交互式演示工具。

方法：

粒子系统：创建带有位置、速度和质量属性的粒子
碰撞检测：实现弹性碰撞物理效果
控制项：添加重力、弹性和粒子数量的滑块
可视化：实时显示速度向量和总动量

教育特性：

可调整参数（重力系数、墙壁反弹系数）
暂停/单步控制以便详细分析
实时计算并显示动量
显示粒子运动轨迹的拖尾效果

Best Practices

最佳实践

Visual Design Excellence

视觉设计卓越

Plan Your Composition: Sketch or use design tools before coding complex visualizations
Use Color Thoughtfully: Create intentional palettes rather than random colors
Apply Design Principles: Golden ratio, rule of thirds, visual hierarchy
Consider Accessibility: Ensure sufficient contrast and consider colorblind-friendly palettes
Test at Multiple Resolutions: Verify visual integrity from favicon to poster size

规划构图：在编码复杂可视化前先手绘或使用设计工具构思
谨慎使用色彩：创建有意的调色板而非随机颜色
应用设计原则：黄金比例、三分法、视觉层次
考虑可访问性：确保足够的对比度，考虑色盲友好的调色板
多分辨率测试：验证从图标到海报尺寸的视觉完整性

Performance Optimization

性能优化

Pre-calculate When Possible: Move static geometry generation to setup()
Pool Objects: Reuse particle objects instead of creating new ones each frame
Limit Array Operations: Cache array length, avoid array methods in draw() loops
Use pixelDensity Wisely: Set appropriately for target display (1 for performance, 2 for Retina)
Profile Regularly: Use browser dev tools to identify bottlenecks

尽可能预计算：将静态几何图形生成移至setup()
对象池复用：重用粒子对象而非每帧创建新对象
限制数组操作：缓存数组长度，避免在draw()循环中使用数组方法
合理使用pixelDensity：根据目标显示器设置（1追求性能，2适配Retina）
定期性能分析：使用浏览器开发者工具识别性能瓶颈

Algorithm Selection

算法选择

Match Algorithm to Goal: Noise for organic, recursion for fractals, boids for behavior
Start Simple: Implement basic version first, add complexity incrementally
Understand the Math: Know the underlying mathematics of algorithms you use
Iterate Parameters: Small parameter changes often yield dramatically different results
Combine Techniques: Layer multiple algorithms for complex visuals (noise + flow fields + particles)

算法匹配目标：有机风格用噪声，分形用递归，行为模拟用Boids
从简开始：先实现基础版本，再逐步增加复杂度
理解底层数学：了解所用算法的基础数学原理
迭代调整参数：小的参数变化往往会产生截然不同的结果
组合多种技术：叠加多种算法实现复杂视觉效果（噪声+流场+粒子）

Code Organization

代码组织

Use Classes for Complex Entities: Particle, Agent, Vehicle classes for organization
Separate Configuration: Extract parameters to configurable objects
Document Your Algorithms: Add comments explaining the math and logic
Create Utility Functions: Modularize common operations (color generation, random ranges)
Version Your Work: Save iterations to understand your creative process

用类管理复杂实体：使用Particle、Agent、Vehicle类提升代码组织性
分离配置项：将参数提取到可配置对象中
注释算法：添加注释解释数学原理和逻辑
创建工具函数：模块化常见操作（颜色生成、随机范围）
版本化作品：保存迭代版本以追踪创作过程

Export and Distribution

导出与分发

Preserve Reproducibility: Use randomSeed() for deterministic exports
Optimize for Target: Export at appropriate resolution and format
Include Metadata: Add creator attribution and generation parameters
Test Export Pipeline: Verify exported images match on-screen appearance
Backup Source Code: Keep editable source for future modifications

保留可复现性：使用randomSeed()实现确定性导出
针对目标优化：以合适的分辨率和格式导出
包含元数据：添加创作者署名和生成参数
测试导出流程：验证导出图像与屏幕显示一致
备份源代码：保留可编辑的源代码以便未来修改

algorithmic-art

Original

Translation

Algorithmic Artist

算法艺术家

Purpose

用途

When to Use

适用场景

2. Decision Framework

2. 决策框架

Algorithm Selection

算法选择

Randomness Strategy

随机性策略

Workflow 2: Recursive Tree (Fractal)

工作流2：递归树（分形）

Core Capabilities

核心能力

Generative Art Creation

生成式艺术创作

Mathematical Visualization

数学可视化

Performance Optimization

性能优化

Creative Technology Integration

创意技术集成

5. Anti-Patterns & Gotchas

5. 反模式与注意事项

❌ Anti-Pattern 1: Heavy Computation in draw()

❌ 反模式1：在draw()中进行大量计算

❌ Anti-Pattern 2: Ignoring Resolution

❌ 反模式2：忽略分辨率

❌ Anti-Pattern 3: Pure Randomness

❌ 反模式3：纯随机

7. Quality Checklist

7. 质量检查清单

Examples

示例

Example 1: Interactive Data Visualization

示例1：交互式数据可视化

Example 2: Generative Art NFT Collection

示例2：生成式艺术NFT集合

Example 3: Educational Physics Simulation

示例3：教育用物理模拟

Best Practices

最佳实践

Visual Design Excellence

视觉设计卓越

Performance Optimization

性能优化

Algorithm Selection

算法选择

Code Organization

代码组织

Export and Distribution

导出与分发

❌ Anti-Pattern 1: Heavy Computation in
`draw()`

❌ 反模式1：在
`draw()`
中进行大量计算