Boids!

RexMortem · RexMortem · commit c54744a932dd · 2024-12-20T04:30:59.000Z
diff --git a/Boids.html b/Boids.html
@@ -10,14 +10,20 @@
 
         <!-- CDNs -->
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
+
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+        <link href="/SimulationLabs/Stylesheets/Default.css" rel="stylesheet">
     </head>
 
     <body>
         {% include HeaderBar.html %}
-        <div id="headerBar"></div>
 
         <!-- Page content -->
         <p> This is the boids page </p>
+
+        <h1> What you'll create </h1>
+        
+        <script src="/Scripts/Boids/Boids.js"></script>
     </body>
 </html>
diff --git a/Scripts/Boids/Boids.js b/Scripts/Boids/Boids.js
@@ -0,0 +1,31 @@
+var x = 200;
+var y = 200;
+
+function addRandomDirection(){
+    let randomChoice = floor(random(4));
+
+    switch(randomChoice){
+        case 0:
+            x++;
+            break;
+        case 1:
+            x--;
+            break;
+        case 2:
+            y++;
+            break;
+        default:
+            y--;
+    }
+}
+
+function setup(){
+    createCanvas(400, 400);
+    background(140, 205, 230);
+}
+
+function draw(){
+    stroke(245, 175, 0); // pen colour 
+    addRandomDirection(); // change state
+    point(x,y); // draw state
+}
diff --git a/Stylesheets/Default.css b/Stylesheets/Default.css
@@ -1,3 +1,3 @@
 .headerStyle {
-    background-color: red;
-}
+
+}
diff --git a/_includes/HeaderBar.html b/_includes/HeaderBar.html
@@ -1,4 +1,5 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light headerStyle">
+<!-- Header Bar component! -->
+<nav class="navbar navbar-expand-lg navbar-light bg-light headerStyle" id="headerStyle">
     <div class="container-fluid">
         <a class="navbar-brand" href="/SimulationLabs/">Simulation Labs </a>
         <!-- This collapsible element is needed for the items to align from the left -->
@@ -8,12 +9,12 @@
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownToggle" role="button" data-bs-toggle="dropdown"> Labs </a>
                     <ul class="dropdown-menu">
                         <li>
-                            <a class="dropdown-item" href="/SimulationLabs/Pages/Boids">
+                            <a class="dropdown-item" href="/SimulationLabs/Boids">
                                 Lab 1 - Boids 
                             </a>
                         </li>
                         <li>
-                            <a class="dropdown-item" href="/SimulationLabs/Pages/Boids">
+                            <a class="dropdown-item" href="/SimulationLabs/Boids">
                                 Lab 2 - Noise 
                             </a>
                         </li>
@@ -22,4 +23,4 @@
             </ul>
         </div>
     </div>
-</nav>
+</nav>
diff --git a/index.html b/index.html
@@ -12,12 +12,13 @@
         <!-- CDNs -->
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+        <link href="/SimulationLabs/Stylesheets/Default.css" rel="stylesheet">
     </head>
 
-    <body>
+    <body>  
         {% include HeaderBar.html %}
         <!-- Page content -->
-        <p> Testing testing123 </p>
+        <p>  </p>
 
     </body>
 </html>
