let numStars = 70;

let maxDistance = 150;

let mouseInfluenceDistance = 200;

​

function setup() {

  createCanvas(600, 600);

  noStroke();

  // Creating stars and adding them to the array

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

    let x = random(width);

    let y = random(height);

    let size = random(2, 5);

    stars.push(new Star(x, y, size));

  }

}

​

function draw() {

  // Creating a gradient background from dark blue to a lighter night sky color

  setGradient(0, 0, width, height, color(2, 2, 48), color(80, 40, 130));

​

  // Drawing and update all stars

  for (let i = 0; i < stars.length; i++) {

    stars[i].move();

    stars[i].display();

    stars[i].connect(stars);

    stars[i].mouseConnect();

  }

}

​

// Adding a new star at the mouse position when the mouse is clicked

function mousePressed() {

  let size = random(2, 5); // the star created has a randomized size

  stars.push(new Star(mouseX, mouseY, size)); // creating a new star at the mouse position (with given size)

}

​

// Star class

class Star {

  constructor(x, y, size) {

    this.x = x; // x position of star

    this.y = y; // y poistion of star

    this.size = size; // size of star

    this.speedX = random(-0.5, 0.5); // horizontal speed of star to create a slow random drift

    this.speedY = random(-0.5, 0.5); // vertical speed of star

    this.color = color(255, 255, random(200, 255)); // colour of star (almost white)

  }

  // Displaying the star

  display() {

    fill(this.color);

    ellipse(this.x, this.y, this.size);

  }

  // Move the star

  move() {

    // Updating the x and y speeds of the star

    this.x += this.speedX;

    this.y += this.speedY;

    // Wrapping around the edges (every time a star reaches a boundary it reappears on the opposite side)

    if (this.x < 0) this.x = width;

    if (this.x > width) this.x = 0;

    if (this.y < 0) this.y = height;

    if (this.y > height) this.y = 0;

  }

  // Connecting stars that are within a certain distance

  connect(stars) {

    for (let i = 0; i < stars.length; i++) {

      let d = dist(this.x, this.y, stars[i].x, stars[i].y);

      if (d < maxDistance) {

        stroke(255, 255, 255, map(d, 0, maxDistance, 255, 0)); // making line fade as distance increases

        line(this.x, this.y, stars[i].x, stars[i].y);

      }

    }

  }

  // Connecting stars according to mouse position

  mouseConnect() {

    let mouseDist = dist(this.x, this.y, mouseX, mouseY);

    // If the star is within the influence of the mouse, create more prominent connections

    if (mouseDist < mouseInfluenceDistance) {

      stroke(233, 217, 255, map(mouseDist, 0, mouseInfluenceDistance, 255, 50)); // Stronger lines with mouse

      strokeWeight(map(mouseDist, 0, mouseInfluenceDistance, 2, 0.5)); // Thicker lines near the mouse

      line(this.x, this.y, mouseX, mouseY); // Draw line to the mouse position

    }

  }

}

​

// Creating a vertical gradient

function setGradient(x, y, w, h, c1, c2) {

  for (let i = y; i <= y + h; i++) {

    let inter = map(i, y, y + h, 0, 1); 

    let c = lerpColor(c1, c2, inter); // when inter is 0,  the colour is c1 and when inter is 1, the colour is c2 (for any other value it is a mix of c1 and c2)

    stroke(c);

    line(x, i, x + w, i); // drawing a line across the width of the gradient area

  }

}

​