Author: Abdelrahman Mallasi

Concept and Design:

Through my midterm project, I aim to illustrate the catastrophic impacts of global warming and climate change visually, emphasizing the immediate need to address this challenge. My project aims to shows the contrast between a world where we act on climate change and one where we don’t. I envision a canvas split into two parts:

1. The Tree: This side represents the vibrant life we’re accustomed to. As time progresses, the tree’s leaves gradually fade, losing their color. This change is symbolic of the gradual death of nature due to the neglect of environmental well-being.
2. The Rising Tide: Here, a sea will be portrayed. As time passes, the water level subtly rises, reflecting the real threat of rising sea levels due to melting ice caps.

Designing the Code:

1. Functions: Key functions will handle the color transitions of the tree leaves and the water’s incremental rise. The “lifetime” feature in p5.js will be used in simulating these changes over time, giving viewers a tangible sense of progression.
2. Classes: I envision there to be at least two classes: ‘Tree’ and ‘Sea’ classes, which will encapsulate their properties and behaviors.
3. Interactivity: To engage the viewers more deeply, I’m considering having the users press down the mouse in order for the changes to the Tree and Sea to occur – this would reflect the impact and responsibility humans hold when it comes to the crisis of climate change and global warming.

Challenges and Mitigating Risks:

Making the water rise in a way that looks realistic, rather than just moving a flat blue rectangle upward, can be tricky. I’m thinking of Investigating how using the noise() function in p5.js can give the water a more natural appearance.

Also, creating a seamless transition in the color of the tree leaves as they fade might be challenging. I started looking into p5.js’s lerpColor() function, which interpolates between two colors. I want to explore this function to find the most visually appealing transition.

Concept

Flamenco is a rhythmic dance form with origins to the Andalusian region of Spain in the late 18th century. It holds influences from Romani, Castilian, and Moors and is characterized by hand claps, intricate footwork, and vibrant guitar playing. Click here to learn more about Flamenco. In this project, I intended to capture the essence and fluidity of Flamenco, particularly the movement of a dancer’s skirt during a performance. The pendulums in the simulation mimic the flow and rhythm of a Flamenco dancer’s skirt. The Flamenco Dancer is inspired by Memo Atken’s use of simple harmonic motion, expanding geometric shapes, and organic motion.

Highlight of Code

pendulums[i] = new Pendulum(x, y, 100 + i * 5, 0.03 * (i + 1));

This piece of code is under the setup function after the for loop to initialize the pendulum objects. It creates a new Pendulum object using the previously calculated x and y as the origin. The arm length of the pendulum is 100 + i * 5. This means the first pendulum has an arm length of 100 pixels, the second 105 pixels, the third 110 pixels, and so on. This creates a visually appealing cascading effect. The frequency of the pendulum is 0.03 * (i + 1). It ensures that each subsequent pendulum oscillates slightly faster than the previous.

this.angularAcceleration = (-0.1 / this.armLength) * (gravity * sin(this.angle));

This code is under the update function of the Pendulum Class. It calculates the pendulum’s angular acceleration based on its displacement from the vertical and the force of gravity. The term (-0.1 / this.armLength) acts as a scaling factor. The -0.1 is an arbitrary constant to make the motion look visually appealing in the simulation, and dividing it by the armLength ensures that pendulums with longer arms have less angular acceleration compared to those with shorter arms. The product (gravity * sin(this.angle)) calculates the force trying to return the pendulum to its equilibrium position. When the pendulum is vertically aligned (at rest), the sine of its angle is 0, meaning there’s no restoring force. When the pendulum is displaced, the sine value changes, and the restoring force comes into play.

Embedded sketch

Link to Sketch

Reflections

• The breathing quality of the circles give the bobs a visual 3d rotational  movement in and out of the screen rather than just a side-to-side motion
• The (royalty-free) flamenco music added provided such a nice touch to the final project
• It was difficult and time-consuming to deal with all the equations and manipulate the values of constants to produce a visually appealing sketch
• In the real world, simple harmonic motion eventually comes to a halt as it loses energy throughout the motion. In this sketch, I didn’t know how to implement that. In a way, I’m happy that I didn’t – the continuous motion of the bobs is aesthetically satisfying

Concept

The concept of this project is inspired by Binary Stars. Binary stars are a system of two stars in which one star revolves around the other or both revolve around a common center. The two mover objects in this simulation represent these binary stars that rotate around their center of mass. Upon running the program, users will observe two colorful, glowing mover objects (representing stars) moving around the canvas. These objects are attracted towards an invisible center (or the center of mass) and will continuously orbit around it. I’ve also added a drag force to see how it would affect the orbital movement. The color variations provide a visual representation of the vibrant nature of stars. For more information behind my inspiration, click here.

Highlight of Code

attract(mover) {
    let force = p5.Vector.sub(this.pos, mover.pos);
    let distanceSq = constrain(force.magSq(), 100, 1000);
    let G = 4;  // Gravitational constant for this simulation

// formula
    let strength = G * (this.mass * mover.mass) / distanceSq; 
    force.setMag(strength);
    mover.applyForce(force);
  }
}

