Generate p5.js generative art sketches and export them as HTML, PNG, GIF, MP4, or SVG.
npx skills add https://github.com/ChangZhou-xj/zxj_skill --skill p5js-changzhou-xj
Please help me install this Agent Skill. Skill: p5js Source: https://github.com/ChangZhou-xj/zxj_skill/tree/main/creative/p5js Command: npx skills add https://github.com/ChangZhou-xj/zxj_skill --skill p5js-changzhou-xj
p5.js sketches and generative visuals often require stitching together assets, code structure, and export steps. This Skill provides a production pipeline that unifies concept, design, coding, preview, and export for browser-based art, shaders, and interactive works.
Open the viewer HTML and adjust the sliders to generate and export your artwork.
High-intent search queries and answers about installing and using this skill.
You can export generative art as PNG, GIF, MP4, or SVG using a Puppeteer-based headless export workflow. This process enforces deterministic rendering and offscreen buffers to capture artwork directly from the HTML viewer, ensuring repeatable visual results.
The best way to structure p5.js projects for 3D scenes and shader effects is using a strict production pipeline: CONCEPT, DESIGN, CODE, PREVIEW, EXPORT, and VERIFY. This workflow unifies asset stitching and code structure within a single HTML file for reliable browser rendering.
Yes, Puppeteer works with p5.js for headless rendering and exporting animations. It drives the headless export workflow via the scripts folder, allowing you to capture deterministic frames and convert interactive webgl sketches into MP4 or GIF outputs automatically.
Yes, you can generate audio-reactive visuals and data visualizations in a single HTML file. The pipeline renders these interactive experiences directly in the browser, allowing you to adjust viewer sliders for real-time parameter tuning before exporting the final artwork.
Generative art exports look different from browser previews when deterministic rendering is not enforced. Using offscreen buffers and a strict VERIFY step in the production workflow ensures the headless export captures the exact visual state, preventing non-repeatable results.
zeronx798Generate interactive visual art with p5.js in browsers.
no-problem-devConvert SVG icon designs into Apple HIG-compliant 1024x1024 PNG icons.
whichguyCreate interactive and generative visual art with p5.js.
paxlabs-incGenerate interactive visual art with p5.js in self-contained HTML.
