Commit!

Boids.html

@@ -446,7 +446,7 @@ <h3> Accelerating Ball </h3>
                 </code>
             </pre>
 
-            <p> This is all stuff we've basically done, but we also need a method to simulate all the physics. 
+            <p> This is all stuff we've basically done, but we also need a way to simulate all the physics. 
                 From physics, we know that acceleration is the rate of change of velocity, and that velocity is the rate of change of position.
             </p>
 
@@ -461,12 +461,17 @@ <h3> Accelerating Ball </h3>
 
             <p> As we'll soon see, we have to do this in a <em>very careful</em> way. </p>
 
-            <h3>Enter deltaTime</h3>
+            <h4>Enter deltaTime</h4>
 
             <p>Until now, we've not really considered how long each frame takes. 
             It'd be reasonable to assume each frame takes about 1/60 seconds to process <em>however</em> each frame takes a slightly different amount of time and, when simulations get more complex, each frame might take a non-slight different amount of time! 
-
             </p>
+
+            <p>To test this theory, console.log the <em>deltaTime</em> variable inside the <em>draw()</em> function; it will set itself to the time taken to process the previous frame! </p>
+
+            <h4>Using deltaTime</h4>
+
+            <p> We know $v = p/t$ (where ) </p>
 
             <div id="WrongFPSBallsContainer"></div>
 

Images/Boids/SpeedAgainstTime.drawio

@@ -0,0 +1,61 @@
+<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36" version="26.0.3">
+  <diagram name="Page-1" id="s7K3Om-JziDVqv6ZY2V3">
+    <mxGraphModel dx="1050" dy="565" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="413" pageHeight="583" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="woH91YMG4Nk-elldio-7-17" value="" style="whiteSpace=wrap;html=1;strokeColor=none;fillColor=#f8cecc;opacity=50;" vertex="1" parent="1">
+          <mxGeometry x="135" y="235" width="130" height="165" as="geometry" />
+        </mxCell>
+        <mxCell id="woH91YMG4Nk-elldio-7-1" value="" style="endArrow=none;html=1;rounded=0;strokeWidth=3;" edge="1" parent="1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="80" y="400" as="sourcePoint" />
+            <mxPoint x="80" y="40" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="woH91YMG4Nk-elldio-7-2" value="" style="endArrow=none;html=1;rounded=0;strokeWidth=3;" edge="1" parent="1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="80" y="400" as="sourcePoint" />
+            <mxPoint x="400" y="400" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="woH91YMG4Nk-elldio-7-3" value="&lt;b&gt;&lt;font style=&quot;font-size: 18px;&quot;&gt;Speed&lt;/font&gt;&lt;/b&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="10" y="160" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="woH91YMG4Nk-elldio-7-4" value="&lt;b&gt;&lt;font style=&quot;font-size: 18px;&quot;&gt;Time&lt;/font&gt;&lt;/b&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
+          <mxGeometry x="190" y="410" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="woH91YMG4Nk-elldio-7-5" value="" style="endArrow=none;html=1;rounded=0;strokeWidth=2;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" source="woH91YMG4Nk-elldio-7-11">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="80" y="280" as="sourcePoint" />
+            <mxPoint x="320" y="80" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="woH91YMG4Nk-elldio-7-14" value="" style="endArrow=none;html=1;rounded=0;strokeWidth=2;fillColor=#dae8fc;strokeColor=#6c8ebf;" edge="1" parent="1" target="woH91YMG4Nk-elldio-7-11">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="80" y="280" as="sourcePoint" />
+            <mxPoint x="320" y="80" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="woH91YMG4Nk-elldio-7-11" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#f8cecc;strokeColor=none;" vertex="1" parent="1">
+          <mxGeometry x="260" y="120" width="10" height="10" as="geometry" />
+        </mxCell>
+        <mxCell id="woH91YMG4Nk-elldio-7-6" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#f8cecc;strokeColor=none;" vertex="1" parent="1">
+          <mxGeometry x="130" y="230" width="10" height="10" as="geometry" />
+        </mxCell>
+        <mxCell id="woH91YMG4Nk-elldio-7-15" value="" style="endArrow=none;html=1;rounded=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;fillColor=#f8cecc;strokeColor=#b85450;" edge="1" parent="1" target="woH91YMG4Nk-elldio-7-6">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="135" y="400" as="sourcePoint" />
+            <mxPoint x="440" y="270" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="woH91YMG4Nk-elldio-7-16" value="" style="endArrow=none;html=1;rounded=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;fillColor=#f8cecc;strokeColor=#b85450;" edge="1" parent="1">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="265" y="400" as="sourcePoint" />
+            <mxPoint x="264.5" y="130" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>