p5.js

Creative-coding sketchbook for artists, learners and generative art.

LGPL-2.1 · ★ 24.1k · 13 clips

Website GitHub24.1k Showcase

p5.js clips13

Filter in Explore

Frame from “@other__reality” by @other__reality

2:36

@other__realityby @other__realityp5.js

0:40

@ring_hyacinth 中秋拼贴短片by @ring_hyacinthp5.js

0:56

@DotCSVby @DotCSVp5.js

0:47

An Imagined Short-Video Feedby @pleometricPromptp5.js

0:39

@NFT_Chen 中秋剪纸拼贴by @NFT_Chenp5.js

2:36

AI singularity P(doom) animated music videoby @xiaohup5.js

1:04

ClaudeAnimationBase starter kit showcaseby @GoSailGlobalp5.js

2:37

Code-drawn animation pipeline demoby @p2ecoin91p5.js

Brush-painted short film about hidden emotionsby @yumaerielPromptp5.js

Persona 5-Style Hefei Promotional Motion Graphics Video with Claude Opus 5.5by @threeausPromptp5.js

2:40

@NoFollowers2023 Bellard MVby @NoFollowers2023p5.js

2:09

One Prompt: A p5.js Music Videoby @ppop123p5.js

1:26

Pop-punk anime music video for a dev songby @makevoidPromptp5.js

How people build with p5.js

Works where the prompt, the code or the video is public. Videos load from the creator's own host when you press play.

Music Film About Functional Emotions

by eudaemonea · CC-BY-4.0, CC0-1.0, MIT, NOASSERTION, none · AI-made

Music Film About Functional Emotions — generated with claude-opus-5.5; public prompt, source, render.

Prompt

I think it'd be pretty awesome to make a real music video for it… make the actual frames and draw the video in js. or, whatever it is you want. what I don't want you to do is look at our earlier attempts… go all out, and do you to the fullest.

the lyrics are not the main thing. we want to create a real music video. p5 brushstrokes. interesting scenes. great timing and animation and story. not a fancy lyric video.

one area I'll push you on is timing, and not letting the scene sit too still for too long,

Code ↗Source page ↗

@other__reality

by other__reality · CC-BY-4.0, CC0-1.0, MIT, NOASSERTION, NOASSERTION, none · AI-made

@other__reality — generated with claude-opus-5.5; public source, render.

Code ↗Source page ↗

An Imagined Short-Video Feed

by pleometric · CC-BY-4.0, CC0-1.0, MIT, NOASSERTION, none · AI-made

An Imagined Short-Video Feed — generated with claude-opus-5.5; public prompt, render.

Prompt

I asked Opus 5.5 to make an animation of what its TikTok feed looked like 👇

Source page ↗

Pop-punk anime music video for a dev song

by makevoid · CC-BY-4.0, MIT · AI-made

Pop-punk anime music video for a dev song — generated with claude-opus-5.5; public prompt, render.

Prompt ↗Source page ↗

About p5.jsagents, rendering, runtime

With agents: No official AI resources; LLMs write sketches readily thanks to the large public corpus of p5 code.
Render path: saveGif()/saveFrames() in-browser, or capture frames headlessly and encode with FFmpeg.
Runtime: JavaScript (Canvas/WebGL)
Best for: generative art · music visualisers · hand-drawn style shorts · education

Worth knowing

LGPL-2.1, ~24.1k stars, Processing Foundation source ↗

For the p5.js team

Featured on 24fps

This page is free and always will be. If it helps your users, drop the badge on your showcase or README.

<a href="https://24fps.dev/tools/p5js"><img src="https://24fps.dev/badge/p5js.svg" alt="Featured on 24fps" height="28"></a>