Author: Khatira Kazemi

For this weeks assignment, I decided to go with a bee’s movement as I was inspired by the flies around campus annoying me around the palms but wanted something a bit cuter. I wanted to make sure the bee’s movement wasn’t smooth and a bit static. I also want to incorporate images in my second IM. project so learnt how to handle images. The following is a bee video of the inspiration.

https://www.youtube.com/watch?v=-d_pQ3DyzHg

This was my initial code but it made the bee images simply move smoothly.

class Bee 
{
  constructor(x, y) 
  {
    this.position = createVector(x, y);
    this.velocity = createVector(random(-0.65, 0.5), random(-0.75, 0.5));
    this.acceleration = createVector(0, 0);  
    this.img = bee_img;
  }

  update() {
    
    this.acceleration.limit(3);

    // Update velocity and position based on acceleration
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity);

I added some additional behaviours and randomness, alongside a ‘slow down’ vector to have the acceleration decrease whenever the acceleration was a bit too high.

constructor(x, y) 
  {
    this.position = createVector(x, y);                  //positioning of the bee
    this.velocity = createVector(random(-0.65, 0.5), random(-0.75, 0.5));          
    this.acceleration = createVector(0, 0);               // start acceleration 0
    this.personality = random(-0.1, 0.25);       // random multiplier
    this.slow_down = createVector(-1.5,-1);      //for when the bee comes close to y-borders
    this.img = bee_img;
  } 

  update() 
  {
    let randomForce = createVector(random(-5, 5), random(-5, 5));//even chnace
    randomForce.mult(this.personality);
    this.acceleration.add(randomForce);
    
    this.acceleration.limit(3);        //no faster than 3

    this.velocity.add(this.acceleration);
    this.position.add(this.velocity);

    this.velocity.mult(random(0.55,0.65));      //slow down as a way of showing air       resistance
    
    
    if (this.position.x > width) this.position.x = 0;
    if (this.position.x < 0) this.position.x = width;
    if (this.position.y > 350) this.position.y -= 150;      //if hits top/bottom borders
    if (this.position.y < 50) this.position.y += 150;
    if(this.acceleration.x > 2.6)                            //if acceleration too high
    {
      this.acceleration.add(this.slow_down);
    }
  }

 

I also had some problems when it came to uploading images from the URL so I learnt how to get it from GitHub making sure it would always work on any device.

What would I do differently next time?

I want to try and add some more insects and items in nature that attract bees like honey so that there is a chance the bee will buzz around a certain area.
>
My final code

https://editor.p5js.org/kk4827/full/1Mx0g_u9n

I enjoyed the reading as I feel like it is very relevant in many disciplines such as the sciences, computer science, maths, economics, meteorology. The reading starts off with the idea of reductionism and how a system can be understood by examining its individual parts and even though I did agree partially after reading this first statement, I definitely had some doubts. I did think of humans and emotional intelligence as an example. You may be able to describe the cells that make up a human, but you wont be able to study humans emotional intelligence without adding humans or animals into the study. And that is where the text takes us to and explains how the opposite idea of reductionism, holism may be a better way to explain life as a whole.

Holism – the theory that parts of a whole are in intimate interconnection, such that they cannot exist independently of the whole, or cannot be understood without reference to the whole, which is thus regarded as greater than the sum of its parts. Holism is often applied to mental states, language, and ecology.

This is the definition I got from Google and I agree with this idea more about we need to use the interdisciplinary to explain effects and reasoning of many things in the world. Reductionism looks at the world as the root of a tree structure and maybe cells or quantum qubits being the children of this tree but in reality, that root we saw as the world would be the children of another tree in a whole new universe.

I want to touch upon how the idea of computers combining experimental and theoretical have helped many disciplinaries work together and create revolutionary ideas. I really enjoyed the part on how simple and random are what make the complex and I can see that being applied in this course as we further discuss simple and random ways that make a ‘complex natural’ structure, contradicting ourself.

I decided to choose a self walking path that also changes colour with respect to where on the canvas the vertex is. I wanted to first try the self walking path without the colour change and once that was done, try to add the changing colours.

Firstly, I planned my grid as a 10 by 10 after researching how HSB works. H is for the ‘main colour’, S for saturation and B for brightness. I am not sure on how 3D modelling works so far so I want to make the x plane represent the saturation and the y plane represent the brightness.

This was the idea and I did some quick calculations on where I would want the dots to be places, in the middle of each ‘square’. After planning this out, I created a simple 2D array, 10 by 10.

let grid = [];  
for (let i = 0; i < gridSize; i++) 
  {
    grid[i] = new Array(gridSize).fill(false);  //fill false
  }

I have done something similar in Intro to Computer Science so I used very similar ideas in this code and had everything initialised to false so when checking which squares were taken, they would be marked as true.

My next problem was wondering how to plan the circles or dots and after researching, I saw some people use the beginShape() function which allows you to plot points and have lines be drawn between each new point.

https://p5js.org/reference/#/p5/beginShape

I also remember from my intro to CS class that we could use dictionaries and arrays to create possibilities of directions so I created one for the 4 possible movements: up, down, right, left. I also added a validation function to make sure it was never going out of bounds of the array.

let DIRECTIONS = [
  { dx: 1, dy: 0 },
  { dx: -1, dy: 0 },
  { dx: 0, dy: 1 },
  { dx: 0, dy: -1 },
];            //choice of directions for vertex

function isValid(i, j) 
{
  if (i < 0 || i >= gridSize || j < 0 || j >= gridSize) 
  {
    return false;
  }
  return !grid[i][j];
}

So at this point, I had something like this.

Now that I had the main part from list 1 completed, it was now time to tackle the colouring from the HSB scale. I wanted to complete the following: have the H colour always be randomised from the range 0-360 every click on the screen, have S and B be respective of where on the grid, and have the lines also blend nicely between the vertices.

I started off by randomly choosing a number between 0 and 360 with the simple random function. I also wanted to check how HSB colour mode would need to be implemented and have that implemented, I found the following 2 links.

https://p5js.org/reference/#/p5/random

https://p5js.org/reference/#/p5/color

strokeWeight(2);
colorMode(HSB);
stroke(colour_choice, (x*20) + gridSize, (y * 20) + gridSize);

I then got the following images.

Ideally, I would want to see the whole grid filled out and see how the colour grid looks like but the chances of the self avoiding walk ending that way is very low so I tried uploading images where a lot of squares were coloured.

Some parts were definitely fiddly such as trying to have the canvas reset after another click but I did end up getting there and made use of loop() functions and just having the grid reinitialised and so I am proud of that part of my code.

function resetSketch() 
{
  background(255);
  for (let i = 0; i < gridSize; i++) 
  {
    grid[i] = new Array(gridSize).fill(false);  //fill false
  }
  colour_choice = random(360); // choose from 360 of H values
  pathStarted = false; // reset 
  loop(); // Restart animation 
}

What would I change?

As I progress in class, I would like to try this again in a 3D model and have the H value be dependent on the Z axis. I would also like to try different models such as the H value changing and maybe the S being some random constant. I am sure there is an algorithm or some way to have the decision be a smart one so that they whole grid can be filled and we can see the true palette of that colours brightness and saturation.

I also saw some examples of where there as backtracking involved or recursion so maybe try to implement that and even possibly make this more interactive as a maze game.

Final code

https://editor.p5js.org/kk4827/sketches/6-NjjdarY