Loading...
Loading...
Compare original and translation side by side
| Mode | Input | Output | Reference |
|---|---|---|---|
| Generative art | Seed / parameters | Procedural visual composition (still or animated) | |
| Data visualization | Dataset / API | Interactive charts, graphs, custom data displays | |
| Interactive experience | None (user drives) | Mouse/keyboard/touch-driven sketch | |
| Animation / motion graphics | Timeline / storyboard | Timed sequences, kinetic typography, transitions | |
| 3D scene | Concept description | WebGL geometry, lighting, camera, materials | |
| Image processing | Image file(s) | Pixel manipulation, filters, mosaic, pointillism | |
| Audio-reactive | Audio file / mic | Sound-driven generative visuals | |
| 模式 | 输入 | 输出 | 参考资料 |
|---|---|---|---|
| 生成艺术 | 随机种子 / 参数 | 程序化视觉构图（静态或动态） | |
| 数据可视化 | 数据集 / API | 交互式图表、图形、自定义数据展示 | |
| 交互体验 | 无（由用户驱动） | 鼠标/键盘/触摸驱动的创意编程作品 | |
| 动画 / 动态图形 | 时间线 / 分镜脚本 | 定时序列、动态排版、转场效果 | |
| 3D场景 | 概念描述 | WebGL几何结构、光照、相机、材质 | |
| 图像处理 | 图像文件 | 像素操作、滤镜、马赛克、点画法 | |
| 音频响应式 | 音频文件 / 麦克风 | 声音驱动的生成视觉效果 | |
| Layer | Tool | Purpose |
|---|---|---|
| Core | p5.js 1.11.3 (CDN) | Canvas rendering, math, transforms, event handling |
| 3D | p5.js WebGL mode | 3D geometry, camera, lighting, GLSL shaders |
| Audio | p5.sound.js (CDN) | FFT analysis, amplitude, mic input, oscillators |
| Export | Built-in | PNG, GIF, frame sequence output |
| Capture | CCapture.js (optional) | Deterministic framerate video capture (WebM, GIF) |
| Headless | Puppeteer + Node.js (optional) | Automated high-res rendering, MP4 via ffmpeg |
| SVG | p5.js-svg 1.6.0 (optional) | Vector output for print — requires p5.js 1.x |
| Natural media | p5.brush (optional) | Watercolor, charcoal, pen — requires p5.js 2.x + WEBGL |
| Texture | p5.grain (optional) | Film grain, texture overlays |
| Fonts | Google Fonts / | Custom typography via OTF/TTF/WOFF2 |
| 层级 | 工具 | 用途 |
|---|---|---|
| 核心 | p5.js 1.11.3（CDN） | 画布渲染、数学计算、变换处理、事件处理 |
| 3D | p5.js WebGL模式 | 3D几何结构、相机、光照、GLSL着色器 |
| 音频 | p5.sound.js（CDN） | FFT分析、振幅检测、麦克风输入、振荡器 |
| 导出 | 内置 | PNG、GIF、帧序列输出 |
| 捕获 | CCapture.js（可选） | 确定性帧率视频捕获（WebM、GIF） |
| 无界面渲染 | Puppeteer + Node.js（可选） | 自动化高分辨率渲染，通过ffmpeg生成MP4 |
| SVG | p5.js-svg 1.6.0（可选） | 用于印刷的矢量输出——需要p5.js 1.x版本 |
| 自然媒介 | p5.brush（可选） | 水彩、炭笔、钢笔效果——需要p5.js 2.x + WEBGL |
| 纹理 | p5.grain（可选） | 胶片颗粒、纹理叠加 |
| 字体 | Google Fonts / | 通过OTF/TTF/WOFF2实现自定义排版 |
async setup()preload()splineVertex().modify()textToContours()references/core-api.mdasync setup()preload()splineVertex().modify()textToContours()references/core-api.mdCONCEPT → DESIGN → CODE → PREVIEW → EXPORT → VERIFYpreload()setup()draw()saveCanvas()saveGif()saveFrames()概念构思 → 设计规划 → 代码实现 → 预览调试 → 导出输出 → 质量验证preload()setup()draw()saveCanvas()saveGif()saveFrames()| Dimension | Options | Reference |
|---|---|---|
| Color system | HSB/HSL, RGB, named palettes, procedural harmony, gradient interpolation | |
| Noise vocabulary | Perlin noise, simplex, fractal (octaved), domain warping, curl noise | |
| Particle systems | Physics-based, flocking, trail-drawing, attractor-driven, flow-field following | |
| Shape language | Geometric primitives, custom vertices, bezier curves, SVG paths | |
| Motion style | Eased, spring-based, noise-driven, physics sim, lerped, stepped | |
| Typography | System fonts, loaded OTF, | |
| Shader effects | GLSL fragment/vertex, filter shaders, post-processing, feedback loops | |
| Composition | Grid, radial, golden ratio, rule of thirds, organic scatter, tiled | |
| Interaction model | Mouse follow, click spawn, drag, keyboard state, scroll-driven, mic input | |
| Blend modes | | |
| Layering | | |
| Texture | Perlin surface, stippling, hatching, halftone, pixel sorting | |
| 维度 | 选项 | 参考资料 |
|---|---|---|
| 色彩系统 | HSB/HSL、RGB、预设调色板、程序化色彩和谐、渐变插值 | |
| 噪声词汇 | Perlin噪声、单纯形噪声、分形噪声（多八度）、域扭曲、卷曲噪声 | |
| 粒子系统 | 基于物理、集群行为、拖尾绘制、吸引子驱动、流场跟随 | |
| 形状语言 | 几何基本图形、自定义顶点、贝塞尔曲线、SVG路径 | |
| 运动风格 | 缓动、弹簧物理、噪声驱动、物理模拟、线性插值、步进式 | |
| 排版 | 系统字体、加载的OTF字体、 | |
| 着色器效果 | GLSL片段/顶点着色器、滤镜着色器、后期处理、反馈循环 | |
| 构图 | 网格、放射状、黄金比例、三分法、有机散布、平铺 | |
| 交互模型 | 鼠标跟随、点击生成、拖拽、键盘状态、滚动驱动、麦克风输入 | |
| 混合模式 | | |
| 分层 | | |
| 纹理 | Perlin表面、点画、影线、半色调、像素排序 | |
fill(255, 0, 0)background(0)background(255)fill(255, 0, 0)background(0)background(255)ellipse()ellipse()windowWidth/windowHeightP2DWEBGLnoLoop()templates/viewer.htmlwindowWidth/windowHeightP2DWEBGLnoLoop()templates/viewer.htmltemplates/viewer.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Name</title>
<script>p5.disableFriendlyErrors = true;</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script> -->
<!-- <script src="https://unpkg.com/p5.js-svg@1.6.0"></script> --> <!-- SVG export -->
<!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> --> <!-- video capture -->
<style>
html, body { margin: 0; padding: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<script>
// === Configuration ===
const CONFIG = {
seed: 42,
// ... project-specific params
};
// === Color Palette ===
const PALETTE = {
bg: '#0a0a0f',
primary: '#e8d5b7',
// ...
};
// === Global State ===
let particles = [];
// === Preload (fonts, images, data) ===
function preload() {
// font = loadFont('...');
}
// === Setup ===
function setup() {
createCanvas(1920, 1080);
randomSeed(CONFIG.seed);
noiseSeed(CONFIG.seed);
colorMode(HSB, 360, 100, 100, 100);
// Initialize state...
}
// === Draw Loop ===
function draw() {
// Render frame...
}
// === Helper Functions ===
// ...
// === Classes ===
class Particle {
// ...
}
// === Event Handlers ===
function mousePressed() { /* ... */ }
function keyPressed() { /* ... */ }
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
</script>
</body>
</html>randomSeed()noiseSeed()colorMode(HSB, 360, 100, 100, 100)update()display()createGraphics()templates/viewer.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Name</title>
<script>p5.disableFriendlyErrors = true;</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script> -->
<!-- <script src="https://unpkg.com/p5.js-svg@1.6.0"></script> --> <!-- SVG导出 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> --> <!-- 视频捕获 -->
<style>
html, body { margin: 0; padding: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<script>
// === 配置 ===
const CONFIG = {
seed: 42,
// ... 项目专属参数
};
// === 调色板 ===
const PALETTE = {
bg: '#0a0a0f',
primary: '#e8d5b7',
// ...
};
// === 全局状态 ===
let particles = [];
// === 预加载（字体、图像、数据）===
function preload() {
// font = loadFont('...');
}
// === 初始化 ===
function setup() {
createCanvas(1920, 1080);
randomSeed(CONFIG.seed);
noiseSeed(CONFIG.seed);
colorMode(HSB, 360, 100, 100, 100);
// 初始化状态...
}
// === 绘制循环 ===
function draw() {
// 渲染帧...
}
// === 辅助函数 ===
// ...
// === 类 ===
class Particle {
// ...
}
// === 事件处理函数 ===
function mousePressed() { /* ... */ }
function keyPressed() { /* ... */ }
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
</script>
</body>
</html>randomSeed()noiseSeed()colorMode(HSB, 360, 100, 100, 100)update()display()createGraphics()loadImage()loadFont()scripts/serve.shpython3 -m http.serverloadImage()loadFont()scripts/serve.shpython3 -m http.server| Format | Method | Command |
|---|---|---|
| PNG | | Press 's' to save |
| High-res PNG | Puppeteer headless capture | |
| GIF | | Press 'g' to save |
| Frame sequence | | Then |
| MP4 | Puppeteer frame capture + ffmpeg | |
| SVG | | |
| 格式 | 方法 | 命令 |
|---|---|---|
| PNG | 在 | 按's'键保存 |
| 高分辨率PNG | Puppeteer无界面捕获 | |
| GIF | | 按'g'键保存 |
| 帧序列 | | 然后执行 |
| MP4 | Puppeteer帧捕获 + ffmpeg | |
| SVG | 使用p5.js-svg时调用 | |
p5.disableFriendlyErrors = true; // BEFORE setup()
function setup() {
pixelDensity(1); // prevent 2x-4x overdraw on retina
createCanvas(1920, 1080);
}Math.*// In draw() or update() hot paths:
let a = Math.sin(t); // not sin(t)
let r = Math.sqrt(dx*dx+dy*dy); // not dist() — or better: skip sqrt, compare magSq
let v = Math.random(); // not random() — when seed not needed
let m = Math.min(a, b); // not min(a, b)console.log()draw()draw()references/troubleshooting.mdp5.disableFriendlyErrors = true; // 在setup()之前
function setup() {
pixelDensity(1); // 避免视网膜屏幕上2x-4x的过度绘制
createCanvas(1920, 1080);
}Math.*// 在draw()或update()热点路径中：
let a = Math.sin(t); // 不用sin(t)
let r = Math.sqrt(dx*dx+dy*dy); // 不用dist() — 或者更好：跳过开方，比较magSq
let v = Math.random(); // 不需要种子时不用random()
let m = Math.min(a, b); // 不用min(a, b)draw()console.log()draw()references/troubleshooting.mdfunction setup() {
randomSeed(CONFIG.seed);
noiseSeed(CONFIG.seed);
// All random() and noise() calls now deterministic
}Math.random()random()CONFIG.seed = floor(random(99999))function setup() {
randomSeed(CONFIG.seed);
noiseSeed(CONFIG.seed);
// 所有random()和noise()调用现在都是确定性的
}Math.random()random()CONFIG.seed = floor(random(99999))// fxhash convention
const SEED = $fx.hash; // unique per mint
const rng = $fx.rand; // deterministic PRNG
$fx.features({ palette: 'warm', complexity: 'high' });
// In setup():
randomSeed(SEED); // for p5's noise()
noiseSeed(SEED);
// Replace random() with rng() for platform determinism
let x = rng() * width; // instead of random(width)references/export-pipeline.md// fxhash约定
const SEED = $fx.hash; // 每个铸币唯一
const rng = $fx.rand; // 确定性伪随机数生成器
$fx.features({ palette: 'warm', complexity: 'high' });
// 在setup()中：
randomSeed(SEED); // 用于p5的noise()
noiseSeed(SEED);
// 用rng()替代random()以实现平台确定性
let x = rng() * width; // 不用random(width)references/export-pipeline.mdcolorMode(HSB, 360, 100, 100, 100);
// Now: fill(hue, sat, bri, alpha)
// Rotate hue: fill((baseHue + offset) % 360, 80, 90)
// Desaturate: fill(hue, sat * 0.3, bri)
// Darken: fill(hue, sat, bri * 0.5)references/color-systems.mdcolorMode(HSB, 360, 100, 100, 100);
// 现在：fill(色相, 饱和度, 亮度, 透明度)
// 旋转色相：fill((baseHue + offset) % 360, 80, 90)
// 降低饱和度：fill(色相, 饱和度 * 0.3, 亮度)
// 调暗：fill(色相, 饱和度, 亮度 * 0.5)references/color-systems.mdnoise(x, y)function fbm(x, y, octaves = 4) {
let val = 0, amp = 1, freq = 1, sum = 0;
for (let i = 0; i < octaves; i++) {
val += noise(x * freq, y * freq) * amp;
sum += amp;
amp *= 0.5;
freq *= 2;
}
return val / sum;
}references/visual-effects.mdnoise(x, y)function fbm(x, y, octaves = 4) {
let val = 0, amp = 1, freq = 1, sum = 0;
for (let i = 0; i < octaves; i++) {
val += noise(x * freq, y * freq) * amp;
sum += amp;
amp *= 0.5;
freq *= 2;
}
return val / sum;
}references/visual-effects.mdlet bgLayer, fgLayer, trailLayer;
function setup() {
createCanvas(1920, 1080);
bgLayer = createGraphics(width, height);
fgLayer = createGraphics(width, height);
trailLayer = createGraphics(width, height);
}
function draw() {
renderBackground(bgLayer);
renderTrails(trailLayer); // persistent, fading
renderForeground(fgLayer); // cleared each frame
image(bgLayer, 0, 0);
image(trailLayer, 0, 0);
image(fgLayer, 0, 0);
}let bgLayer, fgLayer, trailLayer;
function setup() {
createCanvas(1920, 1080);
bgLayer = createGraphics(width, height);
fgLayer = createGraphics(width, height);
trailLayer = createGraphics(width, height);
}
function draw() {
renderBackground(bgLayer);
renderTrails(trailLayer); // 持久化、渐隐的拖尾
renderForeground(fgLayer); // 每帧清空
image(bgLayer, 0, 0);
image(trailLayer, 0, 0);
image(fgLayer, 0, 0);
}// SLOW: individual shapes
for (let p of particles) {
ellipse(p.x, p.y, p.size);
}
// FAST: single shape with beginShape()
beginShape(POINTS);
for (let p of particles) {
vertex(p.x, p.y);
}
endShape();
// FASTEST: pixel buffer for massive counts
loadPixels();
for (let p of particles) {
let idx = 4 * (floor(p.y) * width + floor(p.x));
pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2] = b; pixels[idx+3] = 255;
}
updatePixels();references/troubleshooting.md// 慢：单个形状绘制
for (let p of particles) {
ellipse(p.x, p.y, p.size);
}
// 快：使用beginShape()绘制单个形状
beginShape(POINTS);
for (let p of particles) {
vertex(p.x, p.y);
}
endShape();
// 最快：使用像素缓冲区处理大量粒子
loadPixels();
for (let p of particles) {
let idx = 4 * (floor(p.y) * width + floor(p.x));
pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2] = b; pixels[idx+3] = 255;
}
updatePixels();references/troubleshooting.mdwindowconst sketch = (p) => {
p.setup = function() {
p.createCanvas(800, 800);
};
p.draw = function() {
p.background(0);
p.ellipse(p.mouseX, p.mouseY, 50);
};
};
new p5(sketch, 'canvas-container');windowconst sketch = (p) => {
p.setup = function() {
p.createCanvas(800, 800);
};
p.draw = function() {
p.background(0);
p.ellipse(p.mouseX, p.mouseY, 50);
};
};
new p5(sketch, 'canvas-container');createCanvas(w, h, WEBGL)translate(-width/2, -height/2)push()pop()texture()rect()plane()createShader(vert, frag)createCanvas(w, h, WEBGL)translate(-width/2, -height/2)push()pop()rect()plane()texture()createShader(vert, frag)keyPressed()function keyPressed() {
if (key === 's' || key === 'S') saveCanvas('output', 'png');
if (key === 'g' || key === 'G') saveGif('output', 5);
if (key === 'r' || key === 'R') { randomSeed(millis()); noiseSeed(millis()); }
if (key === ' ') CONFIG.paused = !CONFIG.paused;
}keyPressed()function keyPressed() {
if (key === 's' || key === 'S') saveCanvas('output', 'png');
if (key === 'g' || key === 'G') saveGif('output', 5);
if (key === 'r' || key === 'R') { randomSeed(millis()); noiseSeed(millis()); }
if (key === ' ') CONFIG.paused = !CONFIG.paused;
}noLoop()function setup() {
createCanvas(1920, 1080);
pixelDensity(1);
noLoop(); // capture script controls frame advance
window._p5Ready = true; // signal readiness to capture script
}scripts/export-frames.js_p5Readyredraw()references/export-pipeline.mdffmpeg -f concatreferences/export-pipeline.mdnoLoop()function setup() {
createCanvas(1920, 1080);
pixelDensity(1);
noLoop(); // 捕获脚本控制帧推进
window._p5Ready = true; // 向捕获脚本发送就绪信号
}scripts/export-frames.js_p5Readyredraw()references/export-pipeline.mdffmpeg -f concatreferences/export-pipeline.mdopen sketch.htmlxdg-open sketch.htmlpython3 -m http.server 8080http://localhost:8080/sketch.htmlkeyPressed()node scripts/export-frames.js sketch.html --frames 300noLoop()_p5Readybash scripts/render.sh sketch.html output.mp4 --duration 30skill_view(name="p5js", file_path="references/...")open sketch.htmlxdg-open sketch.htmlpython3 -m http.server 8080http://localhost:8080/sketch.htmlkeyPressed()node scripts/export-frames.js sketch.html --frames 300noLoop()_p5Readybash scripts/render.sh sketch.html output.mp4 --duration 30skill_view(name="p5js", file_path="references/...")| Metric | Target |
|---|---|
| Frame rate (interactive) | 60fps sustained |
| Frame rate (animated export) | 30fps minimum |
| Particle count (P2D shapes) | 5,000-10,000 at 60fps |
| Particle count (pixel buffer) | 50,000-100,000 at 60fps |
| Canvas resolution | Up to 3840x2160 (export), 1920x1080 (interactive) |
| File size (HTML) | < 100KB (excluding CDN libraries) |
| Load time | < 2s to first frame |
| 指标 | 目标 |
|---|---|
| 帧率（交互场景） | 持续60fps |
| 帧率（动画导出） | 最低30fps |
| 粒子数量（P2D形状） | 5000-10000个，保持60fps |
| 粒子数量（像素缓冲区） | 50000-100000个，保持60fps |
| 画布分辨率 | 最高3840x2160（导出），1920x1080（交互） |
| 文件大小（HTML） | < 100KB（不包含CDN库） |
| 加载时间 | 首帧加载<2秒 |
| File | Contents |
|---|---|
| Canvas setup, coordinate system, draw loop, |
| 2D primitives, |
| Noise (Perlin, fractal, domain warp, curl), flow fields, particle systems (physics, flocking, trails), pixel manipulation, texture generation (stipple, hatch, halftone), feedback loops, reaction-diffusion |
| Frame-based animation, easing functions, |
| |
| |
| WEBGL renderer, 3D primitives, camera, lighting, materials, custom geometry, GLSL shaders ( |
| Mouse events, keyboard state, touch input, DOM elements, |
| |
| Performance profiling, per-pixel budgets, common mistakes, browser compatibility, WebGL debugging, font loading issues, pixel density traps, memory leaks, CORS |
| Interactive viewer template: seed navigation (prev/next/random/jump), parameter sliders, download PNG, responsive canvas. Start from this for explorable generative art |
| 文件 | 内容 |
|---|---|
| 画布设置、坐标系统、绘制循环、 |
| 2D基本图形、 |
| 噪声（Perlin、分形、域扭曲、卷曲）、流场、粒子系统（物理、集群、拖尾）、像素操作、纹理生成（点画、影线、半色调）、反馈循环、反应扩散 |
| 基于帧的动画、缓动函数、 |
| |
| |
| WEBGL渲染器、3D基本图形、相机、光照、材质、自定义几何结构、GLSL着色器（ |
| 鼠标事件、键盘状态、触摸输入、DOM元素、 |
| |
| 性能分析、每像素预算、常见错误、浏览器兼容性、WebGL调试、字体加载问题、像素密度陷阱、内存泄漏、CORS |
| 交互式查看器模板：种子导航（上一个/下一个/随机/跳转）、参数滑块、PNG下载、响应式画布。用于可探索的生成艺术 |