Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*
Night Sky and Sea
 By: Vicky Liu
 
 Control the little girl by using left and right keys to collect stars dropping from the night sky
 
 references:
 https://forum.processing.org/one/topic/shrinking-and-growing-shapes.html
 http://www-acad.sheridanc.on.ca/PROG14998/2016/interactive-toy/john_yue_interactive_toy/index.html
*/

//girl variables
float girlX=110;
float girlY=320;

//star variables
float starX= random(10, 390);
float starY= 0;
float speed= 0.3;

void setup() {
  size(400, 400);
  rectMode(CORNER);
  ellipseMode(RADIUS);
}

void draw() { 
  frameRate(60);
  background(12, 20, 33);

  drawSea();
  drawSeaLightEffect();
  drawPurplePlanet();
  drawDarkBluePlanet();
  drawBluePlanet();
  drawBlackPlanet();
  drawStarsInSky();
  drawGirl();
  moveGirl();
  drawStar();
}

//sea
void drawSea() {
  fill(0);
  rect(0, 300, 400, 5);
  fill(24, 64, 91);
  rect(0, 304, 400, 25);
  fill(27, 73, 103);
  rect(0, 328, 400, 25);
  fill(31, 83, 118);
  rect(0, 352, 400, 25);
  fill(35, 93, 132);
  rect(0, 376, 400, 25);
}  

//light effect on sea 
void drawSeaLightEffect() {
  //dark blue
  fill(10, 39, 55);
  rect(0+sin(frameCount*0.3), 360, 110, 20);
  rect(40+sin(frameCount*0.3), 320, 100, 5);
  rect(140, 350, 100+sin(frameCount*0.3), 7);
  rect(180+sin(frameCount*0.3), 330, 80, 3);
  rect(280, 320, 150+sin(frameCount*0.3), 4);
  rect(210+sin(frameCount*0.3), 312, 140, 3);
  rect(320, 340, 80+sin(frameCount*0.3), 4);
  rect(310+sin(frameCount*0.3), 370, 90, 20);
  //ight blue
  fill(81+sin(frameCount*0.3), 123, 209);
  rect(138, 322, 60+sin(frameCount*0.3), 8);
  rect(248, 320, 42+sin(frameCount*0.3), 4);
  rect(288, 313, 71+sin(frameCount*0.3), 6);
  rect(240+sin(frameCount*0.3), 340, 80, 9);
  //dark green
  fill(59, 118, 132);
  rect(210+sin(frameCount*0.3), 320, 130, 5);
  rect(190, 320, 80+sin(frameCount*0.3), 2);
  rect(230+sin(frameCount*0.3), 330, 50, 10);
  rect(320+sin(frameCount*0.3), 328, 80, 4);
  //light green
  fill(208, 249, 241);
  rect(240, 312, 60+sin(frameCount*0.3), 3);
  rect(230, 320, 15+sin(frameCount*0.3), 2);
  rect(258+sin(frameCount*0.3), 330, 20, 3);
  rect(330+sin(frameCount*0.3), 328, 20, 4);
  rect(238, 340, 30+sin(frameCount*0.3), 4);
}  


//dark blue planet, shrinks and enlarges
float darkBlueRadius=60;
boolean ellipseIsShrinking= false;
void drawDarkBluePlanet() {
  fill(9, 31, 52);
  ellipse(320, 160, darkBlueRadius, darkBlueRadius);
  // Make smaller if shrinking, bigger otherwise
  if (ellipseIsShrinking) darkBlueRadius--;
  else darkBlueRadius++;

  // Test if instructions should be reversed
  if (darkBlueRadius == 60 || darkBlueRadius == 100) ellipseIsShrinking = !ellipseIsShrinking;
}

//black planet, shrinks and enlarges
float blackRadius=30;
boolean ellipse2IsShrinking= false;
void drawBlackPlanet() {
  fill(9, 10, 12);
  ellipse(130, 120, blackRadius, blackRadius);
  // Make smaller if shrinking, bigger otherwise
  if (ellipse2IsShrinking) blackRadius--;
  else blackRadius++;

  // Test if instructions should be reversed
  if (blackRadius == 1 || blackRadius == 35) ellipse2IsShrinking = !ellipse2IsShrinking;
}


