let numStars = 100;

var points = []; 

//let star;

let x

let y

let angle = 0;

let clouds = [];

let numClouds =1;

framecount=1;

​

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

function setup() {

  createCanvas(1200, 1000);

 stroke(255);

  fill(255);

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

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

  }

​

}

​

function draw() {{ 

 // background(19,19,19);

 background(framecount,19,19,19);

     if (mouseIsPressed === true) {

       fill(255);

      ellipse(mouseX, mouseY, 2, 2);

       fill(0);

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

    clouds.push(new Cloud(random(width),random(height),random(10,20)));   

     line(mouseX, mouseY, pmouseX, pmouseY);

    background(255,255,102);  

  }  

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

    clouds[i].update();

  }

    }

    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 > 50) {

    points.splice(0,1);

  }

  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,140,50,200); 

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

  }

  //https://editor.p5js.org/projects/Sy1ECGcA

}

​

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,1);

    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; }

​

    fill(28,32,50);

        noStroke(); 

    rect(0,760,50,250);

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

    rect(175,810,125,300);

    rect(290,710,20,400);

    rect(290,650,20,400);

    rect(310,740,150,902);

    rect(460,780,90,950);

    rect(540,690,20,400,50);

    rect(560,765,130,400);

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

    rect(840,810,70,400);

    rect(890,760,150,400);

    rect(1000,850,150,400);

    rect(1100,720,150,400);

​

  }

}

  class Cloud {

    constructor(d,r,g,j) {

      this.d = d;

    this.r= r;

      this.g= g;

      this.j= .3;

    }

    update() {

    fill(192,244,255)

    noStroke();

    ellipse(this.d,this.r,this.g);

    this.d+= random(.5,1);

    noStroke();

    ellipse(this.d, this.r, 24, 48);

    ellipse(this.d+20,this.r+20,48,48);

    ellipse(this.d+60,this.r+20,48,48);

    ellipse(this.d+40,this.r-20,48,48);

    ellipse(this.d+20,this.r-20,48,48);

    ellipse(this.d+80,this.r,48,48);

      //https://editor.p5js.org/seak/sketches/SJ8gHRzp-

    if (this.d >= width)

    { this.d=0;

    }

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

    // this.s+=.2; 

    this.g-=this.c;

    if (this.g<=0 || this.g>=10) 

    { this.j=this.j*0; }

    }

  }