// Intro to IM - Michael Shiloh

// Dec. 12, 2022

// Final Project

​

stars = [];

colors = ["#f7766d", "#f2e88f", "#75fa87", "#3a9fde"];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  stars.push(new Star());

}

​

function draw() {

  var color1 = color(36, 42, 207);

  var color2 = color(184, 97, 163);

  setGradient(0, 0, windowWidth, windowHeight, color1, color2, "Y");

  for (let i = stars.length - 1; i >= 0; i--) {

    stars[i].moveStars();

    stars[i].show();

    if(stars[i].y > windowHeight) {

      stars.splice(i, 1);

    }

  }

  if (frameCount % 100 == 0) {

    stars.push(new Star());

  }  

}

​

// Gradient code reference: https://codeburst.io/sunsets-and-shooting-stars-in-p5-js-92244d238e2b

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

  noFill();

  if (axis == "Y") { // Top to bottom gradient

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

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

      var c = lerpColor(c1, c2, inter);

      stroke(c);

      line(x, i, x + w, i);

    }

  } else if (axis == "X") { // Left to right gradient

    for (let j = x; j <= x + w; j++) {

      var inter2 = map(j, x, x + w, 0, 1);

      var d = lerpColor(c1, c2, inter2);

      stroke(d);

      line(j, y, j, y + h);

    }

  }

}

​

class Star {

  constructor() {

    this.x = random(0, windowWidth);

    this.y = -10;

    this.size = random(10, 20);

    this.speed = 1;

    this.vy = 0.75;

    this.color = random(colors);

  }

  moveStars() {

    this.y += this.speed;

  }

  show() {

    noStroke();

    fill(this.color);

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

  }

}