Skip to content

Blur

<script lang="ts" setup>
import { ref } from 'vue'
import { onTick, useScreen } from 'vue3-pixi'

const screen = useScreen()

const dudeBlur = ref(0)
const mobyBlur = ref(0)

let count = 0

onTick(() => {
  count += 0.005

  const dudeBlurAmount = Math.cos(count)
  const mobyBlurAmount = Math.sin(count)

  dudeBlur.value = 20 * (dudeBlurAmount)
  mobyBlur.value = 20 * (mobyBlurAmount)
})
</script>

<template>
  <sprite :width="screen.width" :height="screen.height" texture="https://pixijs.com/assets/pixi-filters/bg_depth_blur.jpg" />
  <sprite :x="(screen.width / 2) - 315" :y="200" texture="https://pixijs.com/assets/pixi-filters/depth_blur_dudes.jpg">
    <blur-filter :blur="dudeBlur" />
  </sprite>
  <sprite :x="(screen.width / 2) - 200" :y="100" texture="https://pixijs.com/assets/pixi-filters/depth_blur_moby.jpg">
    <blur-filter :blur="mobyBlur" />
  </sprite>
</template>