All Posts

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. 

Concept & Inspiration.

My primary inspiration comes from the game Flappy Bird, which I used to play on my phone as a child. While reflecting on it, I didn’t intend to fully replicate the game, but rather merge its concept with something else. I then remembered the children’s book The Ugly Duckling and thought about incorporating that theme. One duckling may be considered ugly, but what if there were an endless number of them? Would they still seem as ugly?

With this idea in mind, I decided to write code using classes, and through careful use of color, I aimed to show that a whole flock of supposedly ugly ducklings might not look so ugly after all.

Highlights.

For this project, I created a class and made it an array birds[] so that the user can add endless number of ducklings on canvas. Moreover, I used the .push and .pop functions for adding and removing the ducklings. Even though it took me a while to understand how to flip the bird horizontally after bouncing, I eventually implemented it in my code by creating the facingRight variable inside the class.

// Flip the bird after bouncing
if (this.x > width - 60 || this.x < 0) {
  this.xspeed *= -1;
  this.facingRight = !this.facingRight;
}

It was also the first project where I worked with text() (which was relatively easy) and some of the text-related functions.

 if (birds.length === 0) {
  fill(255);
  textSize(24);
  textAlign(CENTER);
  textStyle(BOLD);
  textFont("Helvetica");
  text("mouse click to add a duckling", width / 2, height / 2);
}

Reflection.

I am proud of this project, as I was able to implement almost all the new functions we learned in class this week. Additionally, I experimented with incorporating text for the first time. One challenge I faced was with the ducklings near the right corner, which glitch after a mouse click. I attempted to solve this issue using generative AI, but unfortunately, I wasn’t successful.

Overall, I believe the project achieved its intended purpose. In the future, I hope to create a more detailed background for the canvas, as I didn’t have enough time to include that in this version.

Embedded Sketch.

Mouse click to add a new duckling & click any key to remove the last one.

Inspiration

For this project, the task was to create a generative art piece. I decided I wanted to create something that captured the beauty of natural randomness, yet felt interactive and personal. I really love stargazing so this idea was immediately accompanied by a desire to incorporate stars (in a night sky setting) in some way. I thought it would be interesting to also use the stars to make randomly generated constellations. Initially, most of my ideas were all over the place and ended up progressing along with different stages of project.

Concept

After combining all of these concepts and also trying to add an element of interactivity, I arrived at a more cohesive idea. This piece essentially generates stars that slowly drift across the canvas and form constellations by connecting with nearby stars. These connections fade as the stars move farther apart, creating an ever-changing night sky. By clicking on the canvas, users can add new stars, and hovering the mouse near existing stars creates connections with the mouse pointer, making the viewer an active part of the art. I tried to replicate a portion of the night sky by creating a background gradient, which shifts from dark blue to a purplish hue.

Implementation

Here’s what it looks like!

The core of the project focuses on the generative placement and connection of stars, while other features such as mouse interactions and background gradients enhance the experience.

Most of the functionality of the code resides in the Star() class. I also initially created a global variable numStars which controls the initial number of stars that appear on the canvas (currently set to 70). However, more stars can be added when the user clicks on the screen.

Here are important aspects of the code that I’m proud of :))

1. Generating Stars and Constellations

The star generation begins by randomly placing stars across the canvas. Each star drifts slowly, giving the impression of a calm, subtly changing night sky. The stars are connected by lines if they are within a specific distance from each other, creating constellations. These lines fade with increasing distance between the stars they connect and disappear completely once they cross a certain threshold. The distance threshold is adjustable (maxDistance), allowing for varying constellations as stars drift closer or further from one another.

/ Connecting stars that are within a certain distance
  connect(stars) {
    for (let i = 0; i < stars.length; i++) {
      let d = dist(this.x, this.y, stars[i].x, stars[i].y);
      if (d < maxDistance) {
        stroke(255, 255, 255, map(d, 0, maxDistance, 255, 0)); // making line fade as distance increases
        line(this.x, this.y, stars[i].x, stars[i].y);
      }
    }
  }

2. User Interaction

User interaction is a key feature of the project. Clicking anywhere on the canvas creates a new star at the mouse’s location.

// Adding a new star at the mouse position when the mouse is clicked
function mousePressed() {
  let size = random(2, 5); // the star created has a randomized size
  stars.push(new Star(mouseX, mouseY, size)); // creating a new star at the mouse position (with given size)
}

In addition to adding stars, the mouse also exerts an influence on the stars already in place. When the mouse hovers near a star, stronger and thicker connections are drawn between the star and the mouse, creating a sense of gravitational pull. This connection changes based on the distance between the mouse and the stars, offering a layered sense of interactivity.

// Connecting stars according to mouse position
  mouseConnect() {
    let mouseDist = dist(this.x, this.y, mouseX, mouseY);
    
    // If the star is within the influence of the mouse, create more prominent connections
    if (mouseDist < mouseInfluenceDistance) {
      stroke(233, 217, 255, map(mouseDist, 0, mouseInfluenceDistance, 255, 50)); // Stronger lines with mouse
      strokeWeight(map(mouseDist, 0, mouseInfluenceDistance, 2, 0.5)); // Thicker lines near the mouse
      line(this.x, this.y, mouseX, mouseY); // Draw line to the mouse position
    }
  }

3. Gradient Background

The background gradient is crucial to creating a more realistic cosmic atmosphere. A vertical gradient transitions from a deep, dark blue at the top to a lighter, purplish hue at the bottom, simulating the natural gradient of a night sky fading into early dawn. This gradient creates a contrast to the white stars and their connections, making the work feel more immersive. In creating this gradient, I learnt how to use lerpColor(), which allowed me to smoothly blend two colors based on a transition value. By mapping the vertical position of each line to a gradient value, I was able to simulate the soft shift from night to early morning. The setGradient() function essentially draws horizontal lines from the top to the bottom of the canvas (slightly changing the color each time to create a smooth gradient).

// Creating a vertical gradient
function setGradient(x, y, w, h, c1, c2) {
  for (let i = y; i <= y + h; i++) {
    let inter = map(i, y, y + h, 0, 1); 
    let c = lerpColor(c1, c2, inter); // when inter is 0,  the colour is c1 and when inter is 1, the colour is c2 (for any other value it is a mix of c1 and c2)
    stroke(c);
    line(x, i, x + w, i); // drawing a line across the width of the gradient area
  }
}

Reflections and Further Improvements

This assignment gave me the chance to play around with randomness and interactivity in a simple yet engaging way. I enjoyed seeing how small things like mouse movement and clicks could bring the stars to life and create an immersive atmosphere. The project feels peaceful yet active, and I’m happy with how the core mechanics came together.

Looking ahead, I’d like to add more depth to the stars—maybe a twinkling effect or layered constellations with different star types. It could also be interesting to introduce sound, where each star interaction triggers a soft note, giving the project an audio element. Another idea is to have the background gradient shift gradually over time, mimicking the change from night to dawn for added realism. I could maybe also experiment with adding other celestial bodies like planets and nebulae.

Overall, I am pretty proud of how this turned out and look forward to making more advanced projects :))