skills.rest
gqf2008
gqf2008COMMUNITY
Explore all skills by this author →
Website𝕏@gqf25044395GitHub

p5js

Generate p5.js browser-based generative art and interactive visuals with HTML, PNG, GIF, MP4, or SVG export.

Updated Apr 19, 2026
Search Tags:#browser#headless#export#p5js#creative-coding#generative-art
One-click install
npx skills add https://github.com/gqf2008/hermez-ai --skill p5js-gqf2008
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/gqf2008/hermez-ai/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/gqf2008/hermez-ai --skill p5js-gqf2008

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a self-contained pipeline to generate browser-based, interactive art using p5.js, enabling artists and developers to go from concept to a ready-to-run HTML sketch without building toolchains.

Core Features & Use Cases

  • Self-contained HTML sketches that run in any modern browser via the p5.js CDN.
  • Supports multiple creative modes: Generative art, data visualization, interactive experiences, 3D scenes, particle systems, shader-like effects, and audio-reactive visuals.
  • Flexible export options: HTML, PNG, GIF, MP4, or SVG, with headless export for automated rendering.

Quick Start

Open a single HTML file in your browser and start iterating on a self-contained p5.js sketch.

Frequently Asked Questions about p5js

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create generative art with p5.js and export it as an HTML file?▼

You can create generative art with p5.js by building a self-contained HTML sketch that runs in any modern browser via the p5.js CDN. This Skill provides a pipeline to generate these interactive visuals and export them directly as HTML files for immediate playback.

Can I use Puppeteer for headless export of p5.js sketches to PNG or GIF?▼

Yes, you can use Puppeteer for headless export of p5.js sketches. This Skill supports automated rendering via Puppeteer, allowing you to export your browser-based generative art and interactive visuals as PNG, GIF, MP4, or SVG files without opening a browser window.

What types of creative coding visuals can I build with browser-based p5.js?▼

Browser-based p5.js supports multiple creative coding modes including generative art, data visualizations, interactive experiences, 3D scenes, particle systems, shader-like effects, and audio-reactive visuals. You can build all these within a self-contained HTML sketch.

Do I need to install any local toolchains to start running p5.js interactive experiences?▼

No, you do not need to build local toolchains to run p5.js interactive experiences. This Skill provides a self-contained pipeline that relies on the CDN-hosted p5.js library, allowing you to open a single HTML file in your browser and start iterating immediately.

Does this Skill support exporting data visualizations as SVG files?▼

Yes, this Skill supports exporting data visualizations as SVG files. Alongside HTML, PNG, GIF, and MP4 formats, you can export your browser-based p5.js sketches to SVG using the headless rendering pipeline powered by Puppeteer.

Related Skills

Explore More Design & Creative Skills→
LuminaVaultLuminaVault

p5js

Generate interactive and generative visual art with the p5.js library.

Official
Advanced
lengoctuong2005lengoctuong2005
5

p5js

Create interactive and generative visual art with p5.js.

Community
Advanced
whichguywhichguy

p5js

Create interactive and generative visual art with p5.js.

Community
Advanced
PiaoxuemoliPiaoxuemoli

pretext

Measure, layout, and render text using canvas without the DOM.

Community
Advanced