Added intro to JavaScript section

UWCS · Dec 21, 2024 · 811b48c · 811b48c
1 parent c941f7d
commit 811b48c
Show file tree

Hide file tree

Showing 6 changed files with 155 additions and 59 deletions.
diff --git a/Boids.html b/Boids.html
@@ -22,6 +22,7 @@
         <script src="/SimulationLabs/Scripts/Boids/Boids.js" defer></script>
         <script src="/SimulationLabs/Scripts/Boids/Circles1.js" defer></script>
         <script src="/SimulationLabs/Scripts/Boids/Circles2.js" defer></script>
+        <script src="/SimulationLabs/Scripts/Boids/RainbowCircles.js" defer></script>
     </head>
 
     <body>
@@ -66,20 +67,20 @@ <h2> Introduction to p5.js </h2>
                 <li> <strong> draw() </strong> which is a function executed every frame (by default, about 60 times a second) </li>
             </ul>
 
-            We create the canvas (arguments being the width and length) in <strong> setup() </strong> since we only need to do this once, and draw background (which you can call with RGB colour arguments as below) is called every frame in <strong> draw()</strong>! 
+            We create the canvas (arguments being the width and length) in <strong> setup() </strong> since we only need to do this once, and <strong>background()</strong> (which you can call with RGB colour arguments as below) is called every frame in <strong> draw()</strong>! 
 
             <pre>
                 <code class="language-js">
 function draw() {
-    redV = 128
-    greenV = 12
-    blueV = 128 
+    let redV = 128; // if you're new to js, use "let" to declare variables
+    let greenV = 12; 
+    let blueV = 128;
     background(redV, greenV, blueV); // my favourite colour; purple!
 }
                 </code>
             </pre>
 
-            This difference matters when it comes to sketches with changing elements. See the difference in the following sketch, where we draw a circle at the mouse's position every frame. 
+            This difference matters when it comes to sketches with changing elements; see the difference in the following sketches, where we draw a circle at the mouse's position every frame. One draws a background once, and the other draws a background every frame. 
 
             <h3> Circles 1 - Background Drawn Once </h3>
 
@@ -89,17 +90,19 @@ <h3> Circles 1 - Background Drawn Once </h3>
                 <code class="language-js">
 function setup() {
     createCanvas(400, 400);
-    background(222, 222, 222);
+    background(222, 222, 222); // called just once!
 }
 
-let circleSize = 10;
+const circleSize = 10; // js also has constants!! The value of variable "circleSize" cannot be changed
 
 function draw() {
     circle(mouseX, mouseY, circleSize);
 }
                 </code>
             </pre>
 
+            <emph> Background is called just once - at the start - and many circles are drawn over it. </emph>
+
             <h3> Circles 2 - Background Drawn Every Frame </h3>
 
             <div id="Circles2Container"></div>
@@ -119,8 +122,27 @@ <h3> Circles 2 - Background Drawn Every Frame </h3>
                 </code>
             </pre>
 
-            <h3> Task </h3>
+            <emph> Background is called every frame and essentially clears the screen by drawing the background over everything in the previous frame. </emph>
+
+
+            <h3> Task: Multicolour </h3>
 
+            We can use the <strong>stroke()</strong> and <strong>fill()</strong> functions to change the line colour and fill colour of the circles (and any shape we draw) like below:
+
+            <pre>
+                <code class="language-js">
+stroke(255, 0, 0); // outlines are now red!
+fill(0, 255, 0); // areas are now green!
+                </code>
+            </pre>
+
+            <p><strong>Part 1:</strong> Modify the <emph>Circles 2</emph> sketch to have colours of your choice. </p>
+
+            <p><strong>Part 2:</strong> Modify the <emph>Circles 1</emph> sketch to have constantly changing colour like so: </p>
+
+            <div id="CirclesRainbowContainer"></div>
+
+            <strong> <emph>Hint:</emph></strong> The range of colours is 0-255 (anything >255 will be interpreted as 255), so you will have to use modulus (<strong>%</strong>) or if statements to ensure RGB values don't go outside that range!
 
             <h2> Autonomous Agents Intro </h2>
 

