What's so special with "psrdnoise", then? It's another variant of Perlin noise, and there are already plenty of those, right?
Wrong. At the heart of it, yes, it's Perlin noise, more specifically the variant known as "simplex noise". Its plain 2-D pattern looks like this. However, this tutorial will explain the handy extra features of this function.
Note the GLSL shader code below. We included the function "psrdnoise" behind the scenes, but other than that, this is the fragment shader that's running live in the canvas to the left. Your GPU is computing which color to display by executing the "psrdnoise" function once for each pixel, throwing away the result and starting anew for each frame, at the frame rate shown below the canvas.
Hopefully, your frame rate is more or less constant at 60 or 75 FPS or some similar number, which means that your browser can handle the animation at your default screen refresh rate. On a reasonably modern GPU, this will be the case throughout this tutorial. Some low-power laptops might start dropping in frame rate for the patterns on pages 17 to 21, and some smartphones might struggle even at this point, but generally speaking, even a somewhat dated smartphone should be able to handle at least a couple of calls to 2-D noise in a WebGL shader.
// Text in this pane will be dynamically replaced.