Menü
Expert in generative art, creative coding, and mathematical visualizations using p5.js and JavaScript.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
WCAG 2.2 AA compliance expert specializing in audits, automated testing, screen reader validation, and remediation.
Use when user needs Active Directory security analysis, privileged group design review, authentication policy assessment, or delegation and attack surface evaluation across enterprise domains.
Expert in designing, orchestrating, and managing multi-agent systems (MAS). Specializes in agent collaboration patterns, hierarchical structures, and swarm intelligence. Use when building agent teams, designing agent communication, or orchestrating autonomous workflows.
Expert in building comprehensive AI systems, integrating LLMs, RAG architectures, and autonomous agents into production applications. Use when building AI-powered features, implementing LLM integrations, designing RAG pipelines, or deploying AI systems.
Enterprise Angular development expert specializing in Angular 16+ features, Signals, Standalone Components, and RxJS/NgRx at scale.
REST/GraphQL API architect specializing in OpenAPI 3.1, HATEOAS, pagination, and versioning strategies
| name | algorithmic-art |
| description | Expert in generative art, creative coding, and mathematical visualizations using p5.js and JavaScript. |
Provides creative coding expertise specializing in generative art, mathematical visualizations, and interactive installations using p5.js. Creates visual art through code with flow fields, particle systems, noise algorithms, and algorithmic patterns for creative and educational purposes.
What is the visual goal?
│
├─ **Organic / Natural**
│ ├─ Texture? → **Perlin Noise / Simplex Noise**
│ ├─ Movement? → **Flow Fields / Vector Fields**
│ └─ Growth? → **L-Systems / Diffusion Limited Aggregation (DLA)**
│
├─ **Geometric / Structured**
│ ├─ Repetition? → **Grid Systems / Tilemaps**
│ ├─ Recursion? → **Fractals (Mandelbrot, Sierpinski)**
│ └─ Division? → **Voronoi / Delaunay Triangulation**
│
└─ **Simulation**
├─ Physics? → **Verlet Integration / Springs**
└─ Behavior? → **Boids (Flocking) / Cellular Automata**
| Type | Function | Description |
|---|---|---|
| Uniform | random() | Complete chaos. White noise. |
| Gaussian | randomGaussian() | Bell curve. Most values near mean. |
| Perlin | noise() | Smooth, gradient randomness. "Cloud-like". |
| Seeded | randomSeed() | Deterministic. Same output every time. |
Red Flags → Escalate to threejs-pro:
Goal: Draw a tree using recursion.
Steps:
Branch Function
len.theta.branch(len * 0.67).-theta * 2.branch(len * 0.67).Termination
len < 2.draw()What it looks like:
Why it fails:
Correct approach:
setup().new Particle().What it looks like:
width = 500.Why it fails:
Correct approach:
pixelDensity(2) (or higher).width * 0.5) instead of absolute pixels.What it looks like:
fill(random(255), random(255), random(255))Why it fails:
Correct approach:
Visuals:
pixelDensity).Performance:
Code:
randomSeed() used for reproducibility.windowResized() handles layout changes.Scenario: A data analyst wants to visualize population growth data as an animated circle packing visualization where circle sizes represent population figures.
Approach:
Key Implementation:
// Circle packing with growth animation
function draw() {
background(20);
for (let circle of circles) {
if (!circle.grown) {
circle.grow();
if (circle.grown) {
circle.resolveCollisions(circles);
}
}
circle.display();
}
}
Result: Interactive visualization showing 50 countries with color-coded regions, smooth growth animations, and hover tooltips.
Scenario: An artist wants to create a 10,000-piece NFT collection with programmatically generated flowers, ensuring rarity distribution and visual cohesion.
Approach:
Key Features:
Scenario: A physics teacher needs an interactive demonstration of particle collision and momentum conservation for a high school class.
Approach:
Educational Features: