​

let snakeArray = [];

​

function setup() {

  createCanvas(600, 600);

  background(0);

  let max = 400; // number of snakes

  for(let i = 0; i<max; i++) {

​

    let posX = map(random(0,1), 0, 1, -200, width+200); // I expanded it beyond the canvas so that snakes can be seen coming in from outside the frame.

    let posY = map(random(0,1), 0, 1, -200, height+200);

    let radius = map(random(0,1), 0,1, 10, 30);

    // I want to make it so that if it is larger it moves slower overall

    let magnitude = map(random(0,1), 0,1, 5, 0.5); // magnitude is less when the radius is larger, in theory, not sure if its working.

    let coefficient = map(random(0,1), 0,1, 0.001, 0.0055) // I kept the coefficient the same for all snakes but it can be changed. Looks cooler when it is the same value for all snakes in my opinion.

    let newSnake = new snake(posX, posY, radius, magnitude, coefficient);

    snakeArray.push(newSnake);

  }

}

​

function draw() {

  background(0, 8);

​

  push();

  for(let x = 0; x<snakeArray.length; x++) {

    stroke(0, 50);

    fill(255,200,100);

    snakeArray[x].update();

    snakeArray[x].drawShape();

  }

  pop();

}

​

// removes all existing snakes and makes new ones

function mouseClicked() {

  background(0);

  maxSnakes = 300;

  snakeArray = [];

  for(let i = 0; i<maxSnakes; i++) {

​

    let posX = map(random(0,1), 0, 1, -200, width+200); // I expanded it beyond the canvas so that snakes can be seen coming in from outside the frame.

    let posY = map(random(0,1), 0, 1, -200, height+200);

    let radius = map(random(0,1), 0,1, 10, 30);

    // I want to make it so that if it is larger it moves slower overall

    let magnitude = map(random(0,1), 0,1, 5, 0.5); // magnitude is less when the radius is larger, in theory, not sure if its working.

    let coefficient = map(random(0,1), 0,1, 0.002, 0.001) // I kept the coefficient the same for all snakes but it can be changed. Looks cooler when it is the same value for all snakes in my opinion.

    let newSnake = new snake(posX, posY, radius, magnitude, coefficient);

    snakeArray.push(newSnake);

  }

}

​

​

class snake {

  constructor(posX, posY, radius, magnitude, coefficient) {

    this.posX = posX;               // x-position of the shape

    this.posY = posY;               // y-position of the shape

    this.radius = radius;           // radius of the circle, could be changed if the shape is different

    this.magnitude = magnitude;     // magnitude refers to the amount the shape moves every frame

    this.coefficient = coefficient; // coefficient is the number that multiplies the frameCount in the noise function, I prefer it when it is the same for all snakes but it is a variable that can be changed regardless

  }

  // This class sets a new posX and posY based on a randomly generated heading

  update() {

    // update random heading

    let noiseRandom = noise(this.coefficient * frameCount);

    angleMode(RADIANS);

    let randomHeading = map(noiseRandom, 0, 1, -2*PI, 2*PI); //random heading

    // setting new posX, and posY based on the magnitude

    this.posX = this.posX + cos(randomHeading) * this.magnitude;

    this.posY = this.posY + sin(randomHeading) * this.magnitude;

    // The reason I used sin and cos is because setting the new values is similar to a right angle triangle: The magnitude can be represented as the hypotenuse, and the random heading an angle, then the adjacent value is the change in x, the opposite value is the change in y, then add said changes to the posX and posY respectively. Of course to calculate the new aformentioned values the formula sin(randomHeading) = x / magnitude has to be rearranged, and the same for cosine. 

​

  }

  // this class just draws the shape, it could really be anything, it could even be modified to be a rectangle or an ellipse or anything else you can think of.

  drawShape() {

    circle(this.posX,this.posY,this.radius);

  }

}