For this week of Hacktoberfest I wanted to fix a bug instead of adding a feature. I’d already opened a feature PR in another repo, so this time I looked for bug to patch. A classmate pointed me to a repo they’d worked on, which is a public site of interactive physics simulations. By chance it had a reproducible visual bug, so I volunteered to take it on.
The project is a React + p5.js site with explanatory theory pages. Each simulation runs as a p5 sketch embedded in React, and shared drawing helpers live in src/utils/. On the BouncingBall page the “Enable trail” toggle worked, but when I later turned the trail off the canvas looked slightly lighter than the original background. Running the simulation with the trail on for a while or toggling it repeatedly biased the canvas toward that lighter color. The bug only showed up on that page because it used the shared drawBackground helper.
Issue link
Two different code paths painted the background: a full-clear path that used p.background(...) when the trail was off, and a translucent-overlay path that used p.fill(r,g,b,alpha); p.rect(...) when the trail was on. They constructed colors differently and didn’t enforce the same blend settings. Small differences in color conversion and alpha handling accumulated through repeated compositing, which pushed the canvas color toward the overlay. When the trail was switched off, the full-clear path used a slightly different conversion and the canvas stayed a bit lighter.
To fix it I centralized and normalized both paths so they come from the same p.color(...) object and run under a consistent color mode. That way the translucent overlay and the hard clear use identical RGB channels and the same alpha interpretation, so compositing no longer shifts the base color. The solution turned out to be small but it removes the confusing visual drift.
PR link
Tiny inconsistencies in color handling can produce annoying visual bugs, so I checked the shared utilities first. I noticed someone before me had tried to fix the problem by changing the BouncingBall page directly and that ended up causing more serious bugs because it duplicated logic. Fixing the root utility drawBackground instead avoided those regressions and turned out to be the safer, cleaner approach.
Top comments (0)