algorithmic-art

Algorithmic Artist 是一个面向生成艺术、创意编程与数学可视化的技能，使用 p5.js 和 JavaScript 通过代码创作视觉艺术。

用途该技能提供创意编程专长，专注于生成艺术、数学可视化和交互式装置。它通过代码创建视觉艺术，使用流场、粒子系统、噪声算法和算法图案，服务于创意与教育目的。

适用场景

决策框架算法选择依据视觉目标：

随机性策略包括：均匀（random()，白噪声）、高斯（randomGaussian()，钟形曲线）、Perlin（noise()，平滑梯度随机）、种子（randomSeed()，确定性输出）。

当需要重度 3D 渲染、复杂光照/阴影或 VR/AR 集成时，应升级到 threejs-pro。

工作流示例：递归树（分形）目标：用递归绘制一棵树。步骤：分支函数绘制长度为 len 的线，平移到线末端，旋转 theta，调用 branch(len * 0.67)，旋转 -theta * 2，再次调用 branch(len * 0.67)；当 len < 2 时终止。

核心能力

生成艺术创作：使用数学算法和随机性创建视觉作品；实现流场、粒子系统和基于噪声的可视化；生成几何图案、分形和镶嵌；创建程序化动画和交互式装置。
数学可视化：实现数据驱动视觉表示的算法；创建数学概念（分形、混沌理论）的可视化；构建自然现象的交互式模拟；开发数学概念的教育可视化。
性能优化：优化复杂生成系统的渲染性能；为实时作品实现 canvas/WebGL 优化；创建高效粒子系统和空间数据结构；管理大规模生成项目的内存使用。
创意技术集成：将生成艺术与 Web 技术集成；创建多种格式的可导出作品（PNG、SVG、GIF、视频）；实现交互性和用户输入响应；开发结合代码与物理输出的装置。

反模式与注意事项

在 draw() 中做重计算：每帧创建 10,000 个对象或每帧调整数组大小会导致 FPS 降至 5、浏览器卡死。正确做法：在 setup() 中预计算静态几何；使用对象池复用粒子。
忽略分辨率：硬编码 width = 500 会在 Retina 屏幕上显得像素化。正确做法：使用 pixelDensity(2) 或更高；使用相对单位（width * 0.5）而非绝对像素。
纯随机性：fill(random(255), random(255), random(255)) 会产生“小丑呕吐”式美学，缺乏凝聚力。正确做法：精选 5 种颜色的调色板并坚持使用；随机性应是调味品而非主菜。

质量检查清单

示例

交互式数据可视化：数据分析师将人口增长数据可视化为动画圆填充，圆大小代表人口。方法：加载 CSV 并归一化人口值为半径；实现带碰撞检测的迭代圆放置；基于地理区域创建 HSL 调色板；添加鼠标悬停显示国家名和人口。结果：展示 50 个国家的交互式可视化，区域颜色编码、平滑生长动画和悬停提示。
生成艺术 NFT 集合：艺术家创建 10,000 件程序化生成花朵的 NFT 集合，确保稀有度分布和视觉凝聚力。方法：定义图层（背景、茎、花瓣、中心）及稀有度权重；使用哈希函数确定性选择特征；实现基于 HSL 的互补强调色调色板；批量生成并导出 10,000 张图像及元数据。特点：5 种背景类型（普通到传奇）、20 种花朵类型各 4 种颜色变化、保证视觉独特性同时保持美学凝聚力、生成兼容 Opensea 的元数据 JSON。
教育物理模拟：物理教师需要粒子碰撞和动量守恒的交互式演示。方法：创建具有位置、速度、质量的粒子；实现弹性碰撞物理；添加重力、弹性、粒子数量的滑块；实时显示速度向量和动量总量。教育功能：可调参数（重力系数、墙壁反弹）、暂停/步进控制、实时动量计算显示、显示粒子路径的拖尾效果。

最佳实践

技能介绍