let numStars = 125;

var points = [];

let x = 0;

let y

let mycity;

let angle = 0;

let speed = 1.8;

let amt, startColor, newColor;

let h = 0;

var balls = [];

​

​

framecount = 1;

​

//SPLICE!!!!!!!!!!

function setup() {

  startColor = color(framecount, 0, 0, 0);

  newColor = color(framecount, 200, 200, 200);

  amt = 0;

​

  background(startColor);

  createCanvas(windowWidth, windowHeight);

  stroke(255);

  fill(255);

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

    stars.push(new Star(random(width), random(height * .7), random(-10, 5)));

  }

}

​

function draw() {

​

  {

    colorMode(HSB);

    fill(h, 90, 90, .03,);

    rect(0, 0, width, height);

    h++;

    colorMode(RGB);

    if (h > 360) {

      h = 0;

    }

​

    scrollCity(x);

    scrollCity(x + width);

    x -= speed;

    if (x <= -width) x = 0;

    background(framecount, 19, 19, 19);

    fill(255);

    ellipse(mouseX, mouseY, 2, 2);

  }

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

    stars[i].update();

  }

​

  var point = {

    x: mouseX,

    y: mouseY

  };

  points.push(point);

  if (points.length > 100) {

    points.splice(5, 10, .5);

  }

​

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

    // Draw ellipse for each element in the arrays. 

    // Color and size to loop's counter: i.

    noStroke();

    fill(255, 255, 255, 10, .1);

    ellipse(points[i].x, points[i].y, i, i);

  }

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

    balls[i].update();

    balls[i].render();

  fill(255);

    if (balls[i].ballisFinished()) {

      balls.splice(i, .1);

    }

  }

}

​

class Star {

  constructor(x, y, s, c) {

    this.x = x;

    this.y = y;

    this.s = s;

    this.c = 0.3;

  }

  update() {

    fill(255, 255, 102, random(1000), random(.5, 0));

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

    this.x += random(.5, .5);

​

    if (this.x >= width) {

      this.x = 0;

    }

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

    // this.s+=.2; 

    this.s -= this.c;

    if (this.s <= -10 || this.s >= 5) {

      this.c = this.c * -1;

    }

​

  }

}

​

function scrollCity(x) {

  push();

  translate(x, height/4);

  fill(framecount, 100, 100, 100);

  rect(0, 500, 50, 250);

  rect(50, 550, 125, 400, 50);

  rect(190, 600, 150, 300);

  rect(250, 510, 190, 400);

  rect(310, 600, 20, 400);

  rect(400, 640, 150, 902);

  rect(460, 680, 90, 950);

  rect(600, 520, 50, 400, 50);

  rect(560, 470, 130, 400);

  rect(680, 500, 160, 400, 100);

  rect(840, 470, 70, 400);

  rect(890, 600, 150, 400);

  rect(1000, 510, 150, 400);

  rect(1100, 460, 150, 400);

  rect(1200, 680, 150, 400); 

  rect(1350, 690, 150, 450);

  rect(1500, 540, 225, 500,15);

  rect(1700, 600, 205, 500);

  rect(1900, 410, 190, 400);

  rect(2050, 540, 200, 450,10);

   rect(2250, 590, 200, 450);

 rect(2400, 660, 250, 700,50);

​

  pop();

}

function mousePressed() {

push();

  if (mouseY < height) {

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

      balls.push(new Ball((mouseX + random(-10, 10)), mouseY + random(-10, 10)));

    }

  }

  pop();

}

​

class Ball {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.speed = 4;

    this.gravity = 0.1;

    this.diameter = (dist(x, y, mouseX, mouseY)) * 1;

​

    this.ax = random(-this.speed, this.speed);

    this.ay = random(-this.speed, this.speed);

​

    this.colour = random(['#FEDA25', '#FEA925', '#FFFA69', '#FF6F2B', '#DE5949', '#FFBFB4', '#FCD347']);

  }

​

  update() {

    this.diameter = this.diameter - 0.15;

    this.x += this.ax / 2;

    this.y += this.ay / 2;

​

        this.x += random(-this.speed / 2, this.speed / 2);

    this.y += random(-this.speed / 2, this.speed / 2);

  }

​

  ballisFinished() {

    if (this.diameter < 0) {

      return true;

    }

  }

​

  render() {

    //print(this.colour);

    noStroke();

    if (this.diameter > 0) {

      fill(this.colour);

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

    }

​

  }

}