This is the initial rendering of the text on canvas, before effects applied.... and the code to put it there.
Adding this function to do a kind of random walk from the
white text areas into the black pixel areas.
Loops within loops is suboptimal. Changing how many times the random walk
goes for or the size of the image to some larger value crashes the browser.
Playing around with values, went on this journey...
This began to show the intended effect, but there was some
strange stuff, like a bias downwards. Notice how the tops
are relatively flat?
The downwards bias was due to the fact that any visited pixel wouldn't
be able to be included in subsequent pixel changes, so this excluded
in the initial rows that were checked but discarded for not including
pixels of the white text it was looking for.
It's hard to see the original text in some variations, but it
was actually now closer to what I was aiming for.
To get layering of different effects, such as colors, fading, intensity,
just copy and paste the code, change it slightly each time.
The layering allowed for changes in colors and gradients.
The fading gives a kind of smoky effect.
I wanted to make the UI a bit clearer, like showing it as loading
while the heavy computation takes place. But I noticed Vue was
choking, and the changes to the variables didn't seem to change
the DOM. In short, to defer heavy computations until after other
variables have changed and their changes rendered, a double call
to "requestAnimationFrame" is necessary.
This solution came in part from a github issue on the Vue
repo. It helped allow the loading text to appear before
running the computationally heavy draw function.
https://github.com/vuejs/vue/issues/9200