# Algorithmic Art

> |

- **Type:** Skill
- **Install:** `agentstack add skill-hhhh124hhhh-skillmate-algorithmic-art`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [hhhh124hhhh](https://agentstack.voostack.com/s/hhhh124hhhh)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [hhhh124hhhh](https://github.com/hhhh124hhhh)
- **Source:** https://github.com/hhhh124hhhh/SkillMate/tree/main/resources/skills/algorithmic-art

## Install

```sh
agentstack add skill-hhhh124hhhh-skillmate-algorithmic-art
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 算法艺术创作

## 概述

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

**核心功能**：
- 种子随机数（可重现）
- 交互式参数调整
- 导出高质量图像
- Web 交互查看器

## 基础模板

### 标准结构

```javascript
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() {
  // 艺术生成逻辑
}
```

### 基础元素

#### 粒子系统

```javascript
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）

```javascript
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

```javascript
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();
  });
}
```

### 种子控制

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

## 导出

### 保存图像

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

function mousePressed() {
  saveArt();
}
```

### 批量生成

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

## 最佳实践

### 1. 使用种子

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

### 2. 参数化设计

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

### 3. 性能优化

```javascript
// 使用 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](https://github.com/hhhh124hhhh)
- **Source:** [hhhh124hhhh/SkillMate](https://github.com/hhhh124hhhh/SkillMate)
- **License:** Apache-2.0

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-hhhh124hhhh-skillmate-algorithmic-art
- Seller: https://agentstack.voostack.com/s/hhhh124hhhh
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.