jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Birds are flocking!

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-06-19 16:05:43 -07:00
parent abbbbafad4
commit d4bea5bc3b
2 changed files with 24 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/Bird.css
View File

@ -1,11 +1,11 @@
.Flock { .Flock {
z-index: 50; z-index: 5000;
position: relative; position: relative;
top: 5rem; top: 5rem;
left: 10rem; left: 10rem;
width: 20rem; width: 20rem;
height: 20rem; height: 20rem;
border: 1px solid purple; pointer-events: none;
} }
.Bird { .Bird {

56
client/src/Bird.js
View File

@ -23,10 +23,12 @@ const useAnimationFrame = callback => {
}, []); // Make sure the effect runs only once }, []); // 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 [time, setTime] = useState(0);
const [rotation] = useState(Math.PI * 2 * radius / speed); const [angle, setAngle] = useState(Math.random() * 360.);
const [direction] = useState(Math.floor(birdAngles * (angle ? angle : 0) / 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 [cell, setCell] = useState(0);
const previousTimeRef = React.useRef(); const previousTimeRef = React.useRef();
@ -43,19 +45,27 @@ const Bird = ({ origin, radius, speed, angle, size, style }) => {
useEffect(() => { useEffect(() => {
const alpha = (time % speed) / speed; const alpha = (time % speed) / speed;
const frame = Math.floor(frames.length * alpha); const frame = Math.floor(frames.length * alpha);
console.log({ alpha, frame }); const newAngle = (angle + rotation) % 360.;
setAngle(newAngle);
setCell(frames[Math.floor(frame)]); 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`} return <div className={`Bird`}
style={{ 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`, width: `${size * 64}px`,
height: `${size * 64}px`, height: `${size * 64}px`,
backgroundImage: `url(${assetsPath}/gfx/birds.png)`, backgroundImage: `url(${assetsPath}/gfx/birds.png)`,
backgroundPositionX: `${100 * direction / 11}%`, backgroundPositionX: `${100 * direction / 11}%`,
backgroundPositionY: `${100 * cell / 3}%`, backgroundPositionY: `${100 * cell / 3}%`,
transform: `translate(-50%, -50%)`, transformOrigin: `50% 50%`,
transform: `translate(-50%, -50%) rotate(${angle % 30}deg)`,
...style ...style
}} }}
/>; />;
@ -66,36 +76,14 @@ const Flock = ({count}) => {
useEffect(() => { useEffect(() => {
const tmp = []; const tmp = [];
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
const scalar = Math.random();
tmp.push(<Bird tmp.push(<Bird
speed={500 + Math.random() * 1000} speed={1000. + 250 * scalar}
size={0.2 + Math.random() * 0.15} size={0.2 + scalar * 0.25}
angle={Math.random() * 360} radius={0.1 + scalar * 0.35}
key={i} 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); setBirds(tmp);
}, [count, setBirds]); }, [count, setBirds]);