I built PixelStretch by RRON, a compact web app that transforms any photo by stretching a single row or column of pixels across your canvas. I built it using vibe coding alongside p5.js, with the help of both ChatGPT and Gemini to iterate and refine features.
Vibe coding keeps you creative. You stay in the flow. I wrote sketches in a continuous loop, adjusting sliders and controls in real time to see instant visual feedback. With p5.js, loading images, adding interactive UI components, and exporting high‑resolution PNGs became straightforward. The combination of live coding and instant rendering accelerated development and experimentation.
Collaborating with AI agents opened a new frontier in debugging and design. I prompted ChatGPT to draft the initial code, then asked Gemini to polish the user interface. ChatGPT suggested a robust undo/redo history, while Gemini recommended a responsive control bar, demonstrating how different models can debug and improve each other’s work.
You can try PixelStretch in your browser or explore the source on GitHub. It starts with an uploaded image and turns stretched pixels into glitch art and abstract textures.
Below are a few examples I made using PixelStretch. Drag a stretch line, tweak the controls, and see how simple pixel manipulations generate complex patterns.
You can experiment with your own images or download the code to see how it works. If you share a result, tag it with #RRON.
