Updates for ribbon material

dcyoung · Feb 16, 2024 · 2601054 · 2601054
1 parent 4bafab5
commit 2601054
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 61 deletions.
diff --git a/app/src/components/canvas/AutoOrbitCamera.tsx b/app/src/components/canvas/AutoOrbitCamera.tsx
@@ -0,0 +1,120 @@
+import { useVisualContext } from "@/context/visual";
+import { useFrame, useThree } from "@react-three/fiber";
+import { Spherical, type Vector3 } from "three";
+
+const setFromSphericalZUp = (vec: Vector3, s: Spherical) => {
+  const sinPhiRadius = Math.sin(s.phi) * s.radius;
+  vec.x = sinPhiRadius * Math.sin(s.theta);
+  vec.z = Math.cos(s.phi) * s.radius;
+  vec.y = sinPhiRadius * Math.cos(s.theta);
+  return vec;
+};
+
+const useSphericalLimits = () => {
+  const { visual } = useVisualContext();
+  // r     is the Radius
+  // theta is the equator angle
+  // phi is the polar angle
+  switch (visual) {
+    case "ribbons":
+      return {
+        rMin: 10,
+        rMax: 15,
+        rSpeed: 0.1,
+        thetaMin: Math.PI / 8,
+        thetaMax: 2 * Math.PI - Math.PI / 8,
+        thetaSpeed: 0.025,
+        phiMin: Math.PI / 3,
+        phiMax: Math.PI / 2.1,
+        phiSpeed: 0.25,
+      };
+    case "sphere":
+      return {
+        rMin: 10,
+        rMax: 15,
+        rSpeed: 0.1,
+        thetaMin: 0,
+        thetaMax: 2 * Math.PI,
+        thetaSpeed: 0.025,
+        phiMin: Math.PI / 3,
+        phiMax: Math.PI / 2,
+        phiSpeed: 0.25,
+      };
+    case "cube":
+      return {
+        rMin: 12,
+        rMax: 20,
+        rSpeed: 0.1,
+        thetaMin: 0,
+        thetaMax: 2 * Math.PI,
+        thetaSpeed: 0.025,
+        phiMin: Math.PI / 4,
+        phiMax: Math.PI / 2,
+        phiSpeed: 0.25,
+      };
+    case "diffusedRing":
+      return {
+        rMin: 10,
+        rMax: 18,
+        rSpeed: 0.1,
+        thetaMin: 0,
+        thetaMax: 2 * Math.PI,
+        thetaSpeed: 0.025,
+        phiMin: Math.PI / 8,
+        phiMax: Math.PI / 2.25,
+        phiSpeed: 0.25,
+      };
+    case "boxes":
+    case "dna":
+    case "grid":
+      return {
+        rMin: 15,
+        rMax: 22,
+        rSpeed: 0.1,
+        thetaMin: 0,
+        thetaMax: 2 * Math.PI,
+        thetaSpeed: 0.025,
+        phiMin: Math.PI / 3,
+        phiMax: Math.PI / 2,
+        phiSpeed: 0.25,
+      };
+    default:
+      return visual satisfies never;
+  }
+};
+
+export const AutoOrbitCameraControls = () => {
+  const camera = useThree((state) => state.camera);
+  // r     is the Radius
+  // theta is the equator angle
+  // phi is the polar angle
+  const {
+    rMin,
+    rMax,
+    rSpeed,
+    thetaMin,
+    thetaMax,
+    thetaSpeed,
+    phiMin,
+    phiMax,
+    phiSpeed,
+  } = useSphericalLimits();
+  const target = new Spherical();
+
+  useFrame(({ clock }) => {
+    const t = clock.elapsedTime;
+
+    const rAlpha = 0.5 * (1 + Math.sin(t * rSpeed));
+    const r = rMin + rAlpha * (rMax - rMin);
+
+    const thetaAlpha = 0.5 * (1 + Math.cos(t * thetaSpeed));
+    const theta = thetaMin + thetaAlpha * (thetaMax - thetaMin);
+
+    const phiAlpha = 0.5 * (1 + Math.cos(t * phiSpeed));
+    const phi = phiMin + phiAlpha * (phiMax - phiMin);
+
+    setFromSphericalZUp(camera.position, target.set(r, phi, theta));
+    camera.lookAt(0, 0, 0);
+  });
+  return null;
+};
diff --git a/app/src/components/canvas/Visual3D.tsx b/app/src/components/canvas/Visual3D.tsx
@@ -12,9 +12,9 @@ import { useVisualContext } from "@/context/visual";
 import { APPLICATION_MODE } from "@/lib/applicationModes";
 import { useUser } from "@/lib/appState";
 import { OrbitControls } from "@react-three/drei";
-import { Canvas, useFrame, useThree } from "@react-three/fiber";
-import { Spherical, type Vector3 } from "three";
+import { Canvas, useFrame } from "@react-three/fiber";
 
