ソース情報
- リポジトリ
- taracodlabs/aiden
- ソースの最終更新活動
- 2026年5月6日 12:31
- 検出された SKILL.md の言語
- 英語
- スター
- 779
- フォーク
- 140
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
メニュー
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/taracodlabs/aiden --skill p5jsコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | p5js |
| description | Generative visual art and sketches in p5.js (self-contained HTML) |
| category | creative |
| version | 1.0.0 |
| origin | aiden |
| license | Apache-2.0 |
| tags | p5js, generative-art, creative-coding, canvas, animation, visualization, javascript, interactive |
Create generative visual art, animations, and interactive sketches using p5.js. Output is a self-contained HTML file that opens in any browser — no build step required.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>p5.js Sketch</title>
<style>body { margin: 0; background: #0d1117; overflow: hidden; }</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
</head>
<body>
<script>
// Your p5.js sketch code goes here
function setup() {
createCanvas(windowWidth, windowHeight);
background(13, 17, 23);
}
function draw() {
// Called every frame (~60fps)
}
</script>
</body>
</html>
let particles = [];
function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB, 360, 100, 100, 100);
background(220, 30, 10);
for (let i = 0; i < 300; i++) {
particles.push({ x: random(width), y: random(height), hue: random(180, 280) });
}
}
function draw() {
fill(220, 30, 10, 8);
noStroke();
rect(0, 0, width, height);
for (let p of particles) {
let angle = noise(p.x * 0.003, p.y * 0.003) * TWO_PI * 4;
p.x += cos(angle) * 2;
p. += (angle) * ;
(p. < || p. > width || p. < || p. > height) {
p. = (width); p. = (height);
}
(p., , , );
();
(p., p.);
}
}
function setup() {
createCanvas(800, 600);
background(13, 17, 23);
stroke(100, 200, 120, 180);
translate(width / 2, height);
branch(120);
}
function branch(len) {
strokeWeight(map(len, 5, 120, 0.5, 4));
line(0, 0, 0, -len);
translate(0, -len);
if (len > 8) {
push(); rotate(0.4); branch(len * 0.67); pop();
push(); rotate(-0.4); branch(len * 0.67); pop();
}
}
let circles = [];
function setup() {
createCanvas(windowWidth, windowHeight);
for (let i = 0; i < 100; i++) {
circles.push({ x: random(width), y: random(height), vx: 0, vy: 0, r: random(5, 15) });
}
}
function draw() {
background(13, 17, 23, 25);
for (let c of circles) {
let dx = c.x - mouseX, dy = c.y - mouseY;
let dist = sqrt(dx*dx + dy*dy);
if (dist < 100) { c.vx += dx / dist * 2; c.vy += dy / dist * 2; }
c.vx *= 0.95; c.vy *= 0.95;
c.x = constrain(c.x + c.vx, 0, width);
c.y = (c. + c., , height);
(, , , ); ();
(c., c., c. * );
}
}
template = open("sketch_template.html").read()
sketch_code = """/* paste sketch code here */"""
html = template.replace("// Your p5.js sketch code goes here", sketch_code)
with open("my_sketch.html", "w") as f:
f.write(html)
print("Open my_sketch.html in a browser")
"Create a flowing particle animation with a dark background"
→ Use template from step 1, insert sketch code from step 2. Save as particles.html.
"Make an interactive sketch where particles run away from the mouse" → Use step 4 pasted into the template from step 1.
"Generate a fractal tree visualization" → Use step 3 inside the basic template. Adjust branch length and angle for different tree shapes.
p5.min.js locallywindowWidth/windowHeight resize the canvas to fill the browser window — add windowResized() handler for responsive sketches