skills.rest
anilcan-kara
anilcan-karaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

p5js

Generate self-contained p5.js HTML sketches for interactive generative art.

Updated Jun 17, 2026
Search Tags:#browser#export#p5js#creative-coding#visual-art#generative#sketch
One-click install
npx skills add https://github.com/anilcan-kara/nozich-agent --skill p5js-anilcan-kara
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/anilcan-kara/nozich-agent/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/anilcan-kara/nozich-agent --skill p5js-anilcan-kara

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a ready-to-use pathway for artists and developers to create browser-based, self-contained p5.js sketches for interactive generative art, shaders, and data visualizations, reducing setup time and boilerplate.

Core Features & Use Cases

  • Generates single-file HTML pipelines that run directly in the browser with inline p5.js and optional references/scripts/assets support.
  • Supports modes for generative art, data visualization, interactive experiences, animation, 3D scenes, image processing, and audio-reactive visuals.
  • Works as a reusable production pipeline, enabling rapid iteration and export to HTML, PNG, GIF, MP4, or SVG as needed.

Quick Start

Open the generated HTML in a browser and start tweaking parameters to produce a self-contained sketch ready for export.

Frequently Asked Questions about p5js

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

FAQPage Schema
How do I generate a self-contained p5.js sketch for browser-based generative art?▼

Generate a single-file HTML pipeline with inline p5.js for browser-based generative art. The output runs directly in the browser with optional references, scripts, and assets support for reproducible workflows.

Can I create interactive data visualizations and 3D scenes with p5.js?▼

Yes, p5.js supports modes for interactive data visualizations, 3D scenes, animation, image processing, and audio-reactive visuals. The generated sketches are self-contained HTML files ready for browser interaction.

Do I need Puppeteer to run p5.js sketches in the browser?▼

Puppeteer is a dependency for the generation pipeline but is not required to run the output. The generated p5.js sketches are self-contained HTML files that run directly in any browser without additional setup.

What's the best way to export p5.js generative art to PNG, GIF, MP4, or SVG?▼

The skill works as a reusable production pipeline enabling rapid iteration and export to HTML, PNG, GIF, MP4, or SVG. Open the generated HTML in a browser and tweak parameters to produce a sketch ready for export.

Does p5.js support shader experiments and audio-reactive visuals?▼

Yes, p5.js supports shader experiments and audio-reactive visuals alongside generative art and data visualization. The skill generates browser-ready, self-contained sketches covering these interactive visual modes.

How do I include external scripts and assets in a p5.js sketch?▼

The generated single-file HTML pipeline supports optional references, scripts, and assets. This ensures reproducible workflows by bundling external dependencies directly into the self-contained p5.js sketch.

Related Skills

Explore More Design & Creative Skills→
Strategic-AutomationStrategic-Automation
6

p5js

Create and export p5.js generative art sketches to HTML, PNG, GIF, MP4, and SVG.

Official
Advanced
afel6afel6

p5js

Create self-contained p5.js sketches with deterministic headless export.

Community
Advanced
quiznatquiznat

p5js

Automate p5.js generative art sketch creation and export to HTML, PNG, GIF, MP4, and SVG.

Community
Advanced
HuskyDannyHuskyDanny

p5js

Generate interactive and generative visual art with p5.js.

Community
Advanced