+import { AutoOrbitCameraControls } from "./AutoOrbitCamera";
 import { PaletteTracker } from "./paletteTracker";
 
 const VisualizerComponent = ({
@@ -37,42 +37,6 @@ const VisualizerComponent = ({
   }
 };
 
-const setFromSphericalZUp = (vec: Vector3, s: Spherical) => {
-  const sinPhiRadius = Math.sin(s.phi) * s.radius;
-  vec.x = sinPhiRadius * Math.sin(s.theta);
-  vec.z = Math.cos(s.phi) * s.radius;
-  vec.y = sinPhiRadius * Math.cos(s.theta);
-  return vec;
-};
-
-const AutoOrbitCameraControls = () => {
-  const camera = useThree((state) => state.camera);
-  // r     is the Radius
-  // theta is the equator angle
-  // phi is the polar angle
-  const [rMin, rMax, rSpeed] = [15, 22, 0.1];
-  const [thetaMin, thetaMax, thetaSpeed] = [0, 2 * Math.PI, 0.025];
-  const [phiMin, phiMax, phiSpeed] = [Math.PI / 3, Math.PI / 2, 0.25];
-  const target = new Spherical();
-
-  useFrame(({ clock }) => {
-    const t = clock.elapsedTime;
-
-    const rAlpha = 0.5 * (1 + Math.sin(t * rSpeed));
-    const r = rMin + rAlpha * (rMax - rMin);
-
-    const thetaAlpha = 0.5 * (1 + Math.cos(t * thetaSpeed));
-    const theta = thetaMin + thetaAlpha * (thetaMax - thetaMin);
-
-    const phiAlpha = 0.5 * (1 + Math.cos(t * phiSpeed));
-    const phi = phiMin + phiAlpha * (phiMax - phiMin);
-
-    setFromSphericalZUp(camera.position, target.set(r, phi, theta));
-    camera.lookAt(0, 0, 0);
-  });
-  return null;
-};
-
 const CameraControls = () => {
   const { mode, autoOrbitAfterSleepMs } = useCameraControlsContext();
   const { setMode } = useCameraControlsContextSetters();

diff --git a/app/src/components/visualizers/ribbons/base.tsx b/app/src/components/visualizers/ribbons/base.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from "react";
+import { useMemo, useRef } from "react";
 import { usePalette } from "@/lib/appState";
 import {
   COORDINATE_TYPE,
@@ -15,12 +15,14 @@ const BaseRibbons = ({
   ribbonHeight = 10,
   ribbonWidthSegments = 1,
   ribbonHeightSegments = 64,
+  zScale = 2,
 }: {
   coordinateMapper: ICoordinateMapper;
   ribbonWidth?: number;
   ribbonHeight?: number;
   ribbonWidthSegments?: number;
   ribbonHeightSegments?: number;
+  zScale?: number;
 }) => {
   const ribbonRefs = [
     useRef<Mesh>(null!),
@@ -38,26 +40,20 @@ const BaseRibbons = ({
       new Vector3(gridHalfWidth - ribbonWidth * i - ribbonWidth / 2, 0, 0),
   );
   const palette = usePalette();
-  const lut = ColorPalette.getPalette(palette).buildLut();
+  const colorPalette = ColorPalette.getPalette(palette);
+  // const lut = ColorPalette.getPalette(palette).buildLut();
 
   const material = useMemo(() => {
     return (
-      <meshPhysicalMaterial
-        color={lut.getColor(0.25).getHex()}
-        clearcoat={1.0}
-        clearcoatRoughness={0}
-        metalness={0.5}
+      <meshStandardMaterial
+        color={colorPalette.colorsHex[Math.floor(colorPalette.nColors / 2)]}
+        roughness={0.25}
+        metalness={0.25}
         side={DoubleSide}
+        flatShading={false}
       />
     );
-  }, [lut]);
-
-  // Recolor
-  useEffect(() => {
-    if (!lut) {
-      return;
-    }
-  });
+  }, [colorPalette]);
 
   useFrame(({ clock }) => {
     //in ms
@@ -78,13 +74,15 @@ const BaseRibbons = ({
           normX = (ribbonIdx + 0.5) / ribbonCount;
           normY = (h + 0.5) / ribbonHeightSegments;
           vIdx = h * (ribbonWidthSegments + 1) + w;
-          z = coordinateMapper.map(
-            COORDINATE_TYPE.CARTESIAN_2D,
-            normX,
-            normY,
-            0,
-            elapsedTimeSec,
-          );
+          z =
+            zScale *
+            coordinateMapper.map(
+              COORDINATE_TYPE.CARTESIAN_2D,
+              normX,
+              normY,
+              0,
+              elapsedTimeSec,
+            );
 
           positionsBuffer.setZ(vIdx, z * alpha);
         }
@@ -97,6 +95,7 @@ const BaseRibbons = ({
   return (
     <>
       <ambientLight />
+      <pointLight position={[2, 2, 5]} intensity={150} />
       <Plane
         args={[planeSize / 2, planeSize, 1, 1]}
         position={[gridHalfWidth + planeSize / 4, 0, 0]}

diff --git a/app/src/components/visualizers/ribbons/reactive.tsx b/app/src/components/visualizers/ribbons/reactive.tsx
@@ -3,7 +3,6 @@ import { type VisualProps } from "@/components/visualizers/common";
 import BaseRibbons from "./base";
 
 const RibbonsVisual = ({ coordinateMapper }: VisualProps) => {
-  // const {} = useRibbonsVisualConfigContext();
   return (
     <>
       <BaseRibbons coordinateMapper={coordinateMapper} />