Concept:
I wanted to create a piece about the movement of clouds in the sky. It is reminiscent of when I traveled with my family to Switzerland and I would always stare at the clouds from the balcony. They appear still, but when I would leave and come back, the clouds would’ve moved and changed positions and the sky would look different. The piece isn’t exactly about the Switzerland scenery I saw, of mountains covered in snow and trees, but rather a beach scene. The reason for choosing a beach scene is because there is more movement in it, of the waves and the shadows and light and birds and rain and wind. I wanted to be able to create movement using loops, so with every detail I added to the piece, I used a loop to make it more dynamic instead of being a still piece.
Code I’m proud of:
Overall, I was very proud of the clouds in the end. It was a struggle to figure out their movement and to vary their positions. I first created the clouds in the sky without thinking of their movement, and I was later going to use loops to generate them instead of creating them one by one. This was so confusing for me and I didn’t know how to do it. Moving the clouds was simple; I just had to increment their x-coordinates. What wasn’t simple was generating them at different positions with variable sizes. I used the random function to create the offset values for the clouds, slightly varying their shapes with every new iteration of the code.
//loop through clouds to draw them at different positions
for (let i = 0; i < 6; i++) {
//move the cloud
cloudX+=2;
//set cloud position based on current iteration
if (i == 0){
xDiff = x1;
yDiff = y1;
}
else if (i == 1) {
xDiff = x2;
yDiff = y2;
}
else if (i == 2) {
xDiff = x3;
yDiff = y3;
}
else if (i == 3) {
xDiff = x4;
yDiff = y4;
}
else if (i == 4) {
xDiff = x5;
yDiff = y5;
}
else if (i == 5) {
xDiff = x6;
yDiff = y6;
}
//drawing the cloud
ellipse(cloudX + xDiff, 75 + yDiff - 50, 100, 80);
ellipse(cloudX - 40 + xDiff, 60 + yDiff - 50, 80, 60);
ellipse(cloudX + 40 + xDiff, 70 + yDiff - 50, 60, 50);
ellipse(cloudX - 20 + xDiff, 70 + yDiff - 50, 80, 60);
}
The loop runs 6 times to draw the 6 different clouds. I used if and if else statements to set the values of xDiff and yDiff. Once they were set, each cloud was drawn according to its position as stored in those variables.
What I had to also figure out was how to get the clouds to loop, meaning when they leave the frame, I wanted it to reappear again on the other side. This was confusing to do and I wasn’t sure what code to write to make it work, but in the end I figured out that I simply had to reset the cloud position.
//reset clouds once they move off the screen
if (cloudX > width+50) {
cloudX = -100; //reset cloud to start over from the left
}
The code checks if the cloud has moved off the canvas and resets the x-coordinate, causing the clouds to loop back to the left side of the canvas and start moving across again.
In the night scene, I was proud of the code I wrote for the lighting.
//lightning
if (random(1) < 0.03) { //3% chance of lightning
stroke(255);
strokeWeight(3);
let xLightning = random(width);
let yLightning = 0;
//7 lines to form the lightning
for (let l = 0; l < 7; l++) {
let xLightningEnd = xLightning + random(-20, 20);
let yLightningEnd = yLightning + random(30, 50);
line(xLightning, yLightning, xLightningEnd, yLightningEnd);
xLightning = xLightningEnd;
yLightning = yLightningEnd;
}
}
The if statement at the beginning of this code segment was interesting to me because I could determine the chance that lighting would occur on the screen; I did a 3% chance of the lighting occurring. To generate the actual lighting piece, I chained 7 line segments together that varied in their x and y positions so that the lightning would occur on different parts of the screen. The lighting starts at a random x position at the top of the canvas and descends downwards (in a jagged way) based on random values for the end positions of the lines.
Embedded sketch: (press down to see night scene!!)
Reflection:
I was really happy with the end product. Every element of the piece required thinking, but bringing all the elements together formed a beautiful end piece. I kept adding random details which made for a coherent piece in the end. I started with the background (the sky and the sun and moon). I, then, worked on the clouds for a long time because I couldn’t figure out how to do it in the beginning. Then I added the beach scene with the moving waves and the changing grains of sand. The piece still felt empty, so I added a boat and added changing shadows and movement to make it look like the boat was swaying on the water. The scene still looked empty, so I added birds in the day and rain at night, and finally lighting because I wanted to contrast the day and night scenes more drastically. It took a long time to do this, but I eventually got a rhythm to my work, because I would focus on one element, make sure it worked before adding a new element. I didn’t add the beach until I finished the clouds and I didn’t add the boat until I finished the waves and sand, etc.
Ideas for future work and improvements:
For future work, I would love to play with more motion. I like the passage of time that this piece elicits. It’s as if it’s a time lapse of a boat on the water, from day to night. I want to play with more movement in different scenes, maybe like the look of building in the day and at night when all the lights are on, or when the street lamps turn on at night, illuminating the world, or when the world is so busy in the morning with cars rushing past and people trying to get to work and school and more, but the quiet of night when few cars pass on the road. I might also want to do something like this: as if you are sitting in a car and watching the view from the window, and the view is constantly changing as you drive on and on.
For improvement, I would like to make my code more efficient. I kept changing the code, adding more and more variables to be able to iterate and change them. However, maybe if I used an array for the clouds, it would’ve been easier to do, or if I made the cloud an object in and of itself. Maybe I’d also want to use classes to encapsulate the behaviors of the different elements I have in the scene, of the clouds, the birds, the lighting, etc.