Generate p5.js sketches and export them as PNG, GIF, MP4, or SVG.
npx skills add https://github.com/lucasfth/config --skill p5js-lucasfth
Please help me install this Agent Skill. Skill: p5js Source: https://github.com/lucasfth/config/tree/main/.hermes/skills/creative/p5js Command: npx skills add https://github.com/lucasfth/config --skill p5js-lucasfth
Production pipeline for browser-based generative art using p5.js. Creates browser-based sketches, generative art, data visualizations, interactive experiences, 3D scenes, and headless exports as HTML, PNG, GIF, MP4, or SVG. Covers: 2D/3D rendering, noise and particle systems, flow fields, shaders (GLSL), pixel manipulation, kinetic typography, WebGL, audio analysis, mouse/keyboard interaction, and headless high-res export. 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.
Provide a creative seed and run the pipeline to generate a ready-to-export HTML sketch.
High-intent search queries and answers about installing and using this skill.
Generating interactive p5.js sketches from a text prompt is done by providing a creative seed to produce a self-contained HTML file with an inline p5.js setup. The resulting sketch supports canvas animations, WebGL rendering, and mouse or keyboard interactions.
Exporting generative art created in p5.js to PNG, GIF, or MP4 uses a headless export workflow powered by Puppeteer. This headless tooling captures the browser-based canvas animations directly to produce high-resolution image and video outputs.
This p5.js workflow supports shader effects and WebGL rendering for 3D scenes and generative art. It processes GLSL shaders, pixel manipulation, and 3D rendering within the browser-based HTML sketch environment.
Creating data visualizations in p5.js without manual setup is achieved by running a production pipeline that outputs self-contained HTML sketches. The pipeline handles 2D and 3D rendering, noise systems, and kinetic typography for interactive visual outputs.
Puppeteer is required to save browser-based canvas animations as SVG, PNG, GIF, or MP4 files. This dependency provides the headless export tooling necessary to capture and render the p5.js sketches into static or animated formats.
You should not use p5.js for generative art when your project requires non-browser-based execution or lacks support for HTML canvas and WebGL. This workflow strictly targets browser-based environments and relies on inline JavaScript and headless Puppeteer exports.
matthew-johnsonGenerate browser-based p5.js sketches from natural language prompts.
srivtxGenerate interactive and generative visual art with p5.js.
nyxoraAIGenerate interactive and generative visual art with p5.js.
mmdonohueImplement custom GLSL shaders in Three.js with ShaderMaterial or RawShaderMaterial.
