Assignment 2: Cloudy Day

For this assignment, we were tasked with using either a for loop or a while loop to make a simple work of art. I decided to make a UAE flag with some clouds moving in the background using loops.

I started by randomizing 5 starting positions for the clouds to make them different every time the program is run.

let cloudPositions = []; // Array to hold the positions of clouds

function setup() {
  createCanvas(800, 600);
  
  // Create 5 clouds at random positions and add them to the array
  for (let i = 0; i < 5; i++) { 
    cloudPositions.push(random(-50, width - 50));
  }
}

After that I used another for loop to move the clouds in the using the drawCloud() function I wrote:

fill('white');
for (let i = 0; i < cloudPositions.length; i++) {
  drawCloud(cloudPositions[i], 100 + i * 80); // Drawing each cloud at a different vertical position
  cloudPositions[i] += 1; // Moving the cloud to the right
  if (cloudPositions[i] > width) { // Reset cloud position after moving off screen
    cloudPositions[i] = -100;
  }
}

For reference, this is my drawCloud function, it uses multiple ellipses to make a cloud shape:

function drawCloud(x, y) {
  ellipse(x, y, 60, 60);
  ellipse(x + 20, y - 20, 70, 70);
  ellipse(x + 40, y, 50, 50);
  ellipse(x + 60, y - 10, 60, 60);
}

Overall, this is my final art piece:

Looking to the future, this artwork seems very plain, I could add some more elements such as a sun or some buildings.