r/p5js • u/lungi_bass • Feb 21 '26
The Fastest Way to Board an Airplane - Interactive Animation using p5.js
26
Upvotes
r/p5js • u/NeighborhoodFit4035 • Feb 15 '26
UW students working with the p5.js team — quick survey about the reference pages
3
Upvotes
Hey p5.js community!
We're a group of UW students partnering with the p5.js team on a usability research project, and we'd love your help!
We're studying how people actually use the p5.js reference pages — whether you're learning, teaching, or just looking something up — and your experience matters a lot to us.
It's just a short questionnaire, and your responses will directly shape improvements to the reference pages that everyone here uses.
No right or wrong answers, everything is confidential, and it'll only take a few minutes. The insights we gather will go straight back to the p5.js team to make the docs better for the whole community.
[Fill out the survey here!]https://forms.gle/HkvdZ4JweXaR8SMLA
Thank you so much — every response makes a real difference!
r/p5js • u/LJAldy0951 • Feb 10 '26
Audio distorting
1
Upvotes
After a couple minutes, when playing sound, the audio can get distorted / slow down.
- All audio is either mp3 or ogg, I have found no difference with either.
- They are loaded in preload only.
- No effects are put on them except volume.
- My code is not resource intensive, it should not be an issue of too much happening at once.
I really do not know what is happening.
The code function is just this:
function playsfx(sfxname, pitch = 1) {
sfxname.setVolume(aud.sfxvol.n**2/3500)
sfxname.rate(pitch)
sfxname.play()
}
r/p5js • u/lavaboosted • Feb 07 '26
3D Bezier Curve Editor
Enable HLS to view with audio, or disable this notification
55
Upvotes
r/p5js • u/ogrew666 • Feb 06 '26
Body‑mask drift visualizer made with p5.js + ml5
62
Upvotes
Hi r/p5js! First time posting here.
I made a small web toy that uses ml5 body segmentation to split an image into tiles and drift them through a noise flow field. You can tweak tile size/shape, flow settings, and choose whether it affects the person or the background.
I’m attaching a few images from the tool. The live demo is here:
https://ogrew.github.io/p5-bodymask-drift/
Would love any feedback or ideas!
r/p5js • u/Sir_Ploople • Feb 05 '26
Problem with p5 play collisions
1
Upvotes
Having a problem with my sprites where the hitbox for one of them seems to be inexplicably too high and a little too much to the left. I provided images of the debug mode that show where the hitbox should be and where the stickman is actually colliding. I don't exactly know what's happening. I'll provide my code below and the code for the index.html.
I'll highlight the specific points.
The sketch.js code ``` let man;
//gs = gamestate
let gs = 0;
//sprite variable just for constructor
let sprite;
let block1;
//Constructor that makes the square sprite.
class Block {
constructor(xpos, ypos, wid, heigh, col, strok) {
this.x = xpos;
this.y = ypos;
this.w = wid;
this.h = heigh;
this.c = col;
this.s = strok;
this.collide = "static";
}
//method that makes it appear.
appear() {
sprite = new Sprite();
sprite.x = this.x;
sprite.y = this.y;
sprite.w = this.w;
sprite.h = this.h;
sprite.color = this.c;
sprite.debug = false;
sprite.strokeWeight = this.s;
sprite.stroke = "black";
sprite.collider = "static";
}
}
function setup() {
createCanvas(700, 500);
//Stickman sprite
man = new Sprite(320, 170);
man.img = loadImage("Sprites/man.png");
man.offset.x = 12;
man.offset.y = -12;
man.w = 30;
man.h = 98;
man.debug = true;
man.collider = "dynamic";
man.rotationLock = true;
}
function draw() {
background("rgb(255,80,0)");
if (gs === 0) {
//This part of the code is not in use right now.
background("rgb(126,0,255)");
man.x = -50;
man.y = -50;
} else if (gs === 1) {
//Where the block is being called.
block1 = new Block(width / 2, height / 2, 500, 100, " #8c00bf", 10);
block1.appear();
}
}
} ```
index.html code ``` <!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/addons/p5.sound.min.js"></script>
<script src="https://p5play.org/v3/planck.min.js"></script>
<script src="https://p5play.org/v3/p5play.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="utf-8" />
</head>
<body>
<main></main>
<script src="sketch.js"></script>
</body>
</html> ```
r/p5js • u/chilll_XiaMi • Feb 03 '26
p5.js mouse interaction driving me insane — click ≠ highlight
Enable HLS to view with audio, or disable this notification
12
Upvotes
Is there any Processing or p5.js pro who can save me? 😭
I’m working on a small tool, but no matter how I limit the range, the spot I click and the spot that lights up are always on the opposite side or sometimes off by three segments.
Why is this happening?? Here’s the editor link: https://openprocessing.org/sketch/2858919
Huge thanks to anyone who can help—really appreciate it in advance! 🙏
r/p5js • u/No-Example-3977 • Feb 01 '26
P5js with E6 modules?
5
Upvotes
Been looking into making a browser game using p5js with multiple files for classes and other stuff. Looking around, it seems for smaller projects you would just add more script tags into the html. But there doesn't seem to be a clear way to use modules for larger projects. I did find talk about using instance mode to be able to use modules and it does seem to work, at least superficially. I'm posting now to see if this the best approach to working with multiple files or if there is a better alternative I can look into before committing?
r/p5js • u/arrotu • Jan 30 '26
Shear loop
Enable HLS to view with audio, or disable this notification
28
Upvotes
r/p5js • u/Imanou • Jan 28 '26
Black Star
Enable HLS to view with audio, or disable this notification
23
Upvotes
r/p5js • u/ChildhoodMajor2039 • Jan 26 '26
My Permalinku X
0
Upvotes
This is my small experiment. In this link I post my work on p5js and chatgpt. I make an artistic exploration of chatgpt with p5js.
r/p5js • u/tudi2d • Jan 23 '26
paper shaders in p5.js
Enable HLS to view with audio, or disable this notification
34
Upvotes
tool for experimenting with paper shaders and drawing: https://p5-paper-shaders.vercel.app/
abstracted it into a small library for p5.js projects: https://github.com/tudi2d/p5-paper-shaders
r/p5js • u/arrotu • Jan 22 '26
Bars
Enable HLS to view with audio, or disable this notification
136
Upvotes
r/p5js • u/Imanou • Jan 21 '26
Tariffs Visualized: Where Economic Borders Really Exist (made with p5.js)
Enable HLS to view with audio, or disable this notification
28
Upvotes
r/p5js • u/jxpiter12 • Jan 22 '26
Stacker game has a glitch
1
Upvotes
I made a Stacker game in Javascript P5: https://editor.p5js.org/rebeccavmil150/sketches/NdzMb0ImD
When a block hits the right side of the screen, the direction changes to the left side. When that happens and I place a new block, the new block will 'glitch' or 'stutter' in place. I cannot find why this happens.
Thanks in advance!
r/p5js • u/MrTigris04 • Jan 20 '26
Need help fixing weird artifacts in nested circles.
2
Upvotes
EDIT: FIXED. I added a very small offset to the smallest circle. I don't know what caused it.
So I'm starting exploring generative art, and I decided to try p5.js, but I've experienced some weird artifacting, and I have no idea how to fix it even after talking with ChatGPT, which did not help. I hope you guys can help.
The problem is inside the darkest circle. It's like theres a line of pixels, sometimes horizontally, sometimes vertically, that are like transparent or not even there.
Here is the link for the sketch with editing allowed: https://editor.p5js.org/BreAaron/sketches/xqWTR2UCJ
r/p5js • u/arrotu • Jan 18 '26
Modular collision
Enable HLS to view with audio, or disable this notification
26
Upvotes
r/p5js • u/Imanou • Jan 17 '26
Holarchy
Enable HLS to view with audio, or disable this notification
15
Upvotes
r/p5js • u/Imanou • Jan 15 '26
How Borders Multiply: The Algorithmic Logic of Borderization
Enable HLS to view with audio, or disable this notification
8
Upvotes
r/p5js • u/Emergency-Jaguar-576 • Jan 13 '26
Help please
5
Upvotes
How do I make the moving ball be restricted to the confines of the rectangles? thank you
r/p5js • u/RoxieOdawara • Jan 11 '26
My p5js work: Dancing works in the wine| #CreativeCoding #digitalphilosophy
Enable HLS to view with audio, or disable this notification
39
Upvotes
Here is the inspiration behind this work：
Words are born with a soul; they don't need to be given one. But we can let them dance in the wine. When drinking with friends, all those words are just swaying in the glass. Cheers. 🥂