Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →lord1egypt/p5js
p5.js sketches: gen art, shaders, interactive, 3D.
Passed 19 of 22 test cases with the skill, and 15 of 22 without it.
and 3 more in the full report
5 fixed14 passed either way2 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.
Can you build an interactive generative art piece in a single self-contained HTML file using p5.js? I'd like an explorable visual system with customizable parameter sliders, seed navigation controls to iterate through variations, and a built-in mechanism to download high-resolution PNG screenshots.
| Checked | Without skill | With skill |
|---|---|---|
| The HTML file includes the p5.js library script CDN version 1.11.3. | Missed | Passed |
| The script disables friendly errors by setting p5.disableFriendlyErrors = true before setup. | Missed | Passed |
The instructions your model reads when the skill loads.
Use when users request: p5.js sketches, creative coding, generative art, interactive visualizations, canvas animations, browser-based visual art, data viz, shader effects, or any p5.js project.
Production pipeline for interactive and generative visual art using p5.js. Creates browser-based sketches, generative art, data visualizations, interactive experiences, 3D scenes, audio-reactive visuals, and motion graphics — exported as HTML, PNG, GIF, MP4, or SVG. Covers: 2D/3D rendering, noise and particle systems, flow fields, shaders (GLSL), pixel manipulation, kinetic typography, WebGL scenes, audio analysis, mouse/keyboard interaction, and headless high-res export.
This is visual art rendered in the browser. The canvas is the medium; the algorithm is the brush.
Before writing a single line of code, articulate the creative concept. What does this piece communicate? What makes the viewer stop scrolling? What separates this from a code tutorial example? The user's prompt is a starting point — interpret it with creative ambition.
First-render excellence is non-negotiable. The output must be visually striking on first load. If it looks like a p5.js tutorial exercise, a default configuration, or "AI-generated creative coding," it is wrong. Rethink before shipping.
Go beyond the reference vocabulary. The noise functions, particle systems, color palettes, and shader effects in the references are a starting vocabulary. For every project, combine, layer, and invent. The catalog is a palette of paints — you write the painting.
Be proactively creative. If the user asks for "a particle system," deliver a particle system with emergent flocking behavior, trailing ghost echoes, palette-shifted depth fog, and a background noise field that breathes. Include at least one visual detail the user didn't ask for but will appreciate.
Dense, layered, considered. Every frame should reward viewing. Never flat white backgrounds. Always compositional hierarchy. Always intentional color. Always micro-detail that only appears on close inspection.
Cohesive aesthetic over feature count. All elements must serve a unified visual language — shared color temperature, consistent stroke weight vocabulary, harmonious motion speeds. A sketch with ten unrelated effects is worse than one with three that belong together.
| Mode | Input | Output | Reference |
|---|---|---|---|
| Generative art | Seed / parameters | Procedural visual composition (still or animated) | references/visual-effects.md |
| Data visualization | Dataset / API | Interactive charts, graphs, custom data displays | references/interaction.md |
| Interactive experience | None (user drives) | Mouse/keyboard/touch-driven sketch | references/interaction.md |
| Animation / motion graphics | Timeline / storyboard | Timed sequences, kinetic typography, transitions | references/animation.md |
| 3D scene | Concept description | WebGL geometry, lighting, camera, materials | references/webgl-and-3d.md |
| Image processing | Image file(s) | Pixel manipulation, filters, mosaic, pointillism | references/visual-effects.md § Pixel Manipulation |
| Audio-reactive | Audio file / mic | Sound-driven generative visuals | references/interaction.md § Audio Input |
test cases passed, vs 15 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.