sunset under the palms

This artwork got inspired by a sunset drive two days ago. The view looked so pretty so I thought of recreating it through p5.js.

I started with drawing the palm trees using while() to have them all line up in the same line. I drew the leaves using arcs and lines.

//palm trees 
  while (x < width) {
    stroke(149, 99, 71);
    strokeWeight(1.6);
    fill(136, 96, 77);
    rect(x, 53, 5, 45);
    noFill();
    stroke("green");
    strokeWeight(1);
    line(x + 5, 50, x + 20, 30);
    line(x, 50, x - 20, 30);
    line(x, 50, x + 20, 30);
    line(x - 3, 50, x + 15, 35);
    arc(x + 32, 70, 90, 70, PI, PI + QUARTER_PI);
    arc(x + 20, 70, 90, 70, PI, PI + QUARTER_PI);
    arc(x + 45, 55, 90, 100, PI, PI + QUARTER_PI);
    arc(x + 45, 55, 90, 120, PI, PI + QUARTER_PI);
    arc(x + 43, 50, 90, 40, PI, PI + QUARTER_PI);
    arc(x + 20, 70, 70, 40, PI, PI + QUARTER_PI);
    x = x + 50;
  }

I also wanted to create a sunset animation with a circle moving as the sun and the moon appearing slowly. To create a more night effect, I also added stars and it slowly disappears by dawn.

let sunX = 100;
let sunY = 50;
let sunset = 0;

fill("yellow");
  circle(sunX, sunY, 50);

  //sun moving
  if (sunY < height + 20) {
    sunX = sunX + 3;
    sunY = sunY + 1;
    sunset = sunset + 3;

 //moon
fill(255, sunset);
circle(460, 30, 40);

The final result:

I really liked playing with loops and variables (global & local). For improvements, I would like to add more background objects (clouds, grass..) and play with more functions and loops.