maaaany changes!

compsoc-edinburgh · Jan 21, 2024 · 528ba53 · 528ba53
1 parent 1f6c9dd
commit 528ba53
Show file tree

Hide file tree

Showing 12 changed files with 377 additions and 65 deletions.
diff --git a/src/Header/Boids.tsx b/src/Header/Boids.tsx
@@ -13,18 +13,21 @@ interface Boid {
   velocity: Vector
 }
 
-const BOID_COUNT = 50
 const MAX_SPEED = 5
 const SEPARATION_DISTANCE = 50
-const ALIGNMENT_RADIUS = 50
+const ALIGNMENT_RADIUS = 60
 const COHESION_RADIUS = 50
 const BOID_SIZE = 10
+const CURSOR_INFLUENCE_RADIUS = 250
+const CURSOR_INFLUENCE_STRENGTH = 0.5
 
 const Boids: React.FC = () => {
   const [boids, setBoids] = useState<Boid[]>([])
-
+  const [cursorPosition, setCursorPosition] = useState<Vector>({ x: 0, y: 0 })
   const app = useApp()
 
+  const BOID_COUNT = Math.floor(window.innerWidth / 10) // Im not sure if this is a good idea for SUPER high res screens
+
   const stageMargin = 50
 
   useEffect(() => {
@@ -80,7 +83,7 @@ const Boids: React.FC = () => {
     if (total > 0) {
       steer = multiplyVector(steer, 1 / total)
     }
-    return steer
+    return multiplyVector(steer, 1.02)
   }
 
   const alignment = (boid: Boid, neighbors: Boid[]): Vector => {
@@ -90,7 +93,11 @@ const Boids: React.FC = () => {
     })
     if (neighbors.length > 0) {
       averageVel = multiplyVector(averageVel, 1 / neighbors.length)
-      return limitVector(averageVel, MAX_SPEED)
+      const targetVel = addVectors(
+        multiplyVector(averageVel, 0.1),
+        multiplyVector(boid.velocity, 0.9)
+      )
+      return limitVector(targetVel, MAX_SPEED)
     }
     return boid.velocity
   }
@@ -127,12 +134,35 @@ const Boids: React.FC = () => {
       const ali = alignment(boid, getNeighbors(boid, ALIGNMENT_RADIUS))
       const coh = cohesion(boid, getNeighbors(boid, COHESION_RADIUS))
 
-      // Adjust velocity
+      // Adjust velocity based on behaviors
       boid.velocity = addVectors(boid.velocity, sep)
       boid.velocity = addVectors(boid.velocity, ali)
       boid.velocity = addVectors(boid.velocity, coh)
       boid.velocity = limitVector(boid.velocity, MAX_SPEED)
 
+      // Calculate distance to cursor
+      const distanceToCursor = Math.sqrt(
+        Math.pow(boid.position.x - cursorPosition.x, 2) +
+          Math.pow(boid.position.y - cursorPosition.y, 2)
+      )
+
+      // Adjust velocity based on cursor influence
+      if (distanceToCursor < CURSOR_INFLUENCE_RADIUS) {
+        const cursorInfluence = {
+          x: cursorPosition.x - boid.position.x,
+          y: cursorPosition.y - boid.position.y,
+        }
+
+        boid.velocity = addVectors(
+          boid.velocity,
+          multiplyVector(
+            cursorInfluence,
+            CURSOR_INFLUENCE_STRENGTH / distanceToCursor
+          )
+        )
+        boid.velocity = limitVector(boid.velocity, MAX_SPEED)
+      }
+
       // Update position and apply wrap-around
       const newPosition = {
         x: boid.position.x + boid.velocity.x * delta,
@@ -183,7 +213,12 @@ const Boids: React.FC = () => {
   const color = new PIXI.Color(ACCENT_COLOR)
 
   return (
-    <Container>
+    <Container
+      interactive
+      onglobalpointermove={(e) => {
+        setCursorPosition({ x: e.data.global.x, y: e.data.global.y })
+      }}
+      pointerout={() => setCursorPosition({ x: 0, y: 0 })}>
       {boids.map((boid, index) => (
         <Graphics
           key={index}

diff --git a/src/Header/Gravity.tsx b/src/Header/Gravity.tsx
@@ -127,7 +127,23 @@ const Gravity: React.FC = () => {
   const color = new PIXI.Color(ACCENT_COLOR)
 
   return (
-    <Container>
+    <Container
+      interactive
+      hitArea={new PIXI.Rectangle(0, 0, app.screen.width, app.screen.height)}
+      onmousedown={(e) => {
+        console.log(e.data.global.x, e.data.global.y)
+        setPlanets([
+          ...planets,
+          {
+            position: { x: e.data.global.x, y: e.data.global.y },
+            velocity: {
+              x: Math.random() * 1 - 0.5,
+              y: Math.random() * 1 - 0.5,
+            },
+            mass: Math.random() * 10000000,
+          },
+        ])
+      }}>
       {planets.map((planet, index) => (
         <Graphics
           key={index}

diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
@@ -5,9 +5,22 @@ import NextMeeting from '../NextMeetup/NextMeetup'
 import { Stage } from '@pixi/react'
 import Gravity from './Gravity'
 import { ACCENT_COLOR } from '../constants'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import Boids from './Boids'
 
+const StyledStage = styled(Stage)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+
+  @media (max-width: 768px) {
+    pointer-events: none;
+  }
+`
+
 const StyledHeaderWrapper = styled.div`
   outline: 5px solid #7816f4;
   background: repeating-conic-gradient(
@@ -19,8 +32,7 @@ const StyledHeaderWrapper = styled.div`
     50% center / 3px 3px;
   width: inherit;
   margin: 3vw;
-  padding: 3vw;
-  height: 75vh;
+  height: 85vh;
   border-radius: 25px;
   display: flex;
   align-items: center;
@@ -30,7 +42,30 @@ const StyledHeaderWrapper = styled.div`
 `
 
 const Header = () => {
-  const possibleStageBackgrounds = [<Gravity />, <Boids />]
+  const [stageWidth, setStageWidth] = useState<number>(window.innerWidth)
+  const [stageHeight, setStageHeight] = useState<number>(window.innerHeight)
+
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (ref.current) {
+      setStageWidth(ref.current.clientWidth)
+      setStageHeight(ref.current.clientHeight)
+    }
+  }, [ref])
+
+  const possibleStageBackgrounds = [
+    {
+      stage: <Gravity />,
+      creator: 'Tomas Maillo',
+      url: 'https://tomasmaillo.com',
+    },
+    {
+      stage: <Boids />,
+      creator: 'Tomas Maillo',
+      url: 'https://tomasmaillo.com',
+    },
+  ]
 
   const randomStage = useState(
     possibleStageBackgrounds[
@@ -39,7 +74,7 @@ const Header = () => {
   )[0]
 
   return (
-    <StyledHeaderWrapper>
+    <StyledHeaderWrapper ref={ref}>
       <FlippableCard
         key="unique"
         frontContent={
@@ -53,7 +88,13 @@ const Header = () => {
               width: '100%',
             }}>
             <Logo size={120} />
-            <h1 style={{ fontSize: '3.75rem', margin: 0, color: ACCENT_COLOR }}>
+            <h1
+              style={{
+                fontSize: '3.75rem',
+                margin: 0,
+                color: ACCENT_COLOR,
+                userSelect: 'none',
+              }}>
               Project <br />
               Share
             </h1>
@@ -69,22 +110,31 @@ const Header = () => {
         }
       />
 
-      <Stage
-        style={{
-          position: 'absolute',
-          top: '0',
-          left: '0',
-          width: '100%',
-          height: '100%',
-          userSelect: 'none',
-          pointerEvents: 'none',
-          zIndex: 0,
-        }}
-        width={window.innerWidth}
-        height={window.innerHeight}
+      <StyledStage
+        width={stageWidth}
+        height={stageHeight}
         options={{ backgroundAlpha: 0 }}>
-        {randomStage}
-      </Stage>
+        {randomStage.stage}
+      </StyledStage>
+      <div>
+        <a
+          href={randomStage.url}
+          style={{
+            position: 'absolute',
+            bottom: '1rem',
+            right: '1rem',
+            color: ACCENT_COLOR,
+            textDecoration: 'none',
+            userSelect: 'none',
+            background: 'rgba(255, 255, 255, 0.7)',
+            padding: '0rem 0.5rem',
+            fontSize: '0.75rem',
+            borderRadius: '5rem',
+            backdropFilter: 'blur(5px)',
+          }}>
+          interaction by {randomStage.creator}
+        </a>
+      </div>
     </StyledHeaderWrapper>
   )
 }

diff --git a/src/Header/Navbar.tsx b/src/Header/Navbar.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react'
 import { styled } from 'styled-components'
 import { useNavigate } from 'react-router-dom'
 import { DISCORD_INVITE_LINK } from '../constants'
+import WavyText from '../components/WavyText'
 
 const StyledNavbar = styled.div`
   border: 5px solid #7816f4;
@@ -108,7 +109,7 @@ const Navbar = () => {
         href={DISCORD_INVITE_LINK}
         onMouseEnter={(e: any) => setHoveredItem(e.currentTarget)}
         onMouseLeave={() => setHoveredItem(null)}>
-        Discord
+        <WavyText text="Discord" />
       </NavbarItem>
     </StyledNavbar>
   )

diff --git a/src/NextMeetup/NextMeetup.tsx b/src/NextMeetup/NextMeetup.tsx
@@ -4,6 +4,7 @@ import Dot from '../components/Dot'
 import BouncingEllipsis from '../components/BouncingEllipsis'
 import { useEffect, useState } from 'react'
 import NumberFlipper from './NumberFlipper'
+import WavyText from '../components/WavyText'
 
 const StyledWrapper = styled.div`
   position: relative;
@@ -26,7 +27,7 @@ const StyledDetail = styled.p`
   margin: 0;
   display: flex;
   align-items: center;
-  gap: 0.5ch;
+  gap: 1rem;
 `
 
 const NextMeetingIsTBC = () => (
@@ -70,11 +71,46 @@ const NextMeeting = () => {
   return (
     <StyledWrapper>
       <StyledDetail>
-        Next meetup
-        <Dot />
-        <NumberFlipper value={hours} precision={hours.toString().length} /> hrs
-        <NumberFlipper value={minutes} precision={2} /> min
-        <NumberFlipper value={seconds} precision={2} /> sec
+        <div
+          style={{
+            fontSize: '1.5rem',
+            margin: 0,
+            lineHeight: 1.4,
+            userSelect: 'none',
+            textAlign: 'right',
+            display: 'flex',
+            flexDirection: 'column',
+          }}>
+          <WavyText text="Next" />
+          <WavyText text="meet-up" />
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'left',
+            flexDirection: 'column',
+          }}>
+          <span>{NEXT_MEETUP.location}</span>
+          <span>
+            {NEXT_MEETUP.date.toLocaleDateString('en-GB', {
+              weekday: 'short',
+              year: 'numeric',
+              month: 'short',
+              day: 'numeric',
+            })}
+          </span>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.5ch',
+            }}>
+            <NumberFlipper value={hours} precision={hours.toString().length} />{' '}
+            hrs
+            <NumberFlipper value={minutes} precision={2} /> min
+            <NumberFlipper value={seconds} precision={2} /> sec
+          </div>
+        </div>
       </StyledDetail>
     </StyledWrapper>
   )