The above code is the function of gravitational attraction under the Attractor class. I’m proud of it because it took a lot of experimentation to settle on the values of G and  the constrains for the distanceSq to provide the smoothest visuals.

Embedded Sketch

Link to Sketch

Reflections:

• Over a longer period, the movers behave unpredictably. They might suddenly accelerate and shoot off into the distance at high speeds or keep spinning ver close to the attractor.
• I set the drag coefficient to be the small value of 0.05. Larger values disturbed the orbital trajectories too much.
• I spent a large amount of time manipulating parameters such as the gravitational strength, distanceSq constraints, drag coefficient and such to provide a smooth visual. All these parameters got quite confusing and I arbitrarily changed the values until the program ran smoothly, rather than intentionally inputting specific values.
• Potential improvement: allowing users to interact by placing attractors or adjusting the properties of the stars.

Concept

This project is titled Hungry Ants. It represents the collaborative quality that ants exhibit in nature, especially when there’s food around. It illustrates the teamwork ants undergo towards the common goal of satiability! On the mouse cursor, there’s a yellow circle which represents the targeted piece of food (a block of cheese, perhaps). A group of ants appear as soon as the program is run and they all rush towards the food. The user is free to move the cursor/food around which the ants would follow. The army of ants will keep moving until they reach their target, after which they’ll stop to enjoy their meal. Click here for the inspiration behind this project.

A highlight of some code that you’re particularly proud of

update() {
    let food = createVector(mouseX, mouseY);
    let foodDirection = p5.Vector.sub(food, this.position);
    let distanceToFood = foodDirection.mag();

    
    // if the ants reach/are close to the food, they stop
    if (distanceToFood < 18) {
      this.velocity.x=0;
      this.velocity.y=0;
      this.acceleration.x=0;
      this.acceleration.y=0;
    } 
    
    //if not, they keep following the food/mouse
    else {
      foodDirection.normalize();
      foodDirection.mult(0.01);
      this.acceleration = foodDirection;
      this.velocity.add(this.acceleration);
      this.velocity.limit(1.5);
      this.position.add(this.velocity);
    }
  }

This is the update method of the Ant class. I’m particularly proud of the distanceToFood calculation and the conditional statement following it to cause the ants to stop once they reach the food.

Embedded sketch

Link to Sketch: https://editor.p5js.org/ahm9979/sketches/sQgG7I0Ir

Reflection and ideas for future work or improvements

– It would’ve been cool to have the piece of food to shrink the more time the ants spend on it. Then, another piece of food would regenerate and the process would repeat
– It was very convenient discovering the arrays method of creating a group of objects. It would’ve been time-consuming if I had to create each ant manually as a separate object of the Ant class.
– I don’t like how clumped up the ants look once they stop for the food. Even after the food moves again, the ants move in their clump to follow it. It would look better if they separated again without having the run the program from the beginning.

For this project, I chose the following from the two lists:

• • Create a random walker with dynamic probabilities
  • Walk through RGB or HSB space (as opposed to XYZ)

This project features a bee which appears when the user presses the mouse and disappears when the mouse is released. The bee has a 70% chance of following the cursor and moves through HSB space. I chose this concept to demonstrate the impact that humans can have with nature, whether it be positive or negative. This is illustrated by the fact that the bee only appears when the user interacts with the program, and it’s more likely to follow/be impacted the direction that the user chooses. 

• A highlight of some code that I’m particularly proud of
  
  

  if (random(0,1) < 0.7) { // 70% chance of moving toward the mouse cursor
       // Calculate the vector pointing towards the cursor
       let mouseVector = createVector(mouseX, mouseY);
       let direction = p5.Vector.sub(mouseVector, this.position);
       let velocity = direction.mult(this.speed);
  
       // Normalize the direction vector
       direction.normalize();
  
       // Adjust the bee's position based on the velocity vector
       this.position.add(velocity);
     } else {
       let direction = p5.Vector.random2D().mult(random(5, 15)); // Move in a random direction
       this.position.add(direction);       // Adjust the bee's position based on the direction vector
  
     }
  

  I’m proud of the fact that I was able to implement the concepts we learned in Vectors into this assignment. I used vector mathematics to calculate the direction and velocity needed for the bee to move toward the cursor. I’m also proud of how I implemented the 70% probability by using conditional logic.

• Embedded sketch
  

  Link of Sketch:https://editor.p5js.org/ahm9979/sketches/slZfNiW9H

• Reflection and ideas for future work or improvement
  • Create a bee that looks more like an actual bee – with wings and black and yellow stripes for example
  • Add more interactive elements, such as moving flowers or a starry nightsky
  • What was most challenging about this assignment is organizing the code into different classes rather than writing everything under the draw function. It does make the code neater and easier to understand but it was a long process to get there.