Menu
Create generative visual art and interactive sketches using p5.js, rendered as self-contained HTML files
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/taracodlabs/aiden --skill p5jsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
Based on SOC occupation classification
| name | p5js |
| description | Create generative visual art and interactive sketches using p5.js, rendered as self-contained HTML files |
| category | creative |
| version | 1.0.0 |
| origin | aiden |
| license | Apache-2.0 |
| tags | p5js, generative-art, creative-coding, canvas, animation, visualization, javascript, interactive |
Create generative visual art, animations, and interactive sketches using p5.js. Output is a self-contained HTML file that opens in any browser — no build step required.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>p5.js Sketch</title>
<style>body { margin: 0; background: #0d1117; overflow: hidden; }</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
</head>
<body>
<script>
// Your p5.js sketch code goes here
function setup() {
createCanvas(windowWidth, windowHeight);
background(13, 17, 23);
}
function draw() {
// Called every frame (~60fps)
}
</script>
</body>
</html>
let particles = [];
function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB, 360, 100, 100, 100);
background(220, 30, 10);
for (let i = 0; i < 300; i++) {
particles.push({ x: random(width), y: random(height), hue: random(180, 280) });
}
}
function draw() {
fill(220, 30, 10, 8);
noStroke();
rect(0, 0, width, height);
for (let p of particles) {
let angle = noise(p.x * 0.003, p.y * 0.003) * TWO_PI * 4;
p.x += cos(angle) * 2;
p. += (angle) * ;
(p. < || p. > width || p. < || p. > height) {
p. = (width); p. = (height);
}
(p., , , );
();
(p., p.);
}
}
function setup() {
createCanvas(800, 600);
background(13, 17, 23);
stroke(100, 200, 120, 180);
translate(width / 2, height);
branch(120);
}
function branch(len) {
strokeWeight(map(len, 5, 120, 0.5, 4));
line(0, 0, 0, -len);
translate(0, -len);
if (len > 8) {
push(); rotate(0.4); branch(len * 0.67); pop();
push(); rotate(-0.4); branch(len * 0.67); pop();
}
}
let circles = [];
function setup() {
createCanvas(windowWidth, windowHeight);
for (let i = 0; i < 100; i++) {
circles.push({ x: random(width), y: random(height), vx: 0, vy: 0, r: random(5, 15) });
}
}
function draw() {
background(13, 17, 23, 25);
for (let c of circles) {
let dx = c.x - mouseX, dy = c.y - mouseY;
let dist = sqrt(dx*dx + dy*dy);
if (dist < 100) { c.vx += dx / dist * 2; c.vy += dy / dist * 2; }
c.vx *= 0.95; c.vy *= 0.95;
c.x = constrain(c.x + c.vx, 0, width);
c.y = (c. + c., , height);
(, , , ); ();
(c., c., c. * );
}
}
template = open("sketch_template.html").read()
sketch_code = """/* paste sketch code here */"""
html = template.replace("// Your p5.js sketch code goes here", sketch_code)
with open("my_sketch.html", "w") as f:
f.write(html)
print("Open my_sketch.html in a browser")
"Create a flowing particle animation with a dark background"
→ Use template from step 1, insert sketch code from step 2. Save as particles.html.
"Make an interactive sketch where particles run away from the mouse" → Use step 4 pasted into the template from step 1.
"Generate a fractal tree visualization" → Use step 3 inside the basic template. Adjust branch length and angle for different tree shapes.
p5.min.js locallywindowWidth/windowHeight resize the canvas to fill the browser window — add windowResized() handler for responsive sketches