Eraser is my long-term generative visual project and probably the clearest connection between my interests in programming, computer graphics and music. It originally developed alongside my DJ work and takes its name from my original mix Eraser, which won a competition organized by Decoded Magazine.
The visual explores transformation, distortion and the boundary between recognizable shapes and abstraction. Elements can appear structured or almost organic for a moment and then dissolve, collide or become unstable. I am interested in creating something that feels generated by a system while still having a strong visual character rather than looking like a conventional screensaver or visualization.
Technically, Eraser is a real-time browser graphics experiment built from multiple rendering layers. The current visual combines WebGL with two Canvas 2D layers. Much of the visual complexity comes from large numbers of particles, transparency, blending and different compositing operations.
Keeping a substantial part of the project in Canvas 2D is intentional. I like the API and the flexibility of its compositing model, even though this also makes performance one of the most challenging parts of the project. Large transparent areas, particle rendering and multiple stacked canvases can become expensive, especially at high resolutions.
Because of that, Eraser has also become a practical playground for investigating how browsers actually render graphics. I have spent a lot of time profiling frame rendering, reducing unnecessary drawing, experimenting with batching and state changes, studying alpha and composite-operation costs and looking at the interaction between CPU rasterization, GPU acceleration and the browser compositor.
- Multi-layer real-time rendering using WebGL and Canvas 2D
- Particle systems, transparency and compositing
- Procedural and generative visual behaviour
- Browser rendering and frame-rate optimization
- Experimentation with the boundary between 2D raster graphics and GPU rendering
- Integration as the main generative visual layer of this portfolio
The project continues to evolve as I learn more about browser graphics. My current direction is to keep exploring what can be achieved with Canvas 2D while gradually introducing more GPU-driven techniques through WebGL and, eventually, WebGPU where they make sense.