Untitled

let cloudX = 0; // cloud's position

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(135, 206, 235); // light blue sky

  drawCloud(cloudX, 100); // cloud coordinate
  moveCloud();

  drawGrass();

  // flower coordinates
  drawFlower(30, 350);
  drawFlower(100, 300);
  drawFlower(170, 350);
  drawFlower(240, 300);
  drawFlower(310, 350);

}

function drawFlower(x, y) {
  fill(255, 204, 229); // pink petals
  stroke(0); // adds a black outline to each petal
  // petal coordinates and size
  circle(x, y, 30);
  circle(x + 40, y, 30);
  circle(x + 20, y - 20, 30);
  circle(x + 20, y + 20, 30);

  fill(204, 153, 255); // purple centre 
  circle(x + 20, y, 20);
}

function drawCloud(x, y) {
  fill(255); // white cloud
  noStroke(); // removes the black outline of the cloud
  // 'building' the cloud
  ellipse(x, y, 80, 60);
  ellipse(x + 50, y + 10, 60, 40);
  ellipse(x - 50, y + 10, 60, 40);
}

function moveCloud() {
  cloudX = (cloudX + 1) % (width + 50); 
  // moving the cloud's position by one and increasing the canvas size by 50
  // % is used so the cloud reappears on the left side
}

function drawGrass() {
  fill(102, 204, 0); // green grass
  rect(0, 250, 400, 200);
}