//purple planet, transparency decreases as radius increases
void drawPurplePlanet() {
  int purpleTrans=255;
  int purpleRadius=10;
  while (purpleRadius<= 70) {
    noStroke();
    fill(44, 38, 62, purpleTrans);
    ellipse(30+sin(frameCount*0.1), 220, purpleRadius, purpleRadius);
    purpleRadius= purpleRadius+10;
    purpleTrans= purpleTrans-30;
  }
}

//blue planet, transparency decreases as radius increases
void drawBluePlanet() {
  int blueTrans=255;
  int blueRadius=10;
  while (blueRadius<= 140) {
    fill(46, 65, 98, blueTrans);
    ellipse(350, 50+sin(frameCount*0.1), blueRadius, blueRadius);
    blueRadius= blueRadius+10;
    blueTrans= blueTrans-10;
  }
}

//stars in the sky
void drawStarsInSky() {
  stroke(155, 130, 204, 150);
  strokeWeight(4);
  point(20, 20);
  point(40, 30);
  point(80, 80);
  point(50, 120);
  point(80, 160);
  point(140, 240);
  point(200, 120);
  point(360, 260);
  point(170, 70);
  point(230, 280);
  point(160, 190);
  point(280, 260);
}

//girl  
void drawGirl() {
  noStroke();
  fill(255, 175, 185);
  ellipse(girlX, girlY, 10, 10);
  stroke(247, 215, 221);
  strokeWeight(2);
  fill(247, 215, 221);
  line(girlX-6, girlY+20, girlX-12, girlY+27);
  line(girlX+6, girlY+20, girlX+12, girlY+27);
  noStroke();
  fill(227, 166, 222);
  quad(girlX-6, girlY+20, girlX+6, girlY+20, girlX+10, girlY+32, girlX-10, girlY+32);
  fill(255, 175, 185);
  quad(girlX-10, girlY, girlX+10, girlY, girlX+16, girlY+20, girlX-16, girlY+20);
  fill(56, 40, 46);
  ellipse(girlX, girlY+35, 16, 2);
  fill(255, 229, 239);
  ellipse(girlX+2, girlY-6, 3, 2);
  ellipse(girlX+7, girlY-2, 1, 2);
}

//girl moving horizontally with left and right keys
void moveGirl() {
  if (keyPressed) {
    if (keyCode == LEFT) {
      girlX = girlX - 2;
    } else if (keyCode == RIGHT) {
      girlX = girlX + 2;
    }
  }

  //keep girl constrained within the screen
  girlX= constrain(girlX, 0, 400);
}

//stars
void drawStar() {
  fill(207, 198, 229);
  triangle(starX, starY-13, starX+8, starY+3, starX-8, starY+3);
  triangle(starX, starY-5, starX+12, starY-3, starX+4, starY+6);
  triangle(starX, starY+5, starX-12, starY-3, starX+4, starY-6);
  triangle(starX-6, starY, starX+8, starY, starX+8, starY+13);
  triangle(starX+6, starY, starX-8, starY, starX-8, starY+13);

  //star falls from the sky, and then accelerates
  starY= starY+speed;
  speed= speed+ 0.1;

  //if stars drop in the sea
  if (starY>= 360) {
    drawStarSinks();
    starX = random(10, 390);
    starY = 0;
    speed = 0;
  }

  //if star drops on the girl
  if (starX>= girlX-50 && starX<= girlX+50&& starY>= girlY&& starY< girlY+30) {
    starX= random(10, 390);
    starY= 0;
    speed= 0;
    drawGirlGlows();
  }
}

//Star sinks in the sea
void drawStarSinks() {
  frameRate(5);
  fill(6, 23, 32);
  ellipse(starX, starY+3, 24, 6);
  fill(207, 198, 229);
  ellipse(starX, starY-2, 8, 3);
}

//Girl's head glows
void drawGirlGlows() {
  frameRate(5);
  fill(245, 237, 255, 100);
  ellipse(girlX, girlY, 20, 20);
  fill(245, 237, 255, 60);
  ellipse(girlX, girlY, 30, 30);
}