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);
}