Codeblocks

Boids.html

@@ -12,6 +12,10 @@
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js" integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/components/prism-javascript.min.js" integrity="sha512-yvw5BDA/GQu8umskpIOBhX2pDLrdOiriaK4kVxtD28QEGLV5rscmCfDjkrx52tIgzLgwzs1FsALV6eYDpGnEkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism-twilight.min.css" integrity="sha512-6rkEt5SymQMcnlRz1dHwAMSfMnDaFX28qdr3wyaa+XRCR8dTSWE4U6vjiTVuB6Mq9FgYOLVOTk0lrOeCnodcgA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
+
         <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
         <link href="/SimulationLabs/Stylesheets/Default.css" rel="stylesheet">
 
@@ -40,17 +44,32 @@ <h2> What you'll create </h2>
 
         <h2> Prereqs </h2>
 
-        <ul>
-            <p> Know how to code </p>
-        </ul>
-        <ul>
-            <p> Basic OOP </p>
-        </ul>
+        <ul> Know how to program using a procedural language e.g. Python, Java, C#, JavaScript etc. </ul>
+        <ul> Basic OOP i.e. you know what a class is </ul>
+
+        <p> We will be coding in JavaScript but don't worry about knowing the ins and outs of the language; you should be able to pick it up as we go! </p>
 
-        <h2> Processing/JavaScript Intro </h1>
+        <h2> Introduction to p5.js </h2>
+
+        We will be using JavaScript and a library called <strong> p5.js</strong>, made by the lovely <a href="https://processingfoundation.org/"> Processing Foundation</a>.
+
+        <ol>
+            <li> <p>To get started, create an account for the <a href="https://editor.p5js.org/signup">web editor</a>.  </p> </li>
+            <li> <p> Open a new sketch (File->New) </p> </li>
+        </ol>
+
+        <p> Your new sketch should have 2 functions: </p>
 
-        <p> This should be an intro to basic programming but in JavaScript, taught using basic simulations <emph>(such as the random stepper displayed on the page instead of the actual boids simulation)</emph> </p>
+
+        <pre>
+            <code class="language-js">
+                console.log('hello world');
+            </code>
+        </pre>
+
+        <h3> Task </h3>
 
+
         <h2> Autonomous Agents Intro </h2>
 
         <p> Applying forces, basic goals </p>

README.md

@@ -1,6 +1,6 @@
 # Simulation Labs 
 
-Init 
+
 
 # Developing 
 

Stylesheets/Default.css

@@ -1,3 +1,7 @@
 .headerStyle {
 
 }
+
+/* pre {
+    background-color: black;
+} */