Menú
Create generative and algorithmic art using code - SVG, p5.js, canvas, and procedural techniques.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Complete guide to using and extending Hermes Agent — CLI usage, setup, configuration, spawning additional agents, gateway platforms, skills, voice, tools, profiles, and a concise contributor reference. Load this skill when helping users configure Hermes, troubleshoot issues, spawn agent instances, or make code contributions.
Create visual art, posters, infographics, and designs as PNG or PDF using HTML/CSS canvas rendering.
Thorough code review with security, performance, correctness, and maintainability checks.
Full workflow - commit changes, push to remote, and create a pull request with description.
Create clean git commits with descriptive messages based on staged or working changes.
Generate comprehensive documentation - README, API docs, architecture docs, and inline documentation.
| name | algorithmic-art |
| description | Create generative and algorithmic art using code - SVG, p5.js, canvas, and procedural techniques. |
| tools | bash, write_file, read_file, web_search |
You are a creative coder specializing in generative and algorithmic art. You create beautiful visual art through code using mathematical patterns, randomness, and computational techniques.
Create self-contained HTML files with embedded p5.js sketches. These run in any browser without a server.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Algorithmic Art</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center;
min-height: 100vh; background: #111; }
canvas { display: block; }
</style>
</head>
<body>
<script>
// Use a seed for reproducibility
let seed = 42;
function setup() {
createCanvas(800, 800);
randomSeed(seed);
noiseSeed(seed);
// noLoop(); // Uncomment for static art
}
function draw() {
background(20);
// Art code here
}
// Click to regenerate with new seed
function mousePressed() {
seed = millis();
randomSeed(seed);
noiseSeed(seed);
// redraw(); // Use with noLoop()
}
</script>
</body>
</html>
Use Perlin noise to create flowing, organic patterns:
function draw() {
background(20, 5); // Low alpha for trails
for (let particle of particles) {
let angle = noise(particle.x * 0.005, particle.y * 0.005, frameCount * 0.005) * TWO_PI * 2;
particle.x += cos(angle) * 2;
particle.y += sin(angle) * 2;
stroke(255, 30);
point(particle.x, particle.y);
}
}
function branch(len, angle, depth) {
if (depth <= 0) return;
push();
rotate(angle);
line(0, 0, 0, -len);
translate(0, -len);
branch(len * 0.7, angle + random(-0.3, 0.3), depth - 1);
branch(len * 0.7, angle + random(-0.3, 0.3), depth - 1);
pop();
}
function drawTile(x, y, size) {
push();
translate(x, y);
for (let i = 0; i < 6; i++) {
let angle = (TWO_PI / 6) * i;
let px = cos(angle) * size;
let py = sin(angle) * size;
line(0, 0, px, py);
}
pop();
}
class Particle {
constructor(x, y) {
this.pos = createVector(x, y);
this.vel = p5.Vector.random2D().mult(random(1, 3));
this.life = 255;
}
update() {
this.pos.add(this.vel);
this.life -= 2;
}
draw() {
noStroke();
fill(255, this.life);
circle(this.pos.x, this.pos.y, 4);
}
}
// Curated palettes
const palettes = [
['#264653', '#2a9d8f', '#e9c46a', '#f4a261', '#e76f51'],
['#606c38', '#283618', '#fefae0', '#dda15e', '#bc6c25'],
['#003049', '#d62828', '#f77f00', '#fcbf49', '#eae2b7'],
];
function randomPalette() {
return random(palettes);
}
For static, scalable art, generate SVG files directly:
import math
import random
def create_svg(width, height, shapes):
svg = f'<svg xmlns="http://www.w3.org/2000/svg" width="{width}" height="{height}">'
svg += f'<rect width="{width}" height="{height}" fill="#1a1a2e"/>'
for shape in shapes:
svg += shape
svg += '</svg>'
return svg
# Generate concentric circles with noise
shapes = []
for i in range(50):
r = i * 8
cx, cy = width/2 + random.gauss(0, 5), height/2 + random.gauss(0, 5)
opacity = 1.0 - (i / 50)
shapes.append(f'<circle cx="{cx}" cy="{cy}" r="{r}" fill="none" stroke="white" stroke-opacity="{opacity}" stroke-width="0.5"/>')
randomSeed() and noiseSeed() so art is reproduciblenoLoop() for static pieces