From d4bea5bc3be486c552b172e2a482c65f4b9fbe07 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Sun, 19 Jun 2022 16:05:43 -0700
Subject: [PATCH] Birds are flocking!

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/Bird.css |  4 ++--
 client/src/Bird.js  | 56 ++++++++++++++++++---------------------------
 2 files changed, 24 insertions(+), 36 deletions(-)

diff --git a/client/src/Bird.css b/client/src/Bird.css
index 6d5de8d..2349307 100644
--- a/client/src/Bird.css
+++ b/client/src/Bird.css
@@ -1,11 +1,11 @@
 .Flock {
-  z-index: 50;
+  z-index: 5000;
   position: relative;
   top: 5rem;
   left: 10rem;
   width: 20rem;
   height: 20rem;
-  border: 1px solid purple;
+  pointer-events: none;
 }
 
 .Bird {
diff --git a/client/src/Bird.js b/client/src/Bird.js
index f281e8c..0483a40 100644
--- a/client/src/Bird.js
+++ b/client/src/Bird.js
@@ -23,10 +23,12 @@ const useAnimationFrame = callback => {
   }, []); // Make sure the effect runs only once
 }
 
-const Bird = ({ origin, radius, speed, angle, size, style }) => {
+const Bird = ({ origin, radius, speed, size, style }) => {
   const [time, setTime] = useState(0);
-  const [rotation] = useState(Math.PI * 2 * radius / speed);
-  const [direction] = useState(Math.floor(birdAngles * (angle ? angle : 0) / 360.));
+  const [angle, setAngle] = useState(Math.random() * 360.);
+  const [rotation] = useState(Math.PI * 2 * radius / 5);
+  const [direction, setDirection] = useState(Math.floor(birdAngles * (angle ? angle : 0) / 360.));
+  
   const [cell, setCell] = useState(0);
 
   const previousTimeRef = React.useRef();
@@ -43,19 +45,27 @@ const Bird = ({ origin, radius, speed, angle, size, style }) => {
   useEffect(() => {
     const alpha = (time % speed) / speed;
     const frame = Math.floor(frames.length * alpha);
-    console.log({ alpha, frame });
+    const newAngle = (angle + rotation) % 360.;
+    setAngle(newAngle);
     setCell(frames[Math.floor(frame)]);
-  }, [time, setCell, speed]);
+    setDirection(Math.floor(birdAngles * newAngle / 360.));
+  }, [time, setCell, speed, rotation, setDirection]);
+
+  useEffect(() => {
+    
+  }, [angle]);
 
   return <div className={`Bird`}
     style={{
-      //top: ${origin.x + radius * }
+      top: `${50 + 100 * radius * Math.sin(2 * Math.PI * (180 + angle) / 360.)}%`,
+      left: `${50 + 100 * radius * Math.cos(2 * Math.PI * (180 + angle) / 360.)}%`,
       width: `${size * 64}px`,
       height: `${size * 64}px`,
       backgroundImage: `url(${assetsPath}/gfx/birds.png)`,
       backgroundPositionX: `${100 * direction / 11}%`,
       backgroundPositionY: `${100 * cell / 3}%`,
-      transform: `translate(-50%, -50%)`,
+      transformOrigin: `50% 50%`,
+      transform: `translate(-50%, -50%) rotate(${angle % 30}deg)`,
       ...style
     }}
   />;
@@ -66,36 +76,14 @@ const Flock = ({count}) => {
   useEffect(() => {
     const tmp = [];
     for (let i = 0; i < count; i++) {
+      const scalar = Math.random();
       tmp.push(<Bird 
-        speed={500 + Math.random() * 1000} 
-        size={0.2 + Math.random() * 0.15}
-        angle={Math.random() * 360}
+        speed={1000. + 250 * scalar} 
+        size={0.2 + scalar * 0.25}
+        radius={0.1 + scalar * 0.35}
         key={i}
-        style={{
-          left: `${Math.random() * 100}%`,
-          top: `${ Math.random() * 100}%`,
-        }}/>)
+        />)
     }
-    tmp.push(<Bird 
-      speed={500 + Math.random() * 1000} 
-      size={0.2 + Math.random() * 0.15}
-      angle={Math.random() * 360}
-      key={count+1}
-      style={{
-        left: `0%`,
-        top: `0%`,
-        border: `1px solid orange`
-      }}/>);
-    tmp.push(<Bird
-      speed={500 + Math.random() * 1000} 
-      size={0.2 + Math.random() * 0.15}
-      angle={Math.random() * 360}
-      key={count + 2}
-      style={{
-        left: `100%`,
-        top: `100%`,
-        border: `1px solid green`
-      }} />);
     setBirds(tmp);
   }, [count, setBirds]);