p5js

Generate p5.js sketches for interactive art and export as PNG, GIF, MP4, or SVG.

247|22|Updated Dec 11, 2024
One-click install
npx skills add https://github.com/graniet/kheish --skill p5js-graniet
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/graniet/kheish/tree/main/skills/creative/p5js
Command: npx skills add https://github.com/graniet/kheish --skill p5js-graniet

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill eliminates the complexity of hand-coding p5.js sketches for generative art and interactive visualizations. It provides a complete production pipeline—from creative concept and code generation to preview, export, and quality verification—so artists and developers can focus on aesthetic decisions rather than debugging canvas setup or export workflows.

Core Features & Use Cases

  • Generative Art & Creative Coding: Produces browser-based sketches with noise fields, particle systems, flow fields, shaders, and kinetic typography using seeded randomness for reproducibility.
  • Data Visualization & Interactive Experiences: Builds custom interactive charts, audio-reactive visuals, 3D WebGL scenes, and motion graphics with mouse, keyboard, and touch interaction.
  • Professional Export Pipeline: Exports outputs as self-contained HTML, high-resolution PNG, GIF, MP4 video, or SVG with headless Puppeteer rendering and ffmpeg encoding.

Quick Start

Use the p5js skill to create a generative art piece depicting ocean waves at sunset and export it as a high-resolution PNG.

Frequently Asked Questions about p5js

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

FAQPage Schema
How do I generate generative art from a text prompt without writing p5.js code manually?

To generate generative art from a text prompt, this skill creates browser-based p5.js sketches using noise fields, particle systems, and shaders. It automates the code generation, preview, and multi-format export pipeline without manual coding.

Can I export p5.js motion graphics to high-resolution MP4 video and PNG?

Yes, you can export p5.js motion graphics to high-resolution MP4 video and PNG. The skill uses headless Puppeteer rendering and ffmpeg encoding to produce self-contained HTML, GIF, MP4, and SVG outputs.

Do I need Node.js and Puppeteer to create interactive data visualizations?

You do not need Node.js and Puppeteer to create interactive data visualizations, as a modern browser handles previewing. Node.js with Puppeteer and ffmpeg is only required for headless high-resolution video rendering.

What is the best way to build reproducible audio-reactive visuals and 3D WebGL scenes?

The best way to build reproducible audio-reactive visuals and 3D WebGL scenes is using seeded randomness in p5.js. This skill generates interactive sketches with consistent, reproducible outputs from defined parameters.

Does this approach support shader effects and kinetic typography for web visualization?

Yes, this approach supports shader effects and kinetic typography for web visualization. It produces browser-based interactive visual art and motion graphics that respond to mouse, keyboard, and touch interactions.