//interactive design by KAL

void setup()//set up canvas
{
  //background(150,222,255);//background bright and light blue
  size(400,400);//size of canvas
  noStroke();//no outlines
  colorMode(RGB,400,400,400,400);
  frameRate(29.97);
  smooth();
}

void draw()
{
 //sky and timeline
  background(400,150,0);//background colour which is really red
  fill(0,400,400,500-mouseX*4);//light blue that will fade
  rect(0,0,400,400);//draw that light blue background which is daytime sky
  fill(0,0,200,mouseX*2-300);//so that it turns dark blue rather than just black
  rect(0,0,400,400);//the actual rectangle from ^
  stroke(400);//colour of timeline
  line(20,20,380,20);//draw timeline
  noStroke();//back to nope stroke
  fill(400);//counter for timeline colour
  ellipse(mouseX,20,10,10);//timeline counter
  
 
  
 //sky day 
  fill(400,400-mouseX*2,400-mouseX*3);//clouds
  ellipse(320+mouseX/2,150,150,15);
  ellipse(320+mouseX/2,120,60,75);
  ellipse(355+mouseX/2,125,60,60);
  ellipse(285+mouseX/2,125,60,60);
    ellipse(35-mouseX/3,130,150,15);
  ellipse(35-mouseX/3,100,60,75);
  ellipse(70-mouseX/3,105,60,60);
  ellipse(0-mouseX/3,105,60,60);
  
 //sky night
  stroke(400,mouseX*3-600);//draw ZZZ that appear in staggered1
  line(100,200,110,200);
  line(100,200,110,190);
  line(100,190,110,190);
  stroke(400,mouseX*3-700);//draw ZZZ that appear in staggered2
  line(90,165,105,165);
  line(105,165,90,180);
  line(90,180,105,180);
  stroke(400,mouseX*3-800);//draw ZZZ that appear in staggered3
  line(80,135,100,135);
  line(80,155,100,135);
  line(80,155,100,155);
  noStroke();//zzz has been drawn, no need for stroke anymore
  fill(400,mouseX*2-400);
  ellipse(90,40,2,2);//Stars everywhere!
  ellipse(390,50,2,2);
  ellipse(222,60,2,2);
  ellipse(155,70,2,2);
  ellipse(302,80,2,2);
  ellipse(10,90,2,2);
  ellipse(112,100,2,2);
  ellipse(240,110,2,2);
  ellipse(370,120,2,2);
  ellipse(244,130,2,2);
  ellipse(200,140,2,2);
  ellipse(30,150,2,2);
  ellipse(333,180,2,2);
  fill(400,mouseX-200);
  ellipse(90,40,5,5);//Glowing Stars everywhere!
  ellipse(390,50,4,4);
  ellipse(222,60,4,4);
  ellipse(155,70,3,3);
  ellipse(302,80,2,2);
  ellipse(10,90,5,5);
  ellipse(112,100,5,5);
  ellipse(240,110,3,3);
  ellipse(370,120,5,5);
  ellipse(244,130,5,5);
  ellipse(200,140,3,3);
  ellipse(30,150,5,5);
  ellipse(333,180,4,4);
  
  //creature
  fill(0);
  ellipse(200,300,200,200);//head
  ellipse(200,400,200,50);//feet
  triangle(100-(mouseX/8),150+(mouseX/3),150,215,100,300);//left then right ear
  triangle(300+(mouseX/8),150+(mouseX/3),250,215,300,300);
  triangle(380,240+((mouseX/10)*4),250,360,250,380);//tail
  fill(0,100);//to make the illusion of motion
  triangle(100-(pmouseX/8),150+(pmouseX/3),150,215,100,300);//left then right ear
  triangle(300+(pmouseX/8),150+(pmouseX/3),250,215,300,300);
  triangle(380,240+((pmouseX/10)*4),250,360,250,380);//tail
  fill(400);//white
  ellipse(160,300,50,100-(mouseX/4));//eyes left then right
  ellipse(240,300,50,100-(mouseX/4));
}