Author: Maryam Almatrooshi

Concept
For this weeks assignment, I wanted to explore how invisible forces like gravity can affect objects in motion. I was inspired by the movement of planets around the sun and how they interact with each other through invisible forces (image below). The sketch creates a solar system-like scene where planets and moons orbit around a sun. I also added some extra forces, like a little bit of randomness (turbulence) to make things feel more alive and natural.

Image Inspiration

Code Highlight
One part of the code I’m really happy with is how I made the sun glow. I used different shades of color and layered circles to make the sun look like it’s shining and radiating light, just like in real life. Here’s the code for that:

// Draw gradient layers for the sun
for (let i = gradientColors.length - 1; i >= 0; i--) {
  fill(gradientColors[i]);
  ellipse(this.pos.x, this.pos.y, this.radius * 2 * (1 - i * 0.2)); // Each layer is slightly smaller
}

// Add outer glow to the sun
for (let i = 0; i < 10; i++) {
  let alpha = map(i, 0, 10, 50, 0); // Make the glow fade out
  fill(255, 153, 51, alpha);
  ellipse(this.pos.x, this.pos.y, this.radius * 2 + i * 15); // Expand glow with each layer
}

Embedded Sketch

Reflection and Future Work
Working on this sketch was really fun, but I did face some challenges. It was tricky to make sure the planets and their moons didn’t overlap or move too fast. For the future, I’d like to add a “repulsion” force so that planets and moons don’t get too close to each other. I also think it would be cool to let people interact with the sketch by clicking on planets or moving them around.

Concept

I’ve always enjoyed traveling to Europe during autumn. The sight of trees with almost yellow leaves fills me with a sense of calm and nostalgia. As I walk through parks and streets, the leaves gently falling to the ground create a serene atmosphere. Inspired by this, I decided to simulate the motion of falling leaves in my sketch. I wanted to capture how some leaves fall straight down due to gravity, while others drift to the right or left because of the wind. My goal was to recreate this natural motion using code, focusing on how gravity and wind impact the leaves’ movement.

Video Inspiration

I had initially hoped to use a video I took during my travels, but I couldn’t find one. So, I searched online and found a video that inspired this design.

Highlight of the Code

One part of the code I’m particularly proud of is how I simulate the wind and gravity forces. In the sketch, each leaf is given a slight variation in fall speed, which makes their movement feel more natural. Here’s a snippet:

 
// Loop through all the leaves and apply forces, update positions, and display them
for (let leaf of leaves) {
  // Apply gravity force to the leaf (fallSpeed controls how fast it falls)
  leaf.applyForce(createVector(0, leaf.fallSpeed * 0.1)); 
  
  // Random wind strength to add lateral movement (drift) to the leaf
  let windStrength = random(0, 0.05); 
  // Apply wind force in the direction determined by the leaf's drift
  leaf.applyForce(createVector(windStrength * leaf.drift, 0));

In this section, I applied gravity (downward force) and wind (side-to-side force) to each leaf. The random factor in wind strength and leaf drift direction gives the scene a more dynamic and organic feel.

Embedded Sketch

Reflection and Ideas for Future Work

Working on this sketch was both fun and calming. I was able to simulate the movement of the leaves quite effectively using acceleration, gravity, and wind forces. In the future, I’d love to add more interactivity to this simulation. For example, the wind could change based on mouse movements, or the leaves might react differently depending on where they fall. Another idea is to vary the leaf shapes or introduce different weather elements, like rain or snow, for a more complex autumn scene.

P5.js Full Code and Sketch

https://editor.p5js.org/maryamalmatrooshi/sketches/8tY74Enmr

Concept

I’ve always been fascinated by stargazing, but I wanted to create a unique way to experience it. In this interactive sketch, you’re not just a passive observer—you control where the stars appear as you move your mouse across the canvas. To enhance the experience, I created the night sky with faded clouds manually using Perlin noise, inspired by Professor Nimrah’s work from Week 2, rather than using an image from Google. I adjusted this technique to fit my needs, resulting in a serene and dynamic background. For the interactive elements, I incorporated a random walker that moves in the direction of the mouse from List 1, symbolizing your role in guiding the stars. From List 2, I used the concept of walking through RGB space to generate evolving colors as stars are plotted, and I tied the presence and intensity of the stars to the volume and playback of a soft piano sound, one of my favorite instrumental tones. The music fades away along with the stars, creating a soothing, immersive experience where the visual and auditory elements blend together seamlessly.

Highlight of the Code
One part of the code that I’m particularly proud of is how the volume of the music changes based on the number of stars on the screen. This small detail adds an extra layer of immersion:

  // Adjust the volume of the song based on the number of stars on the canvas
  let targetVol = constrain(map(stars.length, 0, 100, 0, 1), 0, 1);  // Map the number of stars to a volume level
  song.setVolume(targetVol, 0.1);  // Gradually change the volume over 0.1 seconds

  if (stars.length === 0 && song.isPlaying()) {
    song.pause();  // Pause the song if no stars are left on the canvas
  } else if (stars.length > 0 && !song.isPlaying()) {
    song.play();  // Play the song if there are stars on the canvas
  }
}

This section of the code ensures that as more stars are plotted, the volume of the piano music increases, and as they fade away, the music gradually softens until it stops. It’s a simple yet effective way to tie the visual and auditory experiences together.

Embedded Sketch

Video Representation 

Reflection and Ideas for Future Work
Creating this sketch was a rewarding experience as it allowed me to combine my love for stargazing with music in a creative way. The fading effect, both for the stars and the sound, adds a dreamy quality that I find very calming.

In the future, I’d love to experiment with adding more interactive elements, such as varying the types of sounds or letting users choose different star colors and patterns. Another idea could be to introduce a more complex musical composition that evolves as the stars increase in number or move in specific patterns. This project has opened up so many possibilities, and I’m excited to see where it can go next!

P5.js Full Code and Sketch

https://editor.p5js.org/maryamalmatrooshi/sketches/IZVrVbVB1

References

https://editor.p5js.org/masakudamatsu/sketches/uPF7TUpcf

https://editor.p5js.org/nimrah.syed/sketches/w_5GyQsyh

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#reversing_an_array_in_place

https://p5js.org/reference/#/p5.SoundFile/setVolume

 

For this week’s reflection on The Computational Beauty of Nature by Gary William Flake, I found the discussion about reductionism really interesting. The author explains that reductionism, which is breaking things down into smaller parts to understand them better, is a powerful tool. However, it has its limits, especially when we try to predict how a whole system will behave just by looking at its parts. This idea made me think about how, in software development, knowing how individual pieces of code work doesn’t always help in understanding how the entire program will run in real life. This reading made me question how effective reductionism really is, especially in complex systems where things interact in unexpected ways.

The author also talks about the importance of looking at the bigger picture, which is called holism (the opposite of reductionism). He suggests that to truly understand complex systems, we need to consider how different parts interact with each other and their surroundings. This idea made me think differently about how I approach problems, as it challenges the usual way of focusing only on individual parts. However, I wonder if the author might be a bit biased in favoring holism too much, without recognizing that reductionism can be very useful in some cases. This reading has encouraged me to think more about balancing both approaches when trying to solve complex problems.