メニュー
Creative coding and visual animations using the p5.js library. Use this skill when the user wants to create interactive visuals, generative art, or custom animations in a web environment.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Agent-to-User Interface (A2UI) protocol implementation and client renderer scaffolding.
Infrastructure automation, configuration management, and application deployment orchestration using Ansible.
Create and manage unicode braille animations and spinners for CLIs and web apps. Use this skill when the user wants to add loading indicators, progress animations, or custom braille-based art to their terminal or browser-based application.
Agent harness for headlessly deploying Code Scaffold assets.
High-performance code intelligence MCP server. Indexes codebases into a persistent knowledge graph — average repo in milliseconds.
Comprehensive cybersecurity arsenal integrating MITRE and NIST framework methodologies, NVIDIA SkillSpector vulnerability scanning, and deep SAST secret detection.
| name | p5js |
| description | Creative coding and visual animations using the p5.js library. Use this skill when the user wants to create interactive visuals, generative art, or custom animations in a web environment. |
This skill provides a foundation for creating creative coding projects with p5.js.
Scaffold the project:
This skill provides an index.html and sketch.js in the assets/ directory.
index.html: Boilerplate that loads p5.js and p5.sound from CDN.sketch.js: Basic interaction example with setup() and draw().Run the sketch:
Simply open index.html in a web browser. No server is required for basic sketches, but using a local server (like live-server) is recommended for advanced projects.
A p5.js project typically consists of:
setup(): Runs once. Define createCanvas() here.draw(): Runs 60 times per second. Update your visual state here.function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(mouseX, mouseY, 50, 50);
}