skills.rest
aivos-xie
aivos-xieCOMMUNITY
Explore all skills by this author →
GitHub

p5js

Generate interactive and generative visual art with p5.js.

1|Updated Jun 9, 2026
Search Tags:#generative art#data visualization#interactive#3D graphics#p5js#audio reactive
One-click install
npx skills add https://github.com/aivos-xie/hermes-skills --skill p5js-aivos-xie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: p5js
Source: https://github.com/aivos-xie/hermes-skills/tree/main/creative/p5js
Command: npx skills add https://github.com/aivos-xie/hermes-skills --skill p5js-aivos-xie

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a production pipeline for creating interactive and generative visual art using the p5.js library, enabling users to create browser-based visual art from text prompts.

Core Features & Use Cases

  • Generative Art: Create procedural visual compositions based on seed values and parameters.
  • Data Visualization: Generate interactive charts and custom data displays from datasets.
  • Interactive Experiences: Build mouse/keyboard/touch-driven sketches.
  • Animation/Motion Graphics: Create timed sequences, kinetic typography, and transitions.
  • 3D Scenes: Design WebGL geometry, lighting, and shaders for 3D scenes.
  • Image Processing: Manipulate images, apply filters, and create pointillism effects.
  • Audio-Responsive: Create visuals that react to audio input.
  • Export Formats: Export as HTML, PNG, GIF, MP4, or SVG.

Quick Start

Use the p5js skill to create a generative art piece with the following parameters: seed=123, mode=generative_art, parameters=color=blue, size=500.

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 from text prompts?▼

You can create generative art from text prompts by using the p5.js library to render procedural visual compositions. This pipeline translates your text parameters, such as seed values and colors, into browser-based canvas sketches.

Can I build interactive data visualizations with p5.js?▼

Yes, you can build interactive data visualizations with p5.js. The library allows you to generate interactive charts and custom data displays driven by mouse, keyboard, or touch inputs directly within a browser canvas.

Does p5.js support 3D graphics and WebGL rendering?▼

Yes, p5.js supports 3D graphics and WebGL rendering. You can design WebGL geometry, apply custom lighting, and write shaders to build interactive 3D scenes and complex motion graphics.

How do I make audio reactive visuals in a browser canvas?▼

You can make audio reactive visuals in a browser canvas by using p5.js to process audio input and drive visual parameters. This allows your generative art and motion graphics to dynamically respond to sound.

What export formats are available for p5.js sketches?▼

Available export formats for p5.js sketches include HTML, PNG, GIF, MP4, and SVG. This allows you to save your interactive experiences and generative art as static images, animations, or vector files.

Do I need to install p5.js to generate canvas-based visual content?▼

You need the p5.js library available to generate canvas-based visual content, as this Skill requires p5 to render. The pipeline handles the script generation and parameter customization, relying on p5.js for the actual browser rendering.

Related Skills

Explore More Design & Creative Skills→
FlyFireFFlyFireF

p5js

Create interactive and generative art with p5.js in the browser.

Community
Advanced
afel6afel6

p5js

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

Community
Advanced
Tommy-ywTommy-yw
539

p5js

Create interactive and generative visual art with p5.js.

Community
Advanced
JoaquinCampoJoaquinCampo
3

algorithmic-art

Create seedable interactive generative art with p5.js.

Community
Advanced