Recreating the painting ripple effect from Super Mario 64

Опубликовано: 14 Август 2026
на канале: JS64
6,037
220

I used this shader toy as a starting point: https://www.shadertoy.com/view/WtjBRc
As well as this blogpost by Adrian Boeing: http://adrianboeing.blogspot.com/2011...

From there it was a matter of moving the ripple center location based on the mouse click, adding damping so the ripple amplitude fades over time, adding a falloff factor to decrease the amplitude as a function of the distance from the wave crest, which starts in the center and radiates outward to create the effect of a wave moving from the center of impact. I also added sliders to control the frequency of the waves.

I also used HD Level Portraits from the Render96 Project: https://github.com/pokeheadroom/RENDE...

https://64.media.tumblr.com/87ea1cd29...

The UI menu I'm using is called Dat.gui
I used p5js in WEBGL mode to draw 3D images to the HTML canvas. This program runs in the browser.