Don't show dynamic background by default

Author: markmetcalfe

components/DynamicBackground.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="dynamicbackground" />
+    <div
+      class="dynamicbackground"
+      :class="{ 'dynamicbackground--hidden': !visualsStore.visible }"
+    />
   </div>
 </template>
 
@@ -21,6 +24,9 @@ onMounted(() => {
       )
       visualsStore.setRenderer(rendererInstance)
       rendererInstance.initialise()
+      visualsStore.listeners.onStart = () => {
+        rendererInstance.start()
+      }
       renderer.value = rendererInstance
     },
     isSafari ? 500 : 100, // Give Safari more time to init
@@ -44,5 +50,9 @@ onUnmounted(() => {
   z-index: -100;
   transition: opacity 0.4s;
   cursor: pointer;
+
+  &--hidden {
+    opacity: 0;
+  }
 }
 </style>

components/ProfilePhoto.vue

@@ -1,19 +1,23 @@
 <template>
   <div
     class="profilephoto"
-    @click="randomiseProfile"
+    @click="onClick"
   >
     <img src="/me.png?v=6">
     <div class="profilephoto-bg" />
+    <div class="profilephoto-fallback">
+      <img src="/me-bg.png">
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
-import { isSafari } from 'react-device-detect'
 import { Renderer } from '~/util/3d/renderer'
 import { PartialSphere, Sphere } from '~/util/3d/geometry'
 
+const visualsStore = useVisualsStore()
+
 const rendererZoomLevel = 12
 const geometryDefinition = [
   {
@@ -45,9 +49,10 @@ const geometryRotationSpeed = 20
 
 const renderer = ref<Renderer | undefined>(undefined)
 
-const randomiseProfile = (): void => {
+const onClick = (): void => {
   renderer.value?.randomiseRotations()
   renderer.value?.randomiseColors()
+  visualsStore.randomise()
 }
 
 onMounted(() => {
@@ -63,7 +68,7 @@ onMounted(() => {
       .setOnRenderTick(renderer =>
         renderer.getGeometry()?.forEach(geometry => geometry.rotate()),
       )
-      .setOnInit((renderer) => {
+      .setOnStart((renderer) => {
         renderer.getGeometry()?.forEach((geometry) => {
           geometry.setRotationSpeed({
             x: geometryRotationSpeed,
@@ -73,9 +78,10 @@ onMounted(() => {
       })
       .setGetZoom(() => rendererZoomLevel)
       .initialise()
+      .start()
 
     renderer.value.getCanvasElement()?.style.setProperty('border-radius', '50%')
-  }, isSafari ? 500 : 100)
+  }, 500)
 })
 
 onUnmounted(() => {
@@ -103,7 +109,7 @@ onUnmounted(() => {
     width: 8rem;
   }
 
-  &-bg {
+  &-bg, &-fallback {
     position: absolute;
     top: 0;
     left: 0;
@@ -129,5 +135,19 @@ onUnmounted(() => {
     border: var(--color-highlight) 1px solid;
     box-sizing: border-box;
   }
+
+  &-fallback {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    width: inherit;
+    height: inherit;
+
+    & > img {
+      z-index: 0;
+    }
+  }
+
 }
 </style>

pages/visuals/index.vue

@@ -128,6 +128,9 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { isMobile } from 'is-mobile'
 import { AutoZoomMode, useVisualsStore } from '~/stores/visuals'
+import { useShowBackground } from '~/util/hooks/useShowBackground'
+
+useShowBackground()
 
 const visualsStore = useVisualsStore()
 

pages/visuals/shapes.vue

@@ -82,6 +82,9 @@ import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useVisualsStore } from '~/stores/visuals'
 import { type GeometryAttributes, geometryClasses } from '~/util/3d/geometry'
 import { getColorName } from '~/util/color'
+import { useShowBackground } from '~/util/hooks/useShowBackground'
+
+useShowBackground()
 
 const visualsStore = useVisualsStore()
 

public/me-bg.png

@@ -115,11 +115,11 @@ export const useSequencerStore = defineStore('sequencer', {
     },
 
     initGrid(synths: Synth[]) {
-      this.grid = synths.map((synth, index) => ({
+      this.grid = synths.map(synth => ({
         synthId: synth.getId(),
         beats: Array(this.beatCount).fill(false),
         muted: false,
-        visualsSynced: index === 0,
+        visualsSynced: false,
       }))
     },
 
@@ -225,10 +225,13 @@ export const useSequencerStore = defineStore('sequencer', {
     },
 
     syncVisuals(rowIndex: number) {
+      const visualStore = useVisualsStore()
       const currentState = this.grid![rowIndex].visualsSynced === true
       this.grid!.forEach(row => row.visualsSynced = false)
       this.grid![rowIndex].visualsSynced = !currentState
-      console.log({ grid: this.grid })
+      if (!visualStore.visible) {
+        visualStore.start()
+      }
     },
   },
 })

stores/sequencer.ts

@@ -51,7 +51,9 @@ export interface VisualStore {
   }
   listeners: {
     onRandomise: (() => void) | undefined
+    onStart?: () => void
   }
+  visible: boolean
 }
 
 export const defaultGeometry: GeometryAttributes[] = [
@@ -86,14 +88,14 @@ const initialState: VisualStore = {
   geometryConfig: defaultGeometry,
   followCursor: true,
   zoom: {
-    min: -2,
+    min: -6,
     max: 4,
-    current: 4,
+    current: -6,
   },
   autoZoom: {
     mode: AutoZoomMode.SMOOTH,
-    speed: 5,
-    direction: 'out',
+    speed: 100,
+    direction: 'in',
     beat: 0,
   },
   scrollToZoom: true,
@@ -109,6 +111,7 @@ const initialState: VisualStore = {
   listeners: {
     onRandomise: undefined,
   },
+  visible: false,
 }
 
 export const useVisualsStore = defineStore('visuals', {
@@ -134,6 +137,11 @@ export const useVisualsStore = defineStore('visuals', {
     },
 
     randomise() {
+      if (!this.renderer?.isStarted()) {
+        this.start()
+        return
+      }
+
       const siteStore = useSiteStore()
 
       this.randomiseZoom()
@@ -361,8 +369,15 @@ export const useVisualsStore = defineStore('visuals', {
         .setOnRenderTick((_, positionData) => {
           this.tick(positionData)
         })
-        .setOnInit(() => this.syncRotationSpeed())
-        .setOnClick(() => this.randomise())
+        .setOnStart(() => this.syncRotationSpeed())
+        .setOnClick(() => {
+          if (!this.renderer?.isStarted()) {
+            this.start()
+          }
+          else {
+            this.randomise()
+          }
+        })
         .setOnKeyDown((renderer, event) => {
           if (event.code === 'Space') {
             siteStore.tapBpm()
@@ -394,5 +409,26 @@ export const useVisualsStore = defineStore('visuals', {
     removeListener(name: keyof VisualStore['listeners']) {
       this.listeners[name] = undefined
     },
+
+    start() {
+      if (!this.renderer?.isStarted()) {
+        this.listeners.onStart?.()
+        setTimeout(() => {
+          this.autoZoom.speed = 5
+          this.zoom.min = -2
+        }, 500)
+      }
+      this.show()
+    },
+
+    show() {
+      this.visible = true
+    },
+    hide() {
+      this.visible = false
+    },
+    toggleVisible() {
+      this.visible = !this.visible
+    },
   },
 })

stores/visuals.ts

@@ -32,7 +32,8 @@ export class Renderer {
     },
   ) => {}
 
-  protected onInit = (_renderer: this) => {}
+  protected started = false
+  protected onStart = (_renderer: this) => {}
 
   protected getZoom = () => 1
   protected getWidth = () => this.container.clientWidth
@@ -85,8 +86,8 @@ export class Renderer {
     return this
   }
 
-  public setOnInit(onInit: (_renderer: this) => void) {
-    this.onInit = onInit
+  public setOnStart(onStart: (_renderer: this) => void) {
+    this.onStart = onStart
     return this
   }
 
@@ -121,11 +122,19 @@ export class Renderer {
     this.initialiseEventListeners()
 
     this.container.appendChild(this.renderer.domElement)
+    return this
+  }
+
+  public start(): this {
+    if (this.started) {
+      return this
+    }
 
     const geometry = this.getDefaultGeometry().map(mapGeometryAttributes)
     this.placeGeometry(geometry)
 
-    this.onInit(this)
+    this.onStart(this)
+    this.started = true
 
     this.animate()
 
@@ -267,4 +276,8 @@ export class Renderer {
   public getCanvasElement(): HTMLCanvasElement | undefined {
     return this.renderer?.domElement
   }
+
+  public isStarted() {
+    return this.started
+  }
 }

util/3d/renderer.ts

@@ -0,0 +1,9 @@
+import { useVisualsStore } from '~/stores/visuals'
+
+export const useShowBackground = () => {
+  const visualsStore = useVisualsStore()
+
+  onMounted(() => {
+    visualsStore.start()
+  })
+}