一键在 Manus 中运行任何 Skill

开始使用

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 仓库查看创作者相关仓库

下载

在 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