How I'd do it is create a mask (a hidden black-on-white image of the text), then sample a lot of random or uniform points on that mask (e.g. by walking the image and keeping x% of the black points at random), then display circles at those points (or, as they did, display a circle at (x + a * sin(time), y + a) where (x, y) is the point and a is a parameter that starts high, quickly drops down to zero, and when your mouse moves near a circle, grows back up - and color the circle blue when a is high and yellow when a is low (also, make opacity higher when a is low)
Oh I totally forgot you could just use get the direct link to the .js file, was always just previewing in console. But reading the minified file is always difficult to read due to shortened variable names, was hoping for a un-minified source version.
ahhh right just get `fillStyle` or `strokeStyle` or `fill` or `stroke` to nothing.
What about making the mask though? Is it kind of like in photoshop where you write some text → create outline / curves off of it? Or do you keep it as text?
Depends what you want to do. If you want the mask as a bunch of pixel locations you can loop through the image and make a JS Set of x,y coords which arent blank. I am not sure what representations the above app used for their masks. It's all isomorphic. Important step is just to generate the masks using either fillText or strokeText.
How I'd do it is create a mask (a hidden black-on-white image of the text), then sample a lot of random or uniform points on that mask (e.g. by walking the image and keeping x% of the black points at random), then display circles at those points (or, as they did, display a circle at (x + a * sin(time), y + a) where (x, y) is the point and a is a parameter that starts high, quickly drops down to zero, and when your mouse moves near a circle, grows back up - and color the circle blue when a is high and yellow when a is low (also, make opacity higher when a is low)