​

function setup() {

  createCanvas(600, 600);

​

  //create creatures

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

    creatures.push(new Creature(random(width), random(height)));

  }

}

​

function draw() {

  background(20, 20, 30, 50);

​

  //let the creatures update and display themselves

  for (let c of creatures) {

    c.update();

    c.display();

  }

}

​

//Create the position, size and movement of the creatures

class Creature {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.size = random(30, 80);

    this.noiseOffset = random(1000);

  }

​

  //make the smooth, yet random movement

  update() {

    this.x += noise(this.noiseOffset) * 4 - 2;

    this.y += noise(this.noiseOffset + 1000) * 4 - 2;

    this.noiseOffset += 0.01;

  }

​

  display() {

    push();

    translate(this.x, this.y);

​

    stroke(255, 150);

    fill(100, 200, 255, 150);

​

    //useing the sin and cos which only return 1 or -1 to keep the values under 255

    let r = 100 + 155 * sin(frameCount * 0.01 + this.noiseOffset);

    let g = 50 + 150 * cos(frameCount * 0.01 + this.noiseOffset);

    let b = 150 + 105 * sin(frameCount * 0.02 + this.noiseOffset);

​

    //create a glowing effect

    noStroke();

    fill(r, g, b, 30);

    ellipse(0, 0, this.size * 1.5, this.size * 1.5);

​

    pop();

  }

}

​