ワンクリックでManusで任意のスキルを実行

始める

p5js

スター3

フォーク0

更新日2026年4月9日 21:16

Create interactive generative art and visualizations using p5.js with 2D/3D rendering, particles, and shaders.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

nitzzzu

nitzzzu/Erebus

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

p5.js Generative Art

Use this skill to create interactive visual art and creative coding projects with p5.js.

When to Use

User wants generative art or creative coding
User needs interactive visualizations
User wants particle systems or visual effects
User asks for creative web-based animations

Template

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
</head>
<body>
<script>
function setup() {
  createCanvas(800, 600);
  background(20);
}

function draw() {
  // Your generative art code here
}
</script>
</body>
</html>

Techniques

Noise Fields: Use noise() for organic patterns
Particle Systems: Arrays of moving objects with physics
Fractals: Recursive geometric patterns
Audio Reactive: Use p5.sound for music visualization
3D: Use WEBGL mode for 3D rendering
Shaders: Custom GLSL fragment shaders

Process

Concept: Define the visual idea
Scaffold: Create HTML + p5.js setup
Implement: Write the generative algorithm
Tune: Adjust parameters for visual quality
Save: Write to an HTML file the user can open

このリポジトリの他の Skills

同じリポジトリ

pentest

nitzzzu/Erebus

Penetration testing tools for the CodeAgent — network scanning, service enumeration, and vulnerability checks

2026-04-183

obsidian-local

nitzzzu/Erebus

Obsidian Local REST API tools for the CodeAgent — manage vault notes, search, and metadata

2026-04-183

frida-analyzer

nitzzzu/Erebus

Frida dynamic instrumentation tools for the CodeAgent — mobile app analysis and SSL unpinning

2026-04-183

duckdb-analytics

nitzzzu/Erebus

DuckDB in-process analytics tools for the CodeAgent — SQL on CSV/Parquet/JSON without a server

2026-04-183

supabase

nitzzzu/Erebus

Supabase client tools for the CodeAgent — database CRUD, auth, storage, and edge functions

2026-04-183

osint-recon

nitzzzu/Erebus

OSINT reconnaissance tools for the CodeAgent — domain, IP, email, and social media intelligence

2026-04-183

name	p5js
description	Create interactive generative art and visualizations using p5.js with 2D/3D rendering, particles, and shaders.
metadata	{"version":"1.0.0","author":"erebus","tags":["creative","generative-art","p5js","interactive","visualization"]}

p5.js Generative Art

Use this skill to create interactive visual art and creative coding projects with p5.js.

When to Use

User wants generative art or creative coding
User needs interactive visualizations
User wants particle systems or visual effects
User asks for creative web-based animations

Template

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
</head>
<body>
<script>
function setup() {
  createCanvas(800, 600);
  background(20);
}

function draw() {
  // Your generative art code here
}
</script>
</body>
</html>

Techniques

Noise Fields: Use noise() for organic patterns
Particle Systems: Arrays of moving objects with physics
Fractals: Recursive geometric patterns
Audio Reactive: Use p5.sound for music visualization
3D: Use WEBGL mode for 3D rendering
Shaders: Custom GLSL fragment shaders

Process

Concept: Define the visual idea
Scaffold: Create HTML + p5.js setup
Implement: Write the generative algorithm
Tune: Adjust parameters for visual quality
Save: Write to an HTML file the user can open