feat: brownian distribution geometries on background

components/content/brownian-distribution/BrownianDistributionExperiment.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Imagotype from './Imagotype.vue';
+import BrownianDistributionGroup from './BrownianDistributionGroup.vue'
 </script>
 
 <template>
@@ -13,6 +14,7 @@ import Imagotype from './Imagotype.vue';
   <OrbitControls />
   <TresAmbientLight :intensity="0.5" />
   <Imagotype />
+  <BrownianDistributionGroup />
   <TresDirectionalLight
     :position="[0, 8, 4]"
     :intensity="0.7"

components/content/brownian-distribution/BrownianDistributionGroup.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { MathUtils, Vector3, Euler } from 'three'
+import { colors } from './constants'
+import { BoxGeometry, CylinderGeometry, SphereGeometry, MeshToonMaterial } from 'three'
+const { lerp } = MathUtils
+const COUNT = 2000
+
+const brownian = (stepSize: number, xMin: number, xMax: number, yMin: number, yMax: number, zMin: number, zMax: number) => {
+  let x = 0; let y = 0; let z = 0
+  const r = () => (Math.random() - 0.5) * 2 * stepSize
+  const isInBounds = () => xMin < x && x < xMax && yMin < y && y < yMax && zMin < z && z < zMax
+  const reset = () => {
+    x = lerp(xMin, xMax, Math.random())
+    y = lerp(yMin, yMax, Math.random())
+    z = lerp(zMin, zMax, Math.random())
+  }
+  reset()
+  return () => {
+    x += r()
+    y += r()
+    z += r()
+    if (!isInBounds()) { reset() }
+    return [x, y, z]
+  }
+}
+
+const sphereGeometry = new SphereGeometry()
+const cubeGeometry = new BoxGeometry()
+const pyramidGeometry = new CylinderGeometry(0, 0.6, 1)
+
+const mainMaterial = new MeshToonMaterial({
+  color: colors.DARK,
+})
+
+const hoverMaterial = new MeshToonMaterial({
+  color: colors.YELLOW,
+})
+
+const getPosition = brownian(2, -60, 60, -40, 40, -30, 0)
+const getRotation = brownian(1, -20, 20, -10, 10, -20, 0)
+const objectPositions = Array.from({ length: COUNT }).map(() => new Vector3(...getPosition()))
+const objectRotations = Array.from({ length: COUNT }).map(() => new Euler(...getRotation()))
+
+function onPointerEnter(ev: ThreeEvent<PointerEvent>) {
+  if (ev.eventObject.material !== hoverMaterial) {
+    ev.eventObject.userData.material = ev.eventObject.material
+  }
+  ev.eventObject.material = hoverMaterial
+}
+
+function onPointerLeave(ev: ThreeEvent<PointerEvent>) {
+  ev.eventObject.material = ev.eventObject.userData.material ?? mainMaterial
+}
+</script>
+
+<template>
+  <TresGroup :position="[0, 0, -30]">
+    <TresGroup :position="[0, 0, -30]">
+      <TresMesh
+        v-for="position, i of objectPositions"
+        :key="i"
+        :geometry="[sphereGeometry, cubeGeometry, pyramidGeometry][i % 3]"
+        :material="mainMaterial"
+        :position="position"
+        :rotation="objectRotations[i]"
+        @pointer-enter="onPointerEnter"
+        @pointer-leave="onPointerLeave"
+      />
+    </TresGroup>
+  </TresGroup>
+</template>

components/content/brownian-distribution/Imagotype.vue

@@ -1,19 +1,7 @@
 <script setup lang="ts">
+import { PI, colors } from './constants'
 import { MathUtils } from 'three'
-
-const PI = Math.PI
-const { clamp, lerp } = MathUtils
-
-const colors = {
-  TEAL: '#7fdac6',
-  ORANGE: '#eeac35',
-  PURPLE: '#9b51e0',
-  YELLOW: '#f7d060',
-  BLUE: '#00b4d8',
-  RED: '#ef476f',
-  DARK: '#1e1f22',
-  LIGHT: '#f8f8f8',
-}
+const { clamp } = MathUtils
 
 const pyramidRef = ref()
 const boxRef = ref()
@@ -22,6 +10,7 @@ const sphereRef = ref()
 const { onBeforeRender } = useLoop()
 
 onBeforeRender(({ elapsed }) => {
+  if (!pyramidRef.value || !boxRef.value || !sphereRef.value) return
   elapsed = elapsed * 3 + 7
   pyramidRef.value.position.y = Math.tan(clamp((1 + elapsed) % 9, 0, PI))
   boxRef.value.position.y = Math.tan(clamp((0.5 + elapsed) % 9, 0, PI))

components/content/brownian-distribution/constants.ts

@@ -0,0 +1,13 @@
+
+export const colors = {
+  TEAL: '#7fdac6',
+  ORANGE: '#eeac35',
+  PURPLE: '#9b51e0',
+  YELLOW: '#f7d060',
+  BLUE: '#00b4d8',
+  RED: '#ef476f',
+  DARK: '#1e1f22',
+  LIGHT: '#f8f8f8',
+}
+
+export const PI = Math.PI