Night Sky

var yAxis = 1;

var rStars;

var c1, c2, c3;

var stars = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0);

​

  c1 = color(0);

  c2 = color(16, 45, 117);

  c3 = color(244, 89, 66);

  // gradient background 1

  setGradient(0, 0, windowWidth, windowHeight / 2, c1, c2, yAxis);

  // gradient background 2

  setGradient(0, windowHeight/2, windowWidth, windowHeight, c2, c3, yAxis);

  rStars = random(15,35);

  // fill stars array

  for (var i=0; i<rStars; i++) {

    stars.push(new Star());

  }

}

​

function draw() { 

  // twinkling stars

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

    stars[i].display();

    stars[i].twinkle();

  }

}

​

// creates gradients

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

  noFill();

  if (axis == yAxis) {  // Top to bottom gradient

    for (var 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);

    }

  } 

}

​

// star

function Star() {

  this.x = random(5, width - 5);

  this.y = random(10, height - 10);

  this.r = random(2,5);

  this.display = function() {

    stroke(33, 121, 145);

    fill(247, 255, 196);

    this.rc = constrain(this.r, 0, 9);

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

  };

​

  this.twinkle = function() {

    if (this.r < 3) {

      this.r += random(-.5,1.5);

    } else if (this.r >= 3 && this.r < 6) {

      this.r += random(-1,1);

    } else if (this.r >=6 && this.r <=9) {

      this.r += random(-1.5,0.5);

    }

  }

}

​

// add stars on mousepress

function mousePressed() {

  setup();

}