fluid blob animation

- integrated with openai
borozcod · Sep 29, 2024 · bc92726 · bc92726
1 parent 4037362
commit bc92726
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 45 deletions.
diff --git a/pages/_document.js b/pages/_document.js
@@ -8,7 +8,6 @@ class MyDocument extends Document {
           <link rel="preconnect" href="https://fonts.googleapis.com"/>
           <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
           <link href="https://fonts.googleapis.com/css2?family=K2D:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet"/>
-          <script src="https://kit.fontawesome.com/845c3f8735.js" crossOrigin="anonymous" async></script>
         </Head>
         <body>
           <Main />

diff --git a/src/app/components/Blob.js b/src/app/components/Blob.js
@@ -3,12 +3,10 @@ import React, { useRef, forwardRef, useEffect } from 'react';
 import { Canvas, useFrame, useLoader, extend } from '@react-three/fiber';
 import { OrbitControls, shaderMaterial } from '@react-three/drei';
 import * as THREE from 'three';
-import { catBlob } from './blobs/cat.js';
 import { noise } from './shaders/noise.js';
-import { gsap } from 'gsap';
 
 const BlobMaterial = shaderMaterial(
-  { uTexture: null, uTime: 0, uHover: 0, uMouse: [0, 0], uLoad: true, uIntensity: 0.0 },
+  { uTexture: null, uTime: 0, uHover: 0, uMouse: [0, 0], uLoad: true, uIntensity: 0.3 },
   noise + `
   varying vec2 vUv;
   uniform float uTime;
@@ -58,13 +56,11 @@ const BlobMaterial = shaderMaterial(
 );
 
 extend({ BlobMaterial });
-export const LiveBlob = forwardRef(({ base64Data }, ref) => {
+export const LiveBlob = forwardRef((props, ref) => {
   const AIImage = () => {
 
     const geometry = new THREE.CircleGeometry(1, 500);
-
-    const texture = useLoader(THREE.TextureLoader, (base64Data ? base64Data : catBlob));
-
+
     useFrame(({ clock }) => {
       if (ref.current) {
         ref.current.uniforms.uTime.value = clock.getElapsedTime();
@@ -74,7 +70,7 @@ export const LiveBlob = forwardRef(({ base64Data }, ref) => {
     return (
       <>
         <mesh position={[0, 0, 0]} geometry={geometry} >
-          <blobMaterial ref={ref} uTexture={texture} transparent />
+          <blobMaterial ref={ref} transparent />
         </mesh>
       </>
     );
@@ -89,7 +85,4 @@ export const LiveBlob = forwardRef(({ base64Data }, ref) => {
       </Canvas>
     </>
   );
-});
-
-// Add the displayName for easier debugging
-LiveBlob.displayName = "LiveBlob";
+});
diff --git a/src/app/components/blobs/cat.js b/src/app/components/blobs/cat.js
diff --git a/src/app/components/blobs/wizard.js b/src/app/components/blobs/wizard.js
diff --git a/src/app/elements/InputField.js b/src/app/elements/InputField.js
@@ -2,23 +2,25 @@
 "use client";
 import React, { useState } from 'react';
 
-const InputField = ({ type = 'text', generateImage, loading }) => {
+const InputField = ({ type = 'text', generateImage }) => {
   const [value, setValue] = useState('');
+  const [loading, setLoading] = useState('');
 
   const handleChange = (e) => {
     setValue(e.target.value);
   };
 
   const generateNewImage = () => {
-    generateImage(value);
+    setLoading(true)
+    generateImage(value, ()=> {
+      setLoading(false)
+    });
   };
 
   return (
     <div className='pa2'>
       <div className='flex items-stretch'>
-          <button className='button-reset br3 br--left input-reset white bg-gold bn ph3 '>
-              <i className="fas fa-star-of-life"></i> turn into
-          </button>
+          <button className='button-reset br3 br--left input-reset white bg-gold bn ph3 '>turn into</button>
           <input
               type={type}
               placeholder="| a cat jumpping in space"

diff --git a/src/app/page.js b/src/app/page.js
@@ -2,44 +2,40 @@
 import { useState, useRef, useEffect } from 'react';
 import { LiveBlob } from './components/Blob'
 import InputField from './elements/InputField'
-import { useLoader } from '@react-three/fiber';
 import 'tachyons/css/tachyons.min.css';
 import "./globals.css";
 import { getDALLEImage } from './../openaiService.js'
 import { gsap } from 'gsap';
-import { catBlob } from './components/blobs/cat.js';
-
+import * as THREE from 'three';
 
 export default function Home() {
-
-  const [base64Data, setBase64Data] = useState('');
-
+
   const blobRef = useRef(null);
-  // useEffect(() => {
-  //   if(blobRef.current){
-  //     blobRef.current.uniforms.uTexture.value =  "data:image/png;base64," + catBlob;
-  //   }
-  // }, [blobRef.current]);
-
-  const generateImage = async (prompt) => {
+  const generateImage = async (prompt, cb) => {
+
     try {
-
-      blobRef['texture'] = catBlob;
-      //const blob = await getDALLEImage(prompt);
-      //setBase64Data(blob)
 
       gsap.to(blobRef.current.uniforms.uIntensity, {
         duration: 2,
         value: 1.0,
         ease: 'expo.inOut',
-        onStart: () => {
-          //blobRef.current.uniforms.uTexture.value = catBlob;
-        },
-        onUpdate: () => {
-          console.log(blobRef.current.uniforms.uIntensity.value);
-        },
-      });
+        onComplete: async () => {
+          const aiImage = await getDALLEImage(prompt);
+          const texture = new THREE.TextureLoader().load("data:image/png;base64," + aiImage)
+          texture.needsUpdate = true
 
+          gsap.to(blobRef.current.uniforms.uIntensity, {
+            duration: 2,
+            value: 0.0,
+            ease: 'expo.inOut',
+            onStart: () => {
+              blobRef.current.uniforms.uTexture.value =  texture;
+            },
+            onComplete: () => {cb()}
+          });
+        }
+      });
+
     } catch (error) {
       console.error('Error generating image:', error);
     }
@@ -52,7 +48,6 @@ export default function Home() {
               <div className="cf ph2-ns">
                   <div className="pv4">
                     <h1 className="gold">Hola</h1>
-                    <p>{base64Data}</p>
                     <p>I’m Bryan Orozco, a Software Developer based out of Los Angeles California. </p>
                   </div>
                   <InputField generateImage={generateImage} />