Добавление шума в ваш проект Vue

Одностраничный статический компонент

Простой способ придать вашему веб-проекту немного визуальной глубины - это добавить сверху анимированный слой шума. Недавно я использовал этот трюк для юбилейного приложения Дэвид Боуи Space Oddity, а в прошлом - для детектора звука Тихое место. Я попробовал несколько разных техник, ища наиболее эффективный, например полноэкранный GIF или <video>. Однако лучшим вариантом был холст HTML. Поскольку в последнее время я использую исключительно Vue.js, вот инструкции по созданию простого одностраничного компонента, который добавит шума в ваше приложение.

Область шаблона просто включает тег <canvas> с именем noise.

<template>
  <canvas ref="canvas"></canvas>
</template>

И CSS размеры этого холста, чтобы он соответствовал полной ширине и высоте вашей страницы, и фиксирует его с высоким z-индексом, чтобы он покрыл все. Поскольку этот элемент располагается поверх всего, я установил для pointer-events значение none, чтобы мы могли просмотреть его. Наконец, я решил использовать режим смешивания-смешивания, чтобы шум смешался с любым цветом ниже. При необходимости отрегулируйте opacity.

<style scoped>
canvas{
  height: 100%;
  left: 0;
  mix-blend-mode: soft-light;
  opacity: 0.25;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100000;
}
</style>

Теперь мы можем работать с <script>, который настроим следующим образом. Один метод будет использоваться для создания шума при загрузке страницы, а другой - для перемещения или анимации этого шума. Оба эти метода будут запускаться из ловушки жизненного цикла mounted.

<script>
export default{
  methods: {
    generateNoise() {
      // generate
    },
    moveNoise() {
      // noise
    }
  },
  mounted() {
    // generate and move
  }
}
</script>

Генерация шума включает создание нового закадрового холста, который в два раза больше видимого холста в нашем шаблоне. Затем мы можем использовать метод createImageData для создания массива пустых пикселей, который соответствует размерам нашего холста. Данные изображения этого закадрового холста затем заполняются случайным массивом белых и черных пикселей.

generateNoise() {
  this.noise = document.createElement('canvas')
  this.noise.height = window.innerHeight * 2
  this.noise.width  = window.innerWidth * 2
  let noiseContext = this.noise.getContext('2d')
  let noiseData = noiseContext.createImageData(
    this.noise.width,
    this.noise.height
  )
  let buffer32 = new Uint32Array(noiseData.data.buffer)
  let len = buffer32.length - 1
  while (len--) {
    buffer32[len] = Math.random() < 0.5 ? 0 : -1 >> 0
  }
  noiseContext.putImageData(noiseData, 0, 0)
}

Чтобы оживить этот шум, мы просто нарисуем контекст закадрового шума на нашем видимом холсте в случайном месте. Это движение будет постоянно оживлять, создавая иллюзию истинной случайности.

moveNoise() {
  let canvas  = this.$refs.canvas
  let context = canvas.getContext('2d')
  let x = Math.random() * canvas.width
  let y = Math.random() * canvas.height
  context.clearRect(0, 0, canvas.width, canvas.height)
  context.drawImage(this.noise, -x, -y)
  requestAnimationFrame(this.moveNoise)
}

Наконец, в ловушке жизненного цикла mounted мы настроим видимые размеры холста, создадим шум и начнем requestAnimationFrame цикл анимации.

mounted() {
  this.$refs.canvas.height = window.innerHeight
  this.$refs.canvas.width  = window.innerWidth
  this.generateNoise()
  requestAnimationFrame(this.moveNoise)
}

Теперь, когда вы знаете, как был создан шумовой компонент, вы можете взять его копию на этой сути и перенести шум в свой проект. 💥