Random seed and little tweaks

This commit is contained in:
Hayk Martiros 2022-11-24 23:26:44 -08:00
parent c5a1ef7fd1
commit a4d69e7594
5 changed files with 41 additions and 28 deletions

View File

@ -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>

View File

@ -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>
);

View File

@ -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

View File

@ -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">
{tonePlayer && (
<ThreeCanvas
paused={paused}
getTime={() => Tone.Transport.seconds}
audioLength={
tonePlayer ? tonePlayer.sampleTime * tonePlayer.buffer.length : 5
}
audioLength={tonePlayer.sampleTime * tonePlayer.buffer.length}
inferenceResults={inferenceResults}
/>
)}
</div>
<PromptPanel

View File

@ -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);
}
`;