algorithmic-art · 用代码画可调的生成艺术

作者提供的示例，实际效果取决于你的输入和使用工具。

输入

视觉：深蓝底、浅色短线像风场；画布 600×400；种子 42；参数为采样间距与噪声尺度。

输出

编辑示例 · 未运行

const seed = 42;
function setup() {
  createCanvas(600, 400); pixelDensity(1);
  randomSeed(seed); noiseSeed(seed);
  background("#142238"); stroke("#b7d7e8");
  const gap = 16, scale = 0.006;
  for (let y=20; y<height-20; y+=gap) {
    for (let x=20; x<width-20; x+=gap) {
      const a = noise(x*scale, y*scale) * TWO_PI * 2;
      line(x, y, x+cos(a)*10, y+sin(a)*10);
    }
  }
  noLoop();
}

后续控件：seed、gap、scale；每次变更先清画布再重绘。

用 p5.js 做粒子、流场等生成艺术，保留随机种子和参数，方便继续调画面。

具体任务

绘制可复现的风向粒子线：用 p5.js 做粒子、流场等生成艺术，保留随机种子和参数，方便继续调画面。

建立参数探索界面：提供种子、重置和导出控件，用参数影响图形关系而非随机堆叠效果。

必需材料

希望表达的视觉方向

尺寸、颜色和可调参数

可选材料

参考情绪板

导出需求

使用门槛

能在浏览器运行 p5.js 并检查不同参数与随机种子的结果。

这个 Skill 额外提供的方法

用固定种子保证可复现，再开放少量有意义的参数，让作品可以探索而非只得到一张图。

编辑示例（未运行）

绘制可复现的风向粒子线

任务：请根据下面的示例材料完成绘制可复现的风向粒子线，把判断依据和待确认事项写清楚。

输入：
视觉：深蓝底、浅色短线像风场；画布 600×400；种子 42；参数为采样间距与噪声尺度。

结果片段：
```javascript
const seed = 42;
function setup() {
  createCanvas(600, 400); pixelDensity(1);
  randomSeed(seed); noiseSeed(seed);
  background("#142238"); stroke("#b7d7e8");
  const gap = 16, scale = 0.006;
  for (let y=20; y<height-20; y+=gap) {
    for (let x=20; x<width-20; x+=gap) {
      const a = noise(x*scale, y*scale) * TWO_PI * 2;
      line(x, y, x+cos(a)*10, y+sin(a)*10);
    }
  }
  noLoop();
}
```

后续控件：seed、gap、scale；每次变更先清画布再重绘。

用固定种子保证可复现，再开放少量有意义的参数，让作品可以探索而非只得到一张图。 该片段是编辑示例，用于说明交付形态，未运行上游技能。

首次任务

请使用「用代码画可调的生成艺术」完成「绘制可复现的风向粒子线」。
任务要求：用固定种子保证可复现，再开放少量有意义的参数，让作品可以探索而非只得到一张图。

我的必需材料：
- 希望表达的视觉方向：[请填写或粘贴]
- 尺寸、颜色和可调参数：[请填写或粘贴]

请基于上述实际材料输出：可在浏览器打开的 HTML/JavaScript 作品、参数控件和种子设置。缺少依据的地方单列为待确认，不编造事实；未执行的操作或测试明确标为未执行。

验收要求：
1. 相同种子与参数得到相同构图。
2. 参数范围不会让浏览器明显失去响应。
3. 重置和导出与当前画布状态一致。

验收方法

相同种子与参数得到相同构图

参数范围不会让浏览器明显失去响应

重置和导出与当前画布状态一致

依赖与准备

需浏览器与 p5.js；来源提供交互页面模板，外部脚本加载受网络与 CSP 影响，可按项目允许方式本地托管依赖。

使用边界

创作应为原创算法表达，不能照搬在世艺术家的具体作品。

浏览器性能和导出尺寸存在约束，大量粒子需控制计算负载。

排错

每次刷新构图都不一样：同时固定 randomSeed 与 noiseSeed，并排除时间相关输入。

滑动参数页面卡死：减少粒子或采样密度，对高频输入节流并避免重复动画循环。

固定来源

https://github.com/anthropics/skills/blob/34040c9c568585f6929bedeaad110ad08f079624/skills/algorithmic-art/SKILL.md

先看看示例

输入

输出

方法说明