diff --git a/Scripts/Boids/Boids.js b/Scripts/Boids/Boids.js
@@ -1,33 +1,35 @@
-var x = 200;
-var y = 200;
+let boids = new p5((sketch) => {
+    var x = 200;
+    var y = 200;
 
-function addRandomDirection(){
-    let randomChoice = floor(random(4));
+    function addRandomDirection(){
+        let randomChoice = Math.floor(Math.random() * 4);
 
-    switch(randomChoice){
-        case 0:
-            x++;
-            break;
-        case 1:
-            x--;
-            break;
-        case 2:
-            y++;
-            break;
-        default:
-            y--;
+        switch(randomChoice){
+            case 0:
+                x++;
+                break;
+            case 1:
+                x--;
+                break;
+            case 2:
+                y++;
+                break;
+            default:
+                y--;
+        }
     }
-}
 
-function setup(){
-    let cnv = createCanvas(400, 400);
-    cnv.parent('BoidContainer');
+    sketch.setup = () => {
+        let cnv = sketch.createCanvas(400, 400);
+        cnv.parent('BoidContainer');
 
-    background(140, 205, 230);
-}
+        sketch.background(140, 205, 230);
+    }
 
-function draw(){
-    stroke(245, 175, 0); // pen colour 
-    addRandomDirection(); // change state
-    point(x,y); // draw state
-}
+    sketch.draw = () => {
+        sketch.stroke(245, 175, 0); // pen colour 
+        addRandomDirection(); // change state
+        sketch.point(x, y); // draw state
+    }
+});
diff --git a/Scripts/Boids/Circles1.js b/Scripts/Boids/Circles1.js
@@ -1,12 +1,14 @@
-function setup() {
-    var cnv = createCanvas(400, 400);
-    cnv.parent('Circles1Container');
+let circles1 = new p5( (sketch) => {
+    sketch.setup = () => {
+        let cnv = sketch.createCanvas(400, 400);
+        cnv.parent('Circles1Container');
 
-    background(222, 222, 222);
-  }
-
-  var circleSize = 10;
-
-  function draw() {
-    circle(mouseX, mouseY, circleSize);
-  }
+        sketch.background(222, 222, 222);
+    }
+
+    var circleSize = 10;
+
+    sketch.draw = () => {
+        sketch.circle(sketch.mouseX, sketch.mouseY, circleSize);
+    }
+})
diff --git a/Scripts/Boids/Circles2.js b/Scripts/Boids/Circles2.js
@@ -1,14 +1,13 @@
-console.log("this script is run!");
+let circles2 = new p5( (sketch) => {
+    sketch.setup = () => {
+        let cnv = sketch.createCanvas(400, 400);
+        cnv.parent('Circles2Container');
+    }
 
-function setup() {
-    console.log("script is setup...");
-    var cnv = createCanvas(400, 400);
-    cnv.parent('Circles2Container');
-  }
-
-  var circleSize = 10;
-
-  function draw() {
-    background(222, 222, 222); // background drawn every frame!
-    circle(mouseX, mouseY, circleSize);
-  }
+    var circleSize = 10;
+
+    sketch.draw = () => {
+        sketch.background(222, 222, 222);
+        sketch.circle(sketch.mouseX, sketch.mouseY, circleSize);
+    }
+})
diff --git a/Scripts/Boids/RainbowCircles.js b/Scripts/Boids/RainbowCircles.js
@@ -0,0 +1,31 @@
+// remember unique names with let bindings!
+let rainbowCircles = new p5( (sk) => {
+    sk.setup = () => {
+        let cnv = sk.createCanvas(400, 400);
+        cnv.parent('CirclesRainbowContainer');
+        sk.background(222, 222, 222);
+    }
+
+    const circleSize = 10;
+    let redV = 134; 
+    let greenV = 213;
+    let blueV = 21;
+
+    const rShift = 13;
+    const gShift = 5;
+    const bShift = 27;
+
+    sk.draw = () => {
+        // update rgb values 
+        redV = (redV + rShift) % 256;
+        greenV = (greenV + gShift) % 256;
+        blueV = (blueV + bShift) % 256;
+
+        // update the colours
+        sk.stroke(redV, greenV, blueV);
+        sk.fill(redV, greenV, blueV);
+
+        // draw
+        sk.circle(sk.mouseX, sk.mouseY, circleSize);
+    }
+})
diff --git a/Scripts/scoping.js b/Scripts/scoping.js
@@ -0,0 +1,40 @@
+/*
+    IGNORE THIS FILE; I was just experimenting with scoping lol, and may refer to this document while programming
+    
+    Guide: https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/
+    var variables can be redeclared 
+*/
+
+var a = 5;
+var a = 6;
+
+/*
+    var variables are function scoped - if it's defined in a function, then it can be used in the function (even if it was defined many blocks deep)
+    Also hoisted, with undefined 
+*/
+
+function doSomething(){
+    var a = 8;
+    console.log("Inside function: " + a); // 8
+}
+
+doSomething();
+
+console.log("After function: " + a); // 6 - note that this is *different* because vars are function scoped; the variable 'a' in the function is different from the global 'a'
+
+function changeA(){
+    a = 13; 
+    console.log("Inside changing function: " + a); // 13
+}
+changeA();
+
+console.log("Outside changing function: " + a); // 13 - expected since function changed the global var 'a'
+
+/*
+    Okay so obviously this has issues because "var" allows you to redeclare a global variable 
+    "let" is a variable that is block-scoped and ALSO not able to be redeclared 
+
+    you CAN "redeclare" a let variable in another scope though -> they're treated as different variables, so there's no actual redeclaration
+
+    Hoisted with REFERENCE ERROR
+*/