Random seed and little tweaks

components/ImagePlane.tsx

@@ -5,6 +5,7 @@ import { useLoader } from "@react-three/fiber";
 interface ImagePlaneProps {
   url: string;
   height: number;
+  duration: number;
 }
 
 /**
@@ -16,7 +17,7 @@ export default function ImagePlane(props: ImagePlaneProps) {
   return (
     <Suspense fallback={null}>
       <mesh rotation-z={-Math.PI / 2} position-y={props.height}>
-        <planeGeometry attach="geometry" args={[5, 5]} />
+        <planeGeometry attach="geometry" args={[props.duration, 5]} />
         <meshBasicMaterial attach="material" map={texture} />
       </mesh>
     </Suspense>

components/SpectrogramViewer.tsx

@@ -1,6 +1,6 @@
 import { useRef } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
-import { QuadraticBezierLine, Plane } from "@react-three/drei";
+import { Box } from "@react-three/drei";
 
 import { InferenceResult } from "../types";
 import HeightMapImage from "./HeightMapImage";
@@ -54,28 +54,26 @@ export default function SpectrogramViewer({
             />
           );
         } else {
-          return <ImagePlane url={value.image} height={height} key={index} />;
+          return (
+            <ImagePlane
+              url={value.image}
+              height={height}
+              duration={audioLength}
+              key={index}
+            />
+          );
         }
       })}
 
       {/* TODO make into playhead component */}
       <group ref={playheadRef}>
-        <Plane
-          args={[5.5, 2.0]}
+        <Box
+          args={[5.5, 2.0, 0.15]}
           rotation={[Math.PI / 2 - 0.4, 0, 0]}
           position={[0, 0, -0.5]}
         >
-          <meshBasicMaterial color="#ee2211" transparent opacity={0.8} />
-        </Plane>
-
-        {/* <QuadraticBezierLine
-          start={[-3, 0, 1]} // Starting point, can be an array or a vec3
-          end={[3, 0, 1]} // Ending point, can be an array or a vec3
-          mid={[0, -0.8, 0.4]} // Optional control point, can be an array or a vec3
-          color="#DD1C1A" // Default
-          lineWidth={5} // In pixels (default)
-          dashed={false} // Default
-        /> */}
+          <meshBasicMaterial color="#ee2211" transparent opacity={0.7} />
+        </Box>
       </group>
     </group>
   );

components/ThreeCanvas.tsx

@@ -20,7 +20,7 @@ export default function ThreeCanvas({
   audioLength,
 }: CanvasProps) {
   return (
-    <Canvas camera={{ position: [0, 0, 10], rotation: [0.4, 0, 0] }}>
+    <Canvas camera={{ position: [0, 0, 8], rotation: [0.4, 0, 0] }}>
       <ambientLight intensity={2} />
       <pointLight position={[40, 40, 40]} />
       <SpectrogramViewer

pages/index.tsx

@@ -40,6 +40,10 @@ const urlToBase64 = async (url: string) => {
   });
 };
 
+function getRandomInt(max: number) {
+  return Math.floor(Math.random() * max);
+}
+
 // TODO(hayk): Do this as soon as sample comes back
 const timeout = 5000;
 const maxLength = 10;
@@ -66,7 +70,7 @@ export default function Home() {
   const [resultCounter, setResultCounter] = useState(0);
 
   const [alpha, setAlpha] = useState(0.0);
-  const [seed, setSeed] = useState(0);
+  const [seed, setSeed] = useState(getRandomInt(1000000));
 
   const [appState, setAppState] = useState<AppState>(AppState.SamePrompt);
 
@@ -134,7 +138,8 @@ export default function Home() {
       Tone.Transport.scheduleRepeat((time) => {
         console.log(
           "Edge of clip, t = ",
-          Tone.Transport.getSecondsAtTime(time)
+          Tone.Transport.getSecondsAtTime(time),
+          bufferLength
         );
         setNumClipsPlayed((n) => n + 1);
       }, bufferLength);
@@ -346,14 +351,14 @@ export default function Home() {
 
       <div className="bg-[#0A2342] flex flex-row min-h-screen text-white">
         <div className="w-1/3 min-h-screen">
-          <ThreeCanvas
-            paused={paused}
-            getTime={() => Tone.Transport.seconds}
-            audioLength={
-              tonePlayer ? tonePlayer.sampleTime * tonePlayer.buffer.length : 5
-            }
-            inferenceResults={inferenceResults}
-          />
+          {tonePlayer && (
+            <ThreeCanvas
+              paused={paused}
+              getTime={() => Tone.Transport.seconds}
+              audioLength={tonePlayer.sampleTime * tonePlayer.buffer.length}
+              inferenceResults={inferenceResults}
+            />
+          )}
         </div>
 
         <PromptPanel

shaders.js

@@ -54,7 +54,16 @@ void main()
     // Get the color of the fragment from the texture map
     // at that coordinate in the UV mapping
     vec4 source = texture2D(terrainTexture, vUV);
-    gl_FragColor = vec4(source.r - 0.05, source.g - 0.05, source.b + 0.1, 1.0);
+
+    float x = vUV.x;
+    float y = vUV.y;
+
+    float r = source.r - 0.05 - 0.0 * sin(x * 3.14 * 0.5);
+
+    float g = source.g - 0.05 - 0.05 * sin(y * 10.0);
+    float b = source.b + 0.1 - 0.05 * sin(y * 10.0);
+
+    gl_FragColor = vec4(r, g, b, 1.0);
 }
 
 `;