Assignments 2: Day and Night

Concept:

In this assignment I tried to add the change of day and night as well as the weather. Using basic shapes and sort of complementary colours for each time, I managed to hint at small elements that might resemble what happens during the day or night. I also didn’t try to stick into one biome; you can imagine this being anywhere.

Highlight of Code: 

I’m proud with how I manged to successfully bound the day and night while changing several colours elements.

function draw() {
  background(145,164,176);
  
  fill(203,199,172);
  circle(x,150,100);
  fill(198,178,87);
  circle(x,150,50);
  ellipse(50,352,200,150);
  triangle(399,242,400,400,0,400);
  
  
  if(x>width){
     changeDirection = true
     }
  else if (x<=55){
    changeDirection = false
  }
//(day)
  
  if (x>=55 && changeDirection == false){
    x=x+1.5

  }
  // (night)
  else if (changeDirection == true){
    x=x-1.5
       fill(125,135,142);
        background(42,53,69);
      circle(x,150,100); 
    ellipse(50,352,200,150);
       triangle(399,242,400,400,0,400);
    fill(78,110,168);
  circle(x,150,70);
    fill(146,152,163);
    circle(x,150,50);

As for my clouds I thought it was better for them to go through the frame and appear from the other side.

 a = a + speed; //make the cloud 1 move 
  if (a > width) { 
    a= -400;
  }
  b = b + speed/2;//make the cloud 2 move
  if (b > width) { 
    b= -200;
  }
  
  noStroke();
  
//draw first cloud
  ellipse(a,100,200,80) 
  ellipse(a+200,80,100,80)
  ellipse(a+50,120,150,50)
  //draw second cloud
  ellipse(a+300,135,170,90)
  ellipse(a+50,130,90,70)
  ellipse(a+100,170,100,80)
  noStroke()
  fill(180)
  //draw third cloud
  ellipse(b+130,170,150,70)
  ellipse(b+120,160,150,30)
  ellipse(b+150,190,100,50)
  ellipse(b+150,130,80,50)
  

Reflection and Ideas for Future Work:

I really wish I would spend way less time trying to figure out how to do several things and make them all appear smoothly within one frame. I also want to work with more complex shapes which might get me into animation.

EDIT: https://editor.p5js.org/mariamalkhoori/sketches/7jcUCFfj6