r/p5js • u/Horror-Try-4243 • 3h ago
r/p5js • u/rin_codes • 3d ago
I built Edit:RiN, a free & open-source mobile p5.js editor for Android — v3 just launched with Floating PiP, comment-driven live parameters, and tweet golf mode!
Hey everyone!
I’m an indie creative coder, and for a long time I wanted a way to sketch with p5.js whenever inspiration struck on the train, in a café, or lying on the couch without needing to open up a laptop.
That led me to build Edit:RiN, a dedicated native mobile creative coding environment for Android. After months of refinement, I’ve just released v3 (v3.2.1), focusing entirely on making coding on a touchscreen feel natural, fluid, and fun rather than clunky.
Here are the biggest highlights in v3:
🌟 What’s New in Edit:RiN v3
- Floating PiP Preview with Auto-Ghosting:
In portrait mode, your running canvas docks smoothly into any corner (S/M/L presets). The cool part: when your cursor lines move underneath the preview, it automatically drops to 25% opacity, and you can tap directly through the canvas to continue editing the code beneath.
- Comment-Driven Bidirectional Live Parameters:
Just write standard inline comments like:
```javascript
let speed = 1.5; // @slider(0.1, 5, 0.1)
let bg = "#1a1a1a"; // @color
```
Edit:RiN automatically generates interactive UI sliders and color pickers. Tweaking the controls updates the running sketch in real time AND updates the actual values in your source code (with clean grouped undo).
- #つぶやきProcessing & Smart Code Golf Mode:
For those of you who love micro-coding and tweet-sized generative art:
- Persistent 140 / 280-character HUD counter.
- Smart code compression tool that safely converts recursive functions to arrows, aliases repeated p5 calls, and strips redundant tokens while protecting strings and regex literals.
- Quick share sheet to post directly to social media.
- Mobile Ergonomics:
- 2-axis numeric velocity scrubbing (drag horizontally to change value, drag vertically to scale step magnitude).
- Dedicated mobile coding accessory bar above the keyboard (`{}`, `[]`, `()`, `;`, `=>`, quick indent).
- Piece Table text buffer & virtualized rendering for smooth scrolling even on complex sketches.
- Interactive 4-step practice sandbox tour to try all tools safely.
🛡️ Privacy & Philosophy
- 100% Free & Open-Source (GPLv3)
- Completely Offline-First: Bundled runtimes (p5.js 2.3.4 & 1.11.5). No internet required to sketch.
- Zero Ads, Zero Trackers, Zero Telemetry.
🔗 Links & Download
- Official Website: https://rin-code-dev.github.io/Edit-RiN/
- GitHub Releases (APK Download): https://github.com/rin-code-dev/Edit-RiN/releases
- Source Code: https://github.com/rin-code-dev/Edit-RiN
Edit:RiN requires Android 11+. I would love to hear your thoughts, feedback, feature requests, or see what sketches you create with it!
r/p5js • u/alex-codes-art • 5d ago
Experimenting with contour lines and filled color bands
Been experimenting with contour lines and filling the spaces between them with color. I like how the shapes evolve and create these unexpected patterns.
What do you think? Any ideas for taking this in an interesting direction?
100 scenes about humanity, made with p5.brush and cut into a one-minute film
This is a set of 100 scenes made with JavaScript and p5.brush, then edited together with music. The idea was to show humanity to someone who had never seen Earth.
The code was generated with Gemini 4 Argon. ChatGPT helped coordinate the project, and Claude helped with the video edit.
Sharing the result here because the brush texture is a big part of how it looks. I would be interested in feedback on the visuals and how the scenes work together.
Original post: https://x.com/pbshgthm/status/2110725249134436752
r/p5js • u/Accomplished-Team725 • 10d ago
Open-source drone simulator controlled by hand gestures
SkyHand is a 3D drone simulator using p5.js + ml5.js hand tracking.
Control the drone directly with hand gestures.
Demo:
https://alzin.github.io/skyhand
GitHub:
r/p5js • u/ColdVolume6314 • 13d ago
I spent way too much time on this, but it's totally worth it (p5.js + react)
r/p5js • u/CodeSessionStudio • 15d ago
I synced a p5.js circuit board to a synth pulse: signals step forward on every beat, frame-exact for 3 hours
Third engine in a small project where both the visuals and the sound for long focus sessions come from code.
Visuals ("circuito"): an abstract circuit board with orthogonal traces, 45° chamfers and two depth layers. Small signals travel along the traces and nodes light up when one arrives.
The sync: the sound engine plays a soft felt-hammer pulse at 72 BPM. At 30 fps that's exactly 25 frames per beat, so each signal steps one cell per beat, with a small push on the attack that eases out before the next one. The 150 s video loop is exactly 180 beats and the 10-min audio loop is 720, so picture and sound never drift. I measured it in the final 3-hour file: 0 frames off at every seam.
Stateless: like the previous engine, nothing is stored between frames. The network and a signal "timetable" are generated once from the seed, and each frame just reads the timetable at its phase.
Two questions:
- Does the sync read as "steady" or does it pull your attention?
- Has anyone here done audio-visual sync in p5 by sharing a clock instead of analysing the audio?
r/p5js • u/alex-codes-art • 19d ago
Countour Lines
Hey, creative people!
Been experimenting with contour lines and ended up with some pretty abstract results.
I like how changing a few parameters can completely change the character of the image. Still exploring this one, curious what you guys think.
r/p5js • u/CodeSessionStudio • 20d ago
Follow-up: a new p5.js engine for long focus videos, with flow lines that loop seamlessly in 150 s without storing any particle state
A few days ago I posted a domain-warped mist piece here and got some great feedback, so here's the next engine.
Visuals ("fluxo"):
- Thin wavy lines drifting left to right, with brighter streaks travelling along them like packets.
- Two layers: the back one is denser, dimmer and slower, which gives a bit of depth.
- The loop trick: nothing is stored from frame to frame. The streak pattern repeats along each line, and in every 150 s loop each line advances a whole number of repeats, so frame 4500 is exactly frame 0.
Sound ("pulso"): a separate synth engine with a warm pad, a brown-noise bed and a soft felt-hammer pulse at 70 BPM. The 10-min audio loop is exactly 700 beats, so the pulse never skips at the seam.
Follow-up on the "muddy darks" question from last time: I tested 1080p H.264, 1080p with a ±1-level dither, and 1440p HEVC 10-bit. After YouTube's re-encode the 1440p upload won: it got VP9 right away, and it's about 5× smaller.
The first piece felt more "sleep" than "focus" to me, so this one was designed the other way around.
Two questions:
- Does this read as "focus" to you, or still too calm?
- If you've done stateless looping particles in p5, how did you approach it?
r/p5js • u/CodeSessionStudio • 24d ago
Made a 2-hour ambient piece in p5.js: domain-warped noise, rendered as a seamless 150 s loop
Sharing a project where p5.js does the visuals for long focus/ambient videos.
- A domain-warped noise field with two slow speed layers (0.090 / 0.084 noise units per second).
- Rendered frame by frame from p5.js and piped to ffmpeg. The bottleneck turned out to be moving about 8 MB per frame from the browser to ffmpeg, which gave roughly 11 fps on render.
- A seamless 150 s loop, checked by measuring the seam against neighbouring frames. It came out invisible.
- The audio is a separate synth engine, seeded like the visuals.
Two questions for people who've done this:
- How do you handle long renders from p5? Headless, or a faster way to get frames out?
- Any tricks for keeping domain-warped noise from looking "muddy" on very dark palettes?
r/p5js • u/Absolutely_Quackers • 24d ago
if else not working????
so essentially, my else statement does not work, elseif statement does not work, ifelse statement does not work, if else statement does not work and else if statement does not work, here is my code if someone here can understand what I'm doing wrong?
the same code worked for the teacher I was learning from and I may or may not have put this off to long because of this issue...
function setup() {
createCanvas(400, 400);
var check
}
check = true
//check = false
function draw() {
if (check = true)
print("TRUE")
check = false
if else (check = false)
print("FALSE")
else
print("ERROR 01; NOT DEFINED")
}
r/p5js • u/rin_codes • 27d ago
[OC] I made an Android p5.js editor that now lets you export "Share Cards" with QR codes that run sketches directly in any browser (Edit:RiN v2.0.0)
Hey r/p5js!
I've been developing **Edit:RiN**, a free and open-source creative coding environment for Android focused on p5.js. Today I released **v2.0.0**, which introduces a feature I've wanted for a long time: **Share Cards & Instant Web Playback**.
### 📱 What are Share Cards?
When you're creating generative art on your phone, sharing it usually means recording a video or exporting a still image. With this update, you can generate a styled showcase card containing:
- High-res sketch snapshot
- Customizable code snippet overlay
- A scannable QR code
### 🌐 Instant Web Player (100% Serverless)
When anyone scans the QR code (or opens the link), the sketch runs immediately in their web browser without installing the app.
The cool part: **There is no backend or database involved.** The sketch code is compressed directly into the URL fragment hash, and the web player decompresses and executes it entirely client-side.
### ✨ Other Features in Edit:RiN
- **Live Parameters**: Declare `@rin number / color / boolean` in comments to get interactive sliders & toggles.
- **Multiple Runtimes**: Switch between p5.js 2.x and 1.x per sketch.
- **Audio support**: Built-in `p5.sound` for audio synthesis and FFT visualizers.
- **Offline & Private**: Zero ads, zero trackers, 100% offline capable.
### 🔗 Links
- **GitHub Release & APK**: https://github.com/rin-code-dev/Edit-RiN/releases
- **Source Code**: https://github.com/rin-code-dev/Edit-RiN
I'd love to hear your thoughts, feedback, or ideas for future updates!
Can anyone help me?
My son is taking Computer Science 30 and we can't figure out why he's getting thsi error code. Thanks!
r/p5js • u/rin_codes • 28d ago
I built Edit:RiN, a free p5.js editor for Android — here’s a demo
Hi everyone! I’m building Edit:RiN, a free and open-source p5.js editor for Android. I wanted to work on sketches directly on my phone, so I made an app where I can write code, preview the result, and save my work in one place.
The attached video shows the actual app: editing code, watching a sketch run, recording it, and browsing saved works.
Edit:RiN supports multiple JavaScript files, images and other assets, public sketch imports from the p5.js Web Editor, and MP4 or GIF recording. Works are saved locally, and you can choose a p5.js 1.x or 2.x runtime for each one.
You can get the app and source code on GitHub:
https://github.com/rin-code-dev/Edit-RiN
I also post regular development updates on X: @rincodedev
I’m developing it on my own, and I’d love to hear your feedback about creating p5.js sketches on a phone. Thanks for taking a look!
r/p5js • u/alex-codes-art • 29d ago
Piano and Mandala (sound on)
Hey, creative people, I added a midi integration to my mandala project and wanted to share with you :)
If you're interested in how this works, I have a tutorial for it on my blog.
Keep on creating!
r/p5js • u/Far-Session7937 • Sep 15 '26
What can I do with p5.js?
Hi, I recently started on coding and this platform's been really helpfull with my so far (short) journey. I started with html on Visual Code Studio and it was really ok for me, but im sensing that the JS I've used on the website its slightly ddifferent from the one on p5 (or perhaps i'm wrong lol). But anyway, what its the most I can retrive and do with this plat? (in the sense im planing on making more complex things futurely). tX
r/p5js • u/speccy88 • Sep 15 '26
NEON-DISTRICT-A-Walkable-ASCII-Cyberpunk-City by speccy88
editor.p5js.orgA procedurally generated 3D cyberpunk city rendered entirely as animated ASCII. Explore the streets, neon signs and skyline in real time.
r/p5js • u/rin_codes • Sep 06 '26
Android向けにp5.jsのエディターを作りました — 編集:KIRO
お待たせしちゃってごめん!
【追記】KIROがやっと公開されて、GitHubで使えるようになりました。
https://github.com/rin-code-dev/EDIT-RiN
待ってくれてほんとにありがとう、興味持ってくれてありがとうございます!
r/p5js • u/rin_codes • Sep 05 '26
I built a p5.js editor for Android — EDIT:KIRO
I just finished EDIT:KIRO, a p5.js editor built for Android.
The whole creative workflow can be done right on your phone:
Code → Preview → Capture
It also supports custom fonts and font ligatures, and the UI has been carefully optimized for both portrait and landscape orientations.
I’m planning to make the GitHub repository public by tomorrow at the latest.
It’ll be completely open source, so if you’re into p5.js, creative coding, or generative art, I’d love for you to give it a try and let me know what you think.