Take a photo. Turn it into a cloud of tiny points. Spin it in any direction, then tap it and watch the picture explode into particles. A second later every point flies home. That is PS-Partcls, the newest free tool in my Play room.
What it does
- Add up to seven photos with the + button. Each one becomes a cloud of points: by default around 160,000 on a computer and 70,000 on a phone.
- Tap a photo on the left to show it. Tap it again to Replace or Remove it, or drag it up and down to change the order.
- Drag to turn the cloud in any direction. Scroll or pinch to zoom. Double tap to bring it home.
- Tap or click to scatter the points. They fly out, slow down and return to their place.
- Press Space and the photo dissolves into the next one, point by point.
- Turn the sound on for Calm moods or a Beat. The points move with the music.
Five things to try
- Big bang. In Settings, under Tap / click, set Burst to 100 and Friction low. Then tap the middle.
- Surgical tap. Set Tap size small and tap one shape. Only that part flies away.
- Sculpture. Pick the Invert color, push Relief up and drag sideways. Bright parts come forward and the photo becomes a 3D shape.
- Paper mode. Choose the Cream background for a clean, printed feel.
- Dance floor. Turn the sound on, pick Beat and add some Echo.
How it was built
Every photo is read pixel by pixel. Each pixel becomes a point with its own color and its own home. The brightness of the photo becomes depth, so bright areas step forward and dark areas sit back. The color around the edge of the photo becomes a key color, so a plain background can fade away and the subject floats on its own.
The graphics card does the heavy lifting. It draws every point, every frame, and moves each one with a few lines of math: float, stream, flock or pour. A tap sends a wave through the points close to it. Burst sets how far they fly, Friction sets how fast they settle and Tap size sets how wide the wave is.
Every point remembers where it belongs. That is the whole trick.
Turning the cloud in any direction uses quaternions, the same math video games use to turn a camera freely. Echo is painted into a high precision layer, so the fade stays smooth on charcoal and cream backgrounds.
The languages under the hood
- HTML builds the page: the canvas, the photo rail and the Settings panel.
- CSS styles the panel, the dark and white modes and the layout on phones.
- JavaScript reads your photos, handles drag, pinch and tap, keeps the settings and writes the share codes.
- GLSL is the shader language of the graphics card. It places, colors and moves every point in 3D through WebGL 2.
- Web Audio plays the Calm moods and builds the Beat live in the browser, then listens to it so the points can move with the low, mid and high sounds.
- PHP runs the WordPress page around it and counts likes, visits and shares.
Share it and embed it
Every setting lives in the link. Open Settings, scroll to Share and pick one:
- Link copies the address of PS-Partcls with your look, motion, tap, sound and color choices inside it. Whoever opens it sees your version.
- Iframe copies a code you paste into your own website. PS-Partcls fills the space with your settings and a small credit in the corner.
<iframe src="https://pierosalardi.com/wp-content/uploads/ps-gl/dustr/app.html?psembed=1#light=on%20white&splash=90" title="PS-Partcls" loading="lazy" style="display:block;width:100%;height:100vh;border:0"></iframe>Your photos stay on your device. The link carries the settings, and each visitor brings their own pictures. The sound plays only while the window is in front of you: switch to another tab or app and it stops, come back and it starts again.
How I made it
I built PS-Partcls with Claude, the AI assistant by Anthropic. I described the feeling, tested every version on my phone and my computer, and asked for changes until the particles moved the way I imagined. Claude wrote the code, tested it and placed it on my site.
Try it now: open PS-Partcls, add a photo you love and tap it.
Liner notes
0 notes · Moderated