Animate shader background

assets/workers/ShaderWorker.ts

@@ -146,7 +146,6 @@ async function main(canvas: OffscreenCanvas) {
                 requestAnimationFrame(render)
             }, 1000 / shaderOptions.framerate)
         }
-        console.log("a")
     }
 
     requestAnimationFrame(render)
@@ -210,7 +209,6 @@ self.addEventListener("message", (e) => {
 
 async function loadShader() {
     if (!canvas) { return }
-    console.log("a")
     // let fragmentShader2 = fragmentShader.replace("#define FBM_OCTAVES 6", "#define FBM_OCTAVES " + shaderOptions.quality);
     const temp = await main(canvas);
     if (temp) {

components/AnimatedBackground.vue

@@ -1,21 +1,31 @@
 <script setup lang="ts">
 const settingsStore = useSettingsStore()
 
+import gsap from 'gsap';
 import ShaderWorker from '~/assets/workers/ShaderWorker?worker'
+import goStore from '~/netcode';
 const worker = new ShaderWorker()
 
 const canvas = ref<HTMLCanvasElement | null>(null)
 const canvas_resize_temp = ref<HTMLCanvasElement | null>(null)
 
+
 export interface Props {
     colorStart?: [number, number, number]
     colorEnd?: [number, number, number]
 }
+
+
+
 const props = withDefaults(defineProps<Props>(), {
     colorStart: () => [0, .3, 0],
     colorEnd: () => [0, 1, 0]
 })
 
+const _colorStart = reactive(props.colorStart)
+const _colorEnd = reactive(props.colorEnd)
+
+
 function initShader() {
     if (!canvas.value) { return }
     const offscreen = canvas.value?.transferControlToOffscreen()
@@ -34,8 +44,8 @@ function initShader() {
 function recolorShader() {
     worker.postMessage({
         command: 'recolorShader',
-        colorStart: props.colorStart,
-        colorEnd: props.colorEnd
+        colorStart: [..._colorStart],
+        colorEnd: [..._colorEnd]
     })
 }
 
@@ -73,7 +83,18 @@ watch(() => [settingsStore.shaderQuality], () => {
     resizeShader()
 })
 
-watch(() => [props.colorEnd, props.colorStart], () => {
+watch(() => [goStore.current_game?.current_turn], () => {
+    if (goStore.current_game?.current_turn != goStore.self?.team) {
+        gsap.to(_colorStart, { duration: 0.5, 0: 0, 1: .2, 2: .3 })
+        gsap.to(_colorEnd, { duration: 0.5, 0: 0, 1: 1, 2: 1 })
+    } else {
+        gsap.to(_colorStart, { duration: 0.5, 0: 0, 1: .3, 2: 0 })
+        gsap.to(_colorEnd, { duration: 0.5, 0: 0, 1: 1, 2: 0 })
+    }
+}, { immediate: true })
+
+
+watch([_colorEnd, _colorStart], () => {
     recolorShader()
 })
 

package-lock.json

@@ -8,6 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@pinia/nuxt": "^0.5.1",
+        "gsap": "^3.12.5",
         "nuxt": "^3.11.2",
         "pinia": "^2.1.7",
         "vue": "^3.4.21",
@@ -5670,6 +5671,12 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
+    "node_modules/gsap": {
+      "version": "3.12.5",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
+      "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license. Club GSAP members get more: https://gsap.com/licensing/. Why GreenSock doesn't employ an MIT license: https://gsap.com/why-license/"
+    },
     "node_modules/gzip-size": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@pinia/nuxt": "^0.5.1",
+    "gsap": "^3.12.5",
     "nuxt": "^3.11.2",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",