Website Logo

https://github.com/javascriptxbest/website-logo

The word JAVASCRIPT — This is the initial rendering of the text on canvas, before effects applied.

Code that renders the word JAVASCRIPT onto a canvas — ... and the code to put it there.

Code that makes text look crazy — 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.

A collage of different variations of the the code
when the downwards bias bug was fixed. — It's hard to see the original text in some variations, but it was actually now closer to what I was aiming for.

An unreadable wall of code — To get layering of different effects, such as colors, fading, intensity, just copy and paste the code, change it slightly each time.

A collage of logos using layering and changing variables between
each layer to allow fading and coloring. — 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.

Code example of the double request animation frame
process used to prevent blocking UI render updates. — 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.