Skip to content

Commit 811b48c

Browse files
RexMortemRexMortem
committed
Added intro to JavaScript section
1 parent c941f7d commit 811b48c

File tree

6 files changed

+155
-59
lines changed

6 files changed

+155
-59
lines changed

‎Boids.html

+30-8
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
<script src="/SimulationLabs/Scripts/Boids/Boids.js" defer></script>
2323
<script src="/SimulationLabs/Scripts/Boids/Circles1.js" defer></script>
2424
<script src="/SimulationLabs/Scripts/Boids/Circles2.js" defer></script>
25+
<script src="/SimulationLabs/Scripts/Boids/RainbowCircles.js" defer></script>
2526
</head>
2627

2728
<body>
@@ -66,20 +67,20 @@ <h2> Introduction to p5.js </h2>
6667
<li> <strong> draw() </strong> which is a function executed every frame (by default, about 60 times a second) </li>
6768
</ul>
6869

69-
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>!
70+
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>!
7071

7172
<pre>
7273
<code class="language-js">
7374
function draw() {
74-
redV = 128
75-
greenV = 12
76-
blueV = 128
75+
let redV = 128; // if you're new to js, use "let" to declare variables
76+
let greenV = 12;
77+
let blueV = 128;
7778
background(redV, greenV, blueV); // my favourite colour; purple!
7879
}
7980
</code>
8081
</pre>
8182

82-
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.
83+
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.
8384

8485
<h3> Circles 1 - Background Drawn Once </h3>
8586

@@ -89,17 +90,19 @@ <h3> Circles 1 - Background Drawn Once </h3>
8990
<code class="language-js">
9091
function setup() {
9192
createCanvas(400, 400);
92-
background(222, 222, 222);
93+
background(222, 222, 222); // called just once!
9394
}
9495

95-
let circleSize = 10;
96+
const circleSize = 10; // js also has constants!! The value of variable "circleSize" cannot be changed
9697

9798
function draw() {
9899
circle(mouseX, mouseY, circleSize);
99100
}
100101
</code>
101102
</pre>
102103

104+
<emph> Background is called just once - at the start - and many circles are drawn over it. </emph>
105+
103106
<h3> Circles 2 - Background Drawn Every Frame </h3>
104107

105108
<div id="Circles2Container"></div>
@@ -119,8 +122,27 @@ <h3> Circles 2 - Background Drawn Every Frame </h3>
119122
</code>
120123
</pre>
121124

122-
<h3> Task </h3>
125+
<emph> Background is called every frame and essentially clears the screen by drawing the background over everything in the previous frame. </emph>
126+
127+
128+
<h3> Task: Multicolour </h3>
123129

130+
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:
131+
132+
<pre>
133+
<code class="language-js">
134+
stroke(255, 0, 0); // outlines are now red!
135+
fill(0, 255, 0); // areas are now green!
136+
</code>
137+
</pre>
138+
139+
<p><strong>Part 1:</strong> Modify the <emph>Circles 2</emph> sketch to have colours of your choice. </p>
140+
141+
<p><strong>Part 2:</strong> Modify the <emph>Circles 1</emph> sketch to have constantly changing colour like so: </p>
142+
143+
<div id="CirclesRainbowContainer"></div>
144+
145+
<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!
124146

125147
<h2> Autonomous Agents Intro </h2>
126148

‎Scripts/Boids/Boids.js

+29-27
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
1-
var x = 200;
2-
var y = 200;
1+
let boids = new p5((sketch) => {
2+
var x = 200;
3+
var y = 200;
34

4-
function addRandomDirection(){
5-
let randomChoice = floor(random(4));
5+
function addRandomDirection(){
6+
let randomChoice = Math.floor(Math.random() * 4);
67

7-
switch(randomChoice){
8-
case 0:
9-
x++;
10-
break;
11-
case 1:
12-
x--;
13-
break;
14-
case 2:
15-
y++;
16-
break;
17-
default:
18-
y--;
8+
switch(randomChoice){
9+
case 0:
10+
x++;
11+
break;
12+
case 1:
13+
x--;
14+
break;
15+
case 2:
16+
y++;
17+
break;
18+
default:
19+
y--;
20+
}
1921
}
20-
}
2122

22-
function setup(){
23-
let cnv = createCanvas(400, 400);
24-
cnv.parent('BoidContainer');
23+
sketch.setup = () => {
24+
let cnv = sketch.createCanvas(400, 400);
25+
cnv.parent('BoidContainer');
2526

26-
background(140, 205, 230);
27-
}
27+
sketch.background(140, 205, 230);
28+
}
2829

29-
function draw(){
30-
stroke(245, 175, 0); // pen colour
31-
addRandomDirection(); // change state
32-
point(x,y); // draw state
33-
}
30+
sketch.draw = () => {
31+
sketch.stroke(245, 175, 0); // pen colour
32+
addRandomDirection(); // change state
33+
sketch.point(x, y); // draw state
34+
}
35+
});

‎Scripts/Boids/Circles1.js

+13-11
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
function setup() {
2-
var cnv = createCanvas(400, 400);
3-
cnv.parent('Circles1Container');
1+
let circles1 = new p5( (sketch) => {
2+
sketch.setup = () => {
3+
let cnv = sketch.createCanvas(400, 400);
4+
cnv.parent('Circles1Container');
45

5-
background(222, 222, 222);
6-
}
7-
8-
var circleSize = 10;
9-
10-
function draw() {
11-
circle(mouseX, mouseY, circleSize);
12-
}
6+
sketch.background(222, 222, 222);
7+
}
8+
9+
var circleSize = 10;
10+
11+
sketch.draw = () => {
12+
sketch.circle(sketch.mouseX, sketch.mouseY, circleSize);
13+
}
14+
})

‎Scripts/Boids/Circles2.js

+12-13
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
console.log("this script is run!");
1+
let circles2 = new p5( (sketch) => {
2+
sketch.setup = () => {
3+
let cnv = sketch.createCanvas(400, 400);
4+
cnv.parent('Circles2Container');
5+
}
26

3-
function setup() {
4-
console.log("script is setup...");
5-
var cnv = createCanvas(400, 400);
6-
cnv.parent('Circles2Container');
7-
}
8-
9-
var circleSize = 10;
10-
11-
function draw() {
12-
background(222, 222, 222); // background drawn every frame!
13-
circle(mouseX, mouseY, circleSize);
14-
}
7+
var circleSize = 10;
8+
9+
sketch.draw = () => {
10+
sketch.background(222, 222, 222);
11+
sketch.circle(sketch.mouseX, sketch.mouseY, circleSize);
12+
}
13+
})

‎Scripts/Boids/RainbowCircles.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// remember unique names with let bindings!
2+
let rainbowCircles = new p5( (sk) => {
3+
sk.setup = () => {
4+
let cnv = sk.createCanvas(400, 400);
5+
cnv.parent('CirclesRainbowContainer');
6+
sk.background(222, 222, 222);
7+
}
8+
9+
const circleSize = 10;
10+
let redV = 134;
11+
let greenV = 213;
12+
let blueV = 21;
13+
14+
const rShift = 13;
15+
const gShift = 5;
16+
const bShift = 27;
17+
18+
sk.draw = () => {
19+
// update rgb values
20+
redV = (redV + rShift) % 256;
21+
greenV = (greenV + gShift) % 256;
22+
blueV = (blueV + bShift) % 256;
23+
24+
// update the colours
25+
sk.stroke(redV, greenV, blueV);
26+
sk.fill(redV, greenV, blueV);
27+
28+
// draw
29+
sk.circle(sk.mouseX, sk.mouseY, circleSize);
30+
}
31+
})

‎Scripts/scoping.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/*
2+
IGNORE THIS FILE; I was just experimenting with scoping lol, and may refer to this document while programming
3+
4+
Guide: https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/
5+
var variables can be redeclared
6+
*/
7+
8+
var a = 5;
9+
var a = 6;
10+
11+
/*
12+
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)
13+
Also hoisted, with undefined
14+
*/
15+
16+
function doSomething(){
17+
var a = 8;
18+
console.log("Inside function: " + a); // 8
19+
}
20+
21+
doSomething();
22+
23+
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'
24+
25+
function changeA(){
26+
a = 13;
27+
console.log("Inside changing function: " + a); // 13
28+
}
29+
changeA();
30+
31+
console.log("Outside changing function: " + a); // 13 - expected since function changed the global var 'a'
32+
33+
/*
34+
Okay so obviously this has issues because "var" allows you to redeclare a global variable
35+
"let" is a variable that is block-scoped and ALSO not able to be redeclared
36+
37+
you CAN "redeclare" a let variable in another scope though -> they're treated as different variables, so there's no actual redeclaration
38+
39+
Hoisted with REFERENCE ERROR
40+
*/

0 commit comments

Comments
 (0)