algorithmic-art by claudiodearaujo/izacenter
npx skills add https://github.com/claudiodearaujo/izacenter --skill algorithmic-art算法哲学是计算美学运动,通过代码表达。输出 .md 文件(哲学)、.html 文件(交互式查看器)和 .js 文件(生成算法)。
这分为两个步骤:
首先,执行此任务:
首先,创建一个算法哲学(不是静态图像或模板),它将通过以下方式诠释:
考虑以下方法:
哲学必须强调:算法表达。涌现行为。计算美感。种子变化。
命名该运动(1-2 个词):"有机湍流" / "量子谐波" / "涌现的静止"
阐述哲学(4-6 段 - 简洁但完整):
为了捕捉算法本质,表达该哲学如何通过以下方式体现:
关键准则:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
哲学必须指导下一个版本算法化地表达思想,而不是通过静态图像。美存在于过程中,而非最终画面。
"有机湍流" 哲学:受自然法则约束的混沌,秩序从无序中涌现。算法表达:由分层 Perlin 噪声驱动的流场。成千上万的粒子跟随矢量力,它们的轨迹累积成有机密度图。多个噪声八度创建湍流区域和平静区域。颜色从速度和密度中涌现——快速粒子燃烧明亮,慢速粒子褪为阴影。算法运行直到达到平衡——一个经过精心调整的平衡点,其中每个参数都经过计算美学大师无数次迭代的优化。
"量子谐波" 哲学:展现波状干涉模式的离散实体。算法表达:在网格上初始化的粒子,每个粒子携带一个通过正弦波演化的相位值。当粒子靠近时,它们的相位发生干涉——相长干涉产生明亮节点,相消干涉产生空隙。简谐运动生成复杂的涌现曼荼罗。这是经过艰苦频率校准的结果,每个比率都经过精心选择以产生共振美感。
"递归低语" 哲学:跨尺度的自相似性,有限空间中的无限深度。算法表达:递归细分的分支结构。每个分支略有随机化,但受黄金比例约束。L-系统或递归细分生成既具有数学感又具有有机感的树状形式。细微的噪声扰动打破完美的对称性。线条权重随每个递归级别递减。每个分支角度都是深入数学探索的产物。
"场动力学" 哲学:通过其对物质的影响使不可见的力量变得可见。算法表达:由数学函数或噪声构建的矢量场。粒子在边缘诞生,沿着场线流动,在达到平衡或边界时消亡。多个场可以吸引、排斥或旋转粒子。可视化仅显示痕迹——不可见力量的幽灵般证据。一场通过力平衡精心编排的计算舞蹈。
"随机结晶" 哲学:随机过程结晶成有序结构。算法表达:随机化的圆堆积或 Voronoi 镶嵌。从随机点开始,让它们通过松弛算法演化。细胞相互推开直到达到平衡。颜色基于细胞大小、邻居数量或距中心的距离。涌现出的有机平铺感觉既随机又必然。每个种子都产生独特的晶体美感——大师级生成算法的标志。
这些是浓缩的示例。实际的算法哲学应为 4-6 个实质性段落。
算法哲学应为 4-6 段长。 用诗意的计算哲学填充它,融合预期的愿景。避免重复相同的观点。将此算法哲学输出为 .md 文件。
关键步骤:在实现算法之前,识别原始请求中微妙的主题线索。
基本原则:概念是嵌入在算法本身中的一个微妙、小众的引用——不总是字面的,总是精妙的。熟悉该主题的人应该能直观地感受到它,而其他人则只是体验到一个大师级的生成作品。算法哲学提供了计算语言。推断出的概念提供了灵魂——悄无声息地编织在参数、行为和涌现模式中的概念 DNA。
这非常重要:引用必须如此精炼,以至于它能增强作品的深度而不自我宣告。像爵士音乐家通过算法和声引用另一首歌一样思考——只有知情者才能捕捉到,但每个人都能欣赏生成之美。
在哲学和概念框架确立之后,通过代码表达它。在继续之前,暂停整理思路。仅使用创建的算法哲学和以下说明。
关键:在编写任何 HTML 之前:
templates/viewer.html 使用 Read 工具避免:
遵循这些做法:
模板是基础。在其上构建,不要重建它。
要创建具有生命力、呼吸的画廊级计算艺术,请使用算法哲学作为基础。
种子随机性(Art Blocks 模式):
// 始终使用种子以确保可重现性
let seed = 12345; // 或来自用户输入的哈希值
randomSeed(seed);
noiseSeed(seed);
参数结构 - 遵循哲学:
要建立从算法哲学中自然涌现的参数,请考虑:"这个系统的哪些特性可以调整?"
let params = {
seed: 12345, // 始终包含种子以确保可重现性
// 颜色
// 添加控制您算法的参数:
// - 数量(多少个?)
// - 尺度(多大?多快?)
// - 概率(可能性多大?)
// - 比率(什么比例?)
// - 角度(什么方向?)
// - 阈值(行为何时改变?)
};
要设计有效的参数,请关注系统需要可调的特性,而不是从"模式类型"的角度思考。
核心算法 - 表达哲学:
关键:算法哲学应决定构建什么。
要通过代码表达哲学,避免思考"应该使用哪种模式?",而是思考"如何通过代码表达这种哲学?"
如果哲学是关于有机涌现,请考虑使用:
如果哲学是关于数学美感,请考虑使用:
如果哲学是关于受控混沌,请考虑使用:
算法源自哲学,而非选项菜单。
为了指导实现,让概念本质启发创造性和原创性的选择。构建一些表达此特定请求愿景的东西。
画布设置:标准 p5.js 结构:
function setup() {
createCanvas(1200, 1200);
// 初始化您的系统
}
function draw() {
// 您的生成算法
// 可以是静态的(noLoop)或动画的
}
关键:要达到大师级水平,创建感觉像是经过生成艺术大师无数次迭代才涌现的算法。仔细调整每个参数。确保每个模式都有目的地涌现。这不是随机噪声——这是经过深厚专业知识优化的受控混沌。
输出:
templates/viewer.html 构建的自包含交互式生成艺术(参见步骤 0 和下一节)HTML 工件包含所有内容:p5.js(来自 CDN)、算法、参数控件和 UI——全部在一个文件中,可在 claude.ai 工件或任何浏览器中立即运行。从模板文件开始,而非从头开始。
提醒:templates/viewer.html 应该已经阅读过(参见步骤 0)。将该文件作为起点。
为了允许探索生成艺术,创建一个单一、自包含的 HTML 工件。确保该工件可在 claude.ai 或任何浏览器中立即运行——无需设置。将所有内容内联嵌入。
templates/viewer.html 文件是基础。它包含所需的确切结构和样式。
固定的(始终完全按照所示包含):
可变的(为每件艺术品自定义):
每件艺术品都应具有独特的参数和算法! 固定部分提供一致的 UX——其他所有内容都表达独特的愿景。
1. 参数控件
2. 种子导航
3. 单个工件结构
<!DOCTYPE html>
<html>
<head>
<!-- 来自 CDN 的 p5.js - 始终可用 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
<style>
/* 所有样式内联 - 简洁、极简 */
/* 画布在上,控件在下 */
</style>
</head>
<body>
<div id="canvas-container"></div>
<div id="controls">
<!-- 所有参数控件 -->
</div>
<script>
// 所有 p5.js 代码内联在此处
// 参数对象、类、函数
// setup() 和 draw()
// UI 处理程序
// 所有内容自包含
</script>
</body>
</html>
关键:这是一个单一的工件。没有外部文件,没有导入(除了 p5.js CDN)。所有内容内联。
4. 实现细节 - 构建侧边栏
侧边栏结构:
1. 种子(固定的) - 始终完全按照所示包含:
2. 参数(可变的) - 为艺术品创建控件:
<div class="control-group">
<label>参数名称</label>
<input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
<span class="value-display" id="param-value">...</span>
</div>
根据需要添加尽可能多的 control-group div。
3. 颜色(可选/可变的) - 如果艺术品需要可调颜色则包含:
4. 操作(固定的) - 始终完全按照所示包含:
要求:
HTML 工件立即工作:
工件默认包含种子导航(上一个/下一个/随机按钮),允许用户无需创建多个文件即可探索变体。如果用户想要突出显示特定的变体:
这就像从同一块版上创建一系列版画——算法是一致的,但每个种子都揭示了其潜力的不同方面。交互性质意味着用户通过探索种子空间来发现自己的最爱。
用户请求 → 算法哲学 → 实现
每个请求都是独特的。该过程涉及:
常量:
其他所有内容都是可变的:
为了达到最佳效果,相信创造力,让哲学指导实现。
此技能包含有用的模板和文档:
关键提醒:
每周安装
1
仓库
GitHub 星标
1
首次出现
1 天前
安全审计
安装于
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).
This happens in two steps:
First, undertake this task:
To begin, create an ALGORITHMIC PHILOSOPHY (not static images or templates) that will be interpreted through:
Consider this approach:
The philosophy must emphasize: Algorithmic expression. Emergent behavior. Computational beauty. Seeded variation.
Name the movement (1-2 words): "Organic Turbulence" / "Quantum Harmonics" / "Emergent Stillness"
Articulate the philosophy (4-6 paragraphs - concise but complete):
To capture the ALGORITHMIC essence, express how this philosophy manifests through:
CRITICAL GUIDELINES:
The philosophy must guide the next version to express ideas ALGORITHMICALLY, not through static images. Beauty lives in the process, not the final frame.
"Organic Turbulence" Philosophy: Chaos constrained by natural law, order emerging from disorder. Algorithmic expression: Flow fields driven by layered Perlin noise. Thousands of particles following vector forces, their trails accumulating into organic density maps. Multiple noise octaves create turbulent regions and calm zones. Color emerges from velocity and density - fast particles burn bright, slow ones fade to shadow. The algorithm runs until equilibrium - a meticulously tuned balance where every parameter was refined through countless iterations by a master of computational aesthetics.
"Quantum Harmonics" Philosophy: Discrete entities exhibiting wave-like interference patterns. Algorithmic expression: Particles initialized on a grid, each carrying a phase value that evolves through sine waves. When particles are near, their phases interfere - constructive interference creates bright nodes, destructive creates voids. Simple harmonic motion generates complex emergent mandalas. The result of painstaking frequency calibration where every ratio was carefully chosen to produce resonant beauty.
"Recursive Whispers" Philosophy: Self-similarity across scales, infinite depth in finite space. Algorithmic expression: Branching structures that subdivide recursively. Each branch slightly randomized but constrained by golden ratios. L-systems or recursive subdivision generate tree-like forms that feel both mathematical and organic. Subtle noise perturbations break perfect symmetry. Line weights diminish with each recursion level. Every branching angle the product of deep mathematical exploration.
"Field Dynamics" Philosophy: Invisible forces made visible through their effects on matter. Algorithmic expression: Vector fields constructed from mathematical functions or noise. Particles born at edges, flowing along field lines, dying when they reach equilibrium or boundaries. Multiple fields can attract, repel, or rotate particles. The visualization shows only the traces - ghost-like evidence of invisible forces. A computational dance meticulously choreographed through force balance.
"Stochastic Crystallization" Philosophy: Random processes crystallizing into ordered structures. Algorithmic expression: Randomized circle packing or Voronoi tessellation. Start with random points, let them evolve through relaxation algorithms. Cells push apart until equilibrium. Color based on cell size, neighbor count, or distance from center. The organic tiling that emerges feels both random and inevitable. Every seed produces unique crystalline beauty - the mark of a master-level generative algorithm.
These are condensed examples. The actual algorithmic philosophy should be 4-6 substantial paragraphs.
The algorithmic philosophy should be 4-6 paragraphs long. Fill it with poetic computational philosophy that brings together the intended vision. Avoid repeating the same points. Output this algorithmic philosophy as a .md file.
CRITICAL STEP : Before implementing the algorithm, identify the subtle conceptual thread from the original request.
THE ESSENTIAL PRINCIPLE : The concept is a subtle, niche reference embedded within the algorithm itself - not always literal, always sophisticated. Someone familiar with the subject should feel it intuitively, while others simply experience a masterful generative composition. The algorithmic philosophy provides the computational language. The deduced concept provides the soul - the quiet conceptual DNA woven invisibly into parameters, behaviors, and emergence patterns.
This is VERY IMPORTANT : The reference must be so refined that it enhances the work's depth without announcing itself. Think like a jazz musician quoting another song through algorithmic harmony - only those who know will catch it, but everyone appreciates the generative beauty.
With the philosophy AND conceptual framework established, express it through code. Pause to gather thoughts before proceeding. Use only the algorithmic philosophy created and the instructions below.
CRITICAL: BEFORE writing any HTML:
templates/viewer.html using the Read toolAvoid:
Follow these practices:
The template is the foundation. Build on it, don't rebuild it.
To create gallery-quality computational art that lives and breathes, use the algorithmic philosophy as the foundation.
Seeded Randomness (Art Blocks Pattern) :
// ALWAYS use a seed for reproducibility
let seed = 12345; // or hash from user input
randomSeed(seed);
noiseSeed(seed);
Parameter Structure - FOLLOW THE PHILOSOPHY :
To establish parameters that emerge naturally from the algorithmic philosophy, consider: "What qualities of this system can be adjusted?"
let params = {
seed: 12345, // Always include seed for reproducibility
// colors
// Add parameters that control YOUR algorithm:
// - Quantities (how many?)
// - Scales (how big? how fast?)
// - Probabilities (how likely?)
// - Ratios (what proportions?)
// - Angles (what direction?)
// - Thresholds (when does behavior change?)
};
To design effective parameters, focus on the properties the system needs to be tunable rather than thinking in terms of "pattern types".
Core Algorithm - EXPRESS THE PHILOSOPHY :
CRITICAL : The algorithmic philosophy should dictate what to build.
To express the philosophy through code, avoid thinking "which pattern should I use?" and instead think "how to express this philosophy through code?"
If the philosophy is about organic emergence , consider using:
If the philosophy is about mathematical beauty , consider using:
If the philosophy is about controlled chaos , consider using:
The algorithm flows from the philosophy, not from a menu of options.
To guide the implementation, let the conceptual essence inform creative and original choices. Build something that expresses the vision for this particular request.
Canvas Setup : Standard p5.js structure:
function setup() {
createCanvas(1200, 1200);
// Initialize your system
}
function draw() {
// Your generative algorithm
// Can be static (noLoop) or animated
}
CRITICAL : To achieve mastery, create algorithms that feel like they emerged through countless iterations by a master generative artist. Tune every parameter carefully. Ensure every pattern emerges with purpose. This is NOT random noise - this is CONTROLLED CHAOS refined through deep expertise.
Output:
templates/viewer.html (see STEP 0 and next section)The HTML artifact contains everything: p5.js (from CDN), the algorithm, parameter controls, and UI - all in one file that works immediately in claude.ai artifacts or any browser. Start from the template file, not from scratch.
REMINDER:templates/viewer.html should have already been read (see STEP 0). Use that file as the starting point.
To allow exploration of the generative art, create a single, self-contained HTML artifact. Ensure this artifact works immediately in claude.ai or any browser - no setup required. Embed everything inline.
The templates/viewer.html file is the foundation. It contains the exact structure and styling needed.
FIXED (always include exactly as shown):
VARIABLE (customize for each artwork):
Every artwork should have unique parameters and algorithm! The fixed parts provide consistent UX - everything else expresses the unique vision.
1. Parameter Controls
2. Seed Navigation
3. Single Artifact Structure
<!DOCTYPE html>
<html>
<head>
<!-- p5.js from CDN - always available -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
<style>
/* All styling inline - clean, minimal */
/* Canvas on top, controls below */
</style>
</head>
<body>
<div id="canvas-container"></div>
<div id="controls">
<!-- All parameter controls -->
</div>
<script>
// ALL p5.js code inline here
// Parameter objects, classes, functions
// setup() and draw()
// UI handlers
// Everything self-contained
</script>
</body>
</html>
CRITICAL : This is a single artifact. No external files, no imports (except p5.js CDN). Everything inline.
4. Implementation Details - BUILD THE SIDEBAR
The sidebar structure:
1. Seed (FIXED) - Always include exactly as shown:
2. Parameters (VARIABLE) - Create controls for the art:
<div class="control-group">
<label>Parameter Name</label>
<input type="range" id="param" min="..." max="..." step="..." value="..." oninput="updateParam('param', this.value)">
<span class="value-display" id="param-value">...</span>
</div>
Add as many control-group divs as there are parameters.
3. Colors (OPTIONAL/VARIABLE) - Include if the art needs adjustable colors:
4. Actions (FIXED) - Always include exactly as shown:
Requirements :
The HTML artifact works immediately:
The artifact includes seed navigation by default (prev/next/random buttons), allowing users to explore variations without creating multiple files. If the user wants specific variations highlighted:
This is like creating a series of prints from the same plate - the algorithm is consistent, but each seed reveals different facets of its potential. The interactive nature means users discover their own favorites by exploring the seed space.
User request → Algorithmic philosophy → Implementation
Each request is unique. The process involves:
The constants :
Everything else is variable :
To achieve the best results, trust creativity and let the philosophy guide the implementation.
This skill includes helpful templates and documentation:
templates/viewer.html : REQUIRED STARTING POINT for all HTML artifacts.
templates/generator_template.js : Reference for p5.js best practices and code structure principles.
Critical reminder :
Weekly Installs
1
Repository
GitHub Stars
1
First Seen
1 day ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
39,800 周安装