diff --git a/Boids.html b/Boids.html index dca884c..13d6e36 100644 --- a/Boids.html +++ b/Boids.html @@ -10,84 +10,137 @@ - + - - - + + - + + {% include HeaderBar.html %} - -

This is the boids page

- -

Contents

+
+ +

This is the boids page

+ +

Contents

- + -

What you'll create

+

What you'll create

-
+
- (This is not an actual boids sketch btw - this is a random stepper) + (This is not an actual boids sketch btw - this is a random stepper) -

Prereqs

+

Prereqs

- - + + -

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!

+

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!

-

Introduction to p5.js

- - We will be using JavaScript and a library called p5.js, made by the lovely Processing Foundation. - -
    -

  1. To get started, create an account for the web editor.

    2. -

  2. Open a new sketch (File->New)

    3. -
- -

Your new sketch should have 2 functions:

+

Introduction to p5.js

+ + We will be using JavaScript and a library called p5.js, made by the lovely Processing Foundation. + +
    +

  1. To get started, create an account for the web editor.

    2. +

  2. Open a new sketch (File->New)

    3. +
+ +

Your new sketch should have 2 functions:

+ + - - 
-            
-                console.log('hello world');
-            
-
+ We create the canvas (arguments being the width and length) in setup() 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 draw()! -

Task

+ 
+                
+function draw() {
+    redV = 128
+    greenV = 12
+    blueV = 128 
+    background(redV, greenV, blueV); // my favourite colour; purple!
+}
+                
+
- -

Autonomous Agents Intro

+ 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. -

Applying forces, basic goals

+

Circles 1 - Background Drawn Once

+ +
-

Creating boid flocks

+ 
+                
+function setup() {
+    createCanvas(400, 400);
+    background(222, 222, 222);
+}
 
-        
 With room for more behaviours! 

+let circleSize = 10;
 
-        
 Extension Material

+function draw() {
+    circle(mouseX, mouseY, circleSize);
+}
+                
+
-

Link to an extension site with scope for learning how to host your own

+

Circles 2 - Background Drawn Every Frame

+ +
-

Further Reading

+ 
+                
+function setup() {
+    createCanvas(400, 400);
+}
 
-        
    
-            
  •   Dear Game Developers, Stop Messing This Up!  - YT Video on delta-time and basic physics 
    • 
-            
  •   Nature of Code  - 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) 
    • 
-            
  •  Coding Adventure: Boids - 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  
    • 
-        

+let circleSize = 10;
+
+function draw() {
+    background(222, 222, 222); // background drawn every frame!
+    circle(mouseX, mouseY, circleSize);
+}
+                
+
+ +

Task

+ + +

Autonomous Agents Intro

+ +

Applying forces, basic goals

+ +

Creating boid flocks

+ +

With room for more behaviours!

+ +

Extension Material

+ +

Link to an extension site with scope for learning how to host your own

+ +

Further Reading

+ + + \ No newline at end of file diff --git a/Scripts/Boids/Circles1.js b/Scripts/Boids/Circles1.js new file mode 100644 index 0000000..c833b6e --- /dev/null +++ b/Scripts/Boids/Circles1.js @@ -0,0 +1,12 @@ +function setup() { + var cnv = createCanvas(400, 400); + cnv.parent('Circles1Container'); + + background(222, 222, 222); + } + + var circleSize = 10; + + function draw() { + circle(mouseX, mouseY, circleSize); + } \ No newline at end of file diff --git a/Scripts/Boids/Circles2.js b/Scripts/Boids/Circles2.js new file mode 100644 index 0000000..32b76ff --- /dev/null +++ b/Scripts/Boids/Circles2.js @@ -0,0 +1,14 @@ +console.log("this script is run!"); + +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); + } \ No newline at end of file diff --git a/Stylesheets/Default.css b/Stylesheets/Default.css index 00ca651..e69de29 100644 --- a/Stylesheets/Default.css +++ b/Stylesheets/Default.css @@ -1,7 +0,0 @@ -.headerStyle { - -} - -/* pre { - background-color: black; -} */ \ No newline at end of file