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
; @@ -66,36 +76,14 @@ const Flock = ({count}) => { useEffect(() => { const tmp = []; for (let i = 0; i < count; i++) { + const scalar = Math.random(); tmp.push(