Adding Noise to Your Vue Project

A single page static component

Image for post
Image for post

An easy way to give your web project a bit of visual depth is to add an animated layer of noise on top. I’ve used this trick recently for David Bowie’s Space Oddity anniversary app and in the past for A Quiet Place sound detector. I tried a few different techniques looking for the one that was most performant such as a fullscreen GIF or <video>. However, it was HTML canvas which presented the best option. Since I’ve been using Vue.js exclusively lately, here’s instructions on creating a simple single page component which will add some noise to your app.

The template area simply includes a <canvas> tag a ref named noise.

And the CSS sizes that canvas to fit the full width and height of your page and positions it fixed with a high z-index so it covers everything. Since this element sits on top of everything, I set pointer-events to none so we can click through it. Finally, I’ve chosen to use a mix-blend-mode so the noise blends into whatever color is below. Adjust the opacity as needed.

Now we can work on the <script> which we’ll setup as follows. One method will be used to generate the noise on page load and another will be used to move or animate that noise. Both of these methods will be triggered from the mounted lifecycle hook.

Generating the noise involves creating a new offscreen canvas which is twice as large as the visible canvas in our template. We can then use the createImageData method to create a blank pixel array which fits the dimensions of our canvas. The image data of this offscreen canvas is then filled with a random array of white and black pixels.

To animate this noise, we will simply draw the offscreen noise context onto our visible canvas in a random position. This movement will continually animate to give the illusion of true randomization.

Finally, within the mounted lifecycle hook, we’ll configure our visible canvas dimensions, generate the noise, and begin the requestAnimationFrame animation loop.

Now that you know how the noise component was created, you can grab a copy of it on this gist and bring the noise to your project. 💥

Written by

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store