You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p> There's probably a bootstrap component for this... </p>
37
-
</ul>
36
+
<ul>
37
+
<p> There's probably a bootstrap component for this... </p>
38
+
</ul>
38
39
39
-
<h2> What you'll create </h2>
40
+
<h2> What you'll create </h2>
40
41
41
-
<divid="BoidContainer"></div>
42
+
<divid="BoidContainer"></div>
42
43
43
-
<emph> (This is not an actual boids sketch btw - this is a random stepper) </emph>
44
+
<emph> (This is not an actual boids sketch btw - this is a random stepper) </emph>
44
45
45
-
<h2> Prereqs </h2>
46
+
<h2> Prereqs </h2>
46
47
47
-
<ul> Know how to program using a procedural language e.g. Python, Java, C#, JavaScript etc. </ul>
48
-
<ul> Basic OOP i.e. you know what a class is </ul>
48
+
<ul> Know how to program using a procedural language e.g. Python, Java, C#, JavaScript etc. </ul>
49
+
<ul> Basic OOP i.e. you know what a class is </ul>
49
50
50
-
<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>
51
+
<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>
51
52
52
-
<h2> Introduction to p5.js </h2>
53
-
54
-
We will be using JavaScript and a library called <strong> p5.js</strong>, made by the lovely <ahref="https://processingfoundation.org/"> Processing Foundation</a>.
55
-
56
-
<ol>
57
-
<li><p>To get started, create an account for the <ahref="https://editor.p5js.org/signup">web editor</a>. </p></li>
58
-
<li><p> Open a new sketch (File->New) </p></li>
59
-
</ol>
60
-
61
-
<p> Your new sketch should have 2 functions: </p>
53
+
<h2> Introduction to p5.js </h2>
54
+
55
+
We will be using JavaScript and a library called <strong> p5.js</strong>, made by the lovely <ahref="https://processingfoundation.org/"> Processing Foundation</a>.
56
+
57
+
<ol>
58
+
<li><p>To get started, create an account for the <ahref="https://editor.p5js.org/signup">web editor</a>. </p></li>
59
+
<li><p> Open a new sketch (File->New) </p></li>
60
+
</ol>
61
+
62
+
<p> Your new sketch should have 2 functions: </p>
63
+
64
+
<ul>
65
+
<li><strong> setup() </strong> which is a function executed once at the start </li>
66
+
<li><strong> draw() </strong> which is a function executed every frame (by default, about 60 times a second) </li>
67
+
</ul>
62
68
63
-
64
-
<pre>
65
-
<codeclass="language-js">
66
-
console.log('hello world');
67
-
</code>
68
-
</pre>
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>!
69
70
70
-
<h3> Task </h3>
71
+
<pre>
72
+
<codeclass="language-js">
73
+
function draw() {
74
+
redV = 128
75
+
greenV = 12
76
+
blueV = 128
77
+
background(redV, greenV, blueV); // my favourite colour; purple!
78
+
}
79
+
</code>
80
+
</pre>
71
81
72
-
73
-
<h2> Autonomous Agents Intro </h2>
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.
74
83
75
-
<p> Applying forces, basic goals </p>
84
+
<h3> Circles 1 - Background Drawn Once </h3>
85
+
86
+
<divid="Circles1Container"></div>
76
87
77
-
<h2> Creating boid flocks </h2>
88
+
<pre>
89
+
<codeclass="language-js">
90
+
function setup() {
91
+
createCanvas(400, 400);
92
+
background(222, 222, 222);
93
+
}
78
94
79
-
<p> With room for more behaviours! </p>
95
+
let circleSize = 10;
80
96
81
-
<h2> Extension Material</h2>
97
+
function draw() {
98
+
circle(mouseX, mouseY, circleSize);
99
+
}
100
+
</code>
101
+
</pre>
82
102
83
-
<p> Link to an <ahref="/SimulationLabs/BoidsExtension"> extension site </a> with scope for learning how to host your own </p>
103
+
<h3> Circles 2 - Background Drawn Every Frame </h3>
104
+
105
+
<divid="Circles2Container"></div>
84
106
85
-
<h2> Further Reading </h2>
107
+
<pre>
108
+
<codeclass="language-js">
109
+
function setup() {
110
+
createCanvas(400, 400);
111
+
}
86
112
87
-
<ul>
88
-
<li><ahref="https://www.youtube.com/watch?v=yGhfUcPjXuE"> Dear Game Developers, Stop Messing This Up! </a> - YT Video on delta-time and basic physics </li>
89
-
<li><ahref="https://natureofcode.com/"> Nature of Code </a> - A book by Daniel Shiffman which these labs take inspiration from! It features a section on boids and many more simulations of things from nature (highly recommend) </li>
90
-
<li><ahref="https://www.youtube.com/watch?v=bqtqltqcQhw">Coding Adventure: Boids</a> - Sebastian Lague's brilliant video on boids is the main inspiration for this lab! He takes boids into 3D and explores a raycasting approach to collision avoidance </li>
91
-
</ul>
113
+
let circleSize = 10;
114
+
115
+
function draw() {
116
+
background(222, 222, 222); // background drawn every frame!
117
+
circle(mouseX, mouseY, circleSize);
118
+
}
119
+
</code>
120
+
</pre>
121
+
122
+
<h3> Task </h3>
123
+
124
+
125
+
<h2> Autonomous Agents Intro </h2>
126
+
127
+
<p> Applying forces, basic goals </p>
128
+
129
+
<h2> Creating boid flocks </h2>
130
+
131
+
<p> With room for more behaviours! </p>
132
+
133
+
<h2> Extension Material</h2>
134
+
135
+
<p> Link to an <ahref="/SimulationLabs/BoidsExtension"> extension site </a> with scope for learning how to host your own </p>
136
+
137
+
<h2> Further Reading </h2>
138
+
139
+
<ul>
140
+
<li><ahref="https://www.youtube.com/watch?v=yGhfUcPjXuE"> Dear Game Developers, Stop Messing This Up! </a> - YT Video on delta-time and basic physics </li>
141
+
<li><ahref="https://natureofcode.com/"> Nature of Code </a> - A book by Daniel Shiffman which these labs take inspiration from! It features a section on boids and many more simulations of things from nature (highly recommend) </li>
142
+
<li><ahref="https://www.youtube.com/watch?v=bqtqltqcQhw">Coding Adventure: Boids</a> - Sebastian Lague's brilliant video on boids is the main inspiration for this lab! He takes boids into 3D and explores a raycasting approach to collision avoidance </li>
0 commit comments