p5.js 创意编程

p5.js 创意编程：生成艺术、着色器、交互式、3D 效果。

使用场景

当用户要求：p5.js 草图、创意编程、生成艺术、交互式可视化、canvas 动画、基于浏览器的视觉艺术、数据可视化、着色器效果时使用。

创意标准

• 首帧卓越。 输出必须在首次加载时视觉上引人注目。
• 超越参考词汇。 噪声函数、粒子系统、调色板是起始词汇。
• 主动创意。 交付具有涌现行为、拖尾鬼影、调色板偏移的粒子系统。
• 密集、分层、深思熟虑。 每一帧都应该值得观看。绝无平面白色背景。

模式

技术栈

每个项目单个自包含 HTML 文件。无需构建步骤。

管道

概念 → 设计 → 编码 → 预览 → 导出 → 验证

工作流程

let particles = [];

function setup() {
  createCanvas(800, 600);
  for (let i = 0; i < 100; i++) {
    particles.push(new Particle());
  }
}

function draw() {
  background(20);
  for (let p of particles) {
    p.update();
    p.display();
  }
}

颜色系统

使用 HSB 模式进行创意编程：

colorMode(HSB, 360, 100, 100);
let c = color(180, 80, 90); // 青色

噪声

let x = noise(frameCount * 0.01) * width;

分层渲染

使用 createGraphics() 创建离屏缓冲区：

let bg = createGraphics(width, height);
bg.background(0);
image(bg, 0, 0);