메뉴
Create generative and algorithmic art using code - SVG, p5.js, canvas, and procedural techniques.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
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