Author: Hend Alabdouli

Concept:

I got the idea for this assignment after seeing the work of our Artist of the Week: Memo Akten, especially his piece on Simple Harmonic Motion. His smooth, rhythmic designs instantly made me think of nature—like the gentle sway of a flower’s petals in the wind. That’s when it clicked! I decided to create my own version, a flower-like pattern with oscillating petals, using p5.js. I wanted to bring the flower to life by making its petals pulse and move in a way that mimicked real-life motion.

Embedded Sketch:

The code creates a dynamic flower-like pattern with oscillating petals using the sin() function to control smooth, rhythmic motion. First, the flower is centered on the canvas using translate(), and the petals are drawn in a loop, with each petal’s size oscillating based on the sine wave. Multiple layers of petals are added for depth, giving the flower a complex appearance. The stem and leaves are then positioned right below the flower, and the leaves gently sway using the same oscillation logic. The time variable drives the continuous animation, making the flower feel alive and constantly moving.

What I’m Proud Of in the Code:

One of the highlights of my project is how the petals grow and shrink over time, giving the flower a breathing effect. Here’s a key part of the code:

let petalOscillation = amplitude + sin(time + angle + l) * 20;
ellipse(layerOffset, 0, petalWidth, petalHeight);

This section makes use of the sin() function to create the smooth back-and-forth movement of the petals. By adjusting the size of each petal with a sine wave, the flower seems to come alive, as the petals expand and contract in a rhythmic way. Adding multiple layers of petals helped give the flower more depth, making it look more complex and natural.

Challenges I Faced:

One of the main challenges was figuring out how to position the stem and flower correctly. At first, the stem kept appearing on top of the flower, which looked strange. I had to experiment with the translation (moving the origin point) in p5.js to get the stem to sit underneath the flower, where it belongs.

Reflection:
Looking back, I’m really happy with how the petals move in such a smooth and natural way. Working on this project helped me better understand how to use harmonic motion and how to layer shapes and elements in p5.js. The flower ended up feeling dynamic and alive, which was exactly what I was aiming for.

In the future, I’d like to:

1.Add interactivity: It would be cool if the flower could respond to user input, like mouse movement. For example, maybe the user could change how fast the petals pulse or how big they grow.

2. Try 3D: Moving this concept into 3D would make the flower even more exciting. Imagine the petals not just growing and shrinking, but also rotating and moving in a 3D space.

3.Make the movement more natural: Right now, the movement is smooth, but it could feel even more organic if I added some Perlin noise to the oscillations. This would make the petals and leaves move in a way that’s a little less predictable and more like how things behave in nature.

Concept:

In this assignment I set out to create a simulation of planetary motion using the p5.js framework. The concept behind this project is to visualize planets rotating in a simple, stylized environment.

I took inspiration Daniel Shiffman’s Nature of Code and his lessons on simulating forces in p5.js helped shape my understanding of how to manipulate objects using vectors and forces.

Code Highlight:

A key part of the project involves rotating and rendering the planets. This code snippet shows how I used two loops to manage the rendering of the “top” and “bottom” halves of the planets:

function draw() {
  background(5,0,20);
  strokeWeight(0);

  // Bottom
  for (let i = 12; i > 0; i--) {
    for (let j = 0; j < p.length; j++) {
      p[j].renderBottom(i);
      p[j].rotate();
    }
  }

  // Top
  for (let i = 0; i < 12; i++) {
    for (let j = 0; j < p.length; j++) {
      p[j].renderTop(i);
      p[j].rotate();
    }
  }
}

The draw() function uses two loops to alternate between rendering the top and bottom sections of each planet. These planets are stored in an array (p), and each planet has a renderBottom() and renderTop() function that handles its respective display on the canvas.

I was particularly proud of this section because it allowed me to divide the rendering into two distinct phases (top and bottom), creating a visually interesting dynamic. This setup gave the planets a layered appearance and made their rotations feel more interactive and complex.

Embedded Sketch:

The “mover” planets appear randomly on the screen, except for the largest one, which always starts in the center. The code uses an “attractor” function that handles three main pieces of information: the “mover”, the “attractor”, and the “force”. The “attractor” function checks if the mover is within the attractor’s orbit. If it’s not, the mover moves towards the orbit. Regardless of its position, the mover will continuously rotate around the attractor by moving in the same direction while subtracting PI / 2 from its angle. The 3D effect is achieved by stacking multiple 2D sprites on top of each other.

Challenges I Faced:
One of the hardest parts was making sure the planets rotated smoothly. At first, the movement was uneven, and the animation didn’t look as good as I wanted. To fix this, I adjusted the rotation functions in the planet class and experimented with different frame rates until the motion looked natural. It was tricky to get the right balance between performance and visual quality, but it felt great once everything worked smoothly.

Reflection and Future Improvements:

Looking back, I feel this project pushed me to think deeply about how to simulate movement in a way that is both computationally efficient and visually appealing. I learned a lot about managing objects in p5.js and how to structure code for animation sequences.

In the future, I’d love to expand on this project by adding more interactivity. For example, I’d like to incorporate user input that changes the speed or direction of the planet rotations, or even allow users to “create” new planets by clicking on the canvas. Another interesting addition would be to simulate gravitational forces between the planets, making their interactions more dynamic and unpredictable. Lastly, I’d like to add sound effects that are tied to the planets’ movement to deepen the sensory experience.

Concept:
In this assignment, I created an interactive scene where pigeons wander around a gray ground (representing something like a park or city square) searching for food. I added two trees on either side of the canvas, and when I click on them, leaves fall and disappear once they hit the ground. The pigeons move toward randomly placed food, and after one of them reaches the food, a new piece of food appears in a different spot. The goal was to simulate natural pigeon behavior and add a fun, interactive element with the falling leaves, all while using vector-based physics to bring the motion to life.

Code Highlight:
One part of the code I’m really happy with is the falling leaves interaction:

function mousePressed() {
  for (let i = 0; i < treePositions.length; i++) {
    let treePos = treePositions[i];
    // Check if the mouse click is within the tree's area
    if (dist(mouseX, mouseY, treePos.x, treePos.y) < 75) {
      // Generate falling leaves from the clicked tree
      for (let j = 0; j < 10; j++) {
        leaves.push({
          position: createVector(treePos.x + random(-20, 20), treePos.y),
          velocity: createVector(random(-1, 1), random(1, 3)) // Falling leaves
        });
      }
    }
  }
}

This part of the code is what handles the falling leaves when you click on a tree. When the user clicks near one of the trees the code checks if the click is within range using the dist() function to measure distance. If it is it triggers a loop that generates 10 leaves each with random positions and velocities so they fall in a natural way. The leaves then get added to an array so they can be drawn and moved across the screen.

I’m really proud of this because it was the part I struggled with the most. Figuring out how to create that random natural-looking motion for the leaves and getting the click interaction to work properly took some effort but it adds a lot of life to the scene!

Embedded Sketch: 

Reflection and Ideas for Future Work:
Looking back, I’m really happy with how the pigeons’ movement and the interactive leaves turned out. It’s a fun and dynamic scene, but I have a few ideas for improvements and future work:

Perlin Noise for the Ground: I want to add Perlin noise to the ground to give it texture, making it look like dirt or pavement instead of just flat gray.

More Realistic Pigeon Behavior: I’d like to implement flocking behavior so the pigeons move together in a more natural way, like real pigeons do.

Tree Sway and Better Leaves: I think it would be cool to make the trees sway slightly when the leaves fall and vary the size and speed of the leaves for more realism.

Animated Pigeons: Adding animations for the pigeons, like walking or pecking, would make them feel more alive.

Reflecting on the first chapter of ‘The Computational Beauty of Nature’ I found it really interesting how the author talks about the connection between computers nature and beauty. As a computer science student the idea that we can understand complex things in nature through simple computer algorithms made a lot of sense to me. I usually think of coding as a way to solve problems or make things work better but this reading helped me see it differently. The author shows how even simple rules in code can create beautiful and complex patterns which reminded me of my own projects where simple code led to surprising results. This made me appreciate the beauty in coding even more seeing how it can reveal hidden patterns in the world around us.

However I also noticed that the author seems to focus a lot on computation as the main way to understand nature and that made me think. Is it possible that by focusing too much on algorithms we might miss out on other ways of seeing the beauty in nature? This question challenges my belief that while computers are powerful tools they might not always capture everything about the natural world. For example when I think about the random patterns in nature like the shapes of clouds or how rivers flow I wonder if algorithms can really show this randomness or if they might make it seem less natural. This chapter has made me more curious about the limits of using computers to understand nature and it makes me want to explore how I can balance coding with the unpredictable beauty of the natural world.

Concept:

When I first saw the assignment my mind immediately went to the classic Snake game. It’s a simple yet iconic game and I thought it would be interesting to reimagine it with a twist. The idea was to combine the snake’s movement with changing colors making it more visually engaging. I decided to make the snake follow the mouse’s movement so wherever the mouse goes the snake smoothly follows. As the snake moves it doesn’t just chase the mouse it also cycles through a spectrum of colors creating a vibrant visual effect.

I added a basic gameplay mechanic where the snake grows longer each time it eats a food block. The food blocks are placed randomly on the canvas and each one has a unique color. When the snake eats a block it adopts the block’s color and continues to grow. I also wanted to add a challenge: if the snake touches the edge of the canvas it shrinks back to its original size. This keeps the game interesting and adds a layer of difficulty.

Code Highlight:

One part of the code that I’m particularly proud of is the implementation of the color transition. Instead of just having the snake follow the mouse I wanted to make its movement visually interesting by having it change colors smoothly as it moves. Here’s how I did it:

// Update the snake's color through the HSB space
  hueValue = (hueValue + 1) % 360; // Increment the hue value to cycle through colors, reset to 0 after reaching 360
  snakeColor = color(hueValue, 100, 100); // Update the snake's color with the new hue value

  // Draw the snake on the canvas
  for (let i = 0; i < snake.length; i++) { // Loop through each segment of the snake
    fill(snakeColor); // Set the fill color for the current segment
    ellipse(snake[i].x, snake[i].y, 16, 16); // Draw the segment as a circle at the current position
  }

This code snippet ensures that as the snake moves its color gradually shifts through the HSB color space. It cycles through all the hues creating a smooth and continuous color transition. This makes the snake look more dynamic and adds a lot of visual appeal to the game.

Embedded Sketch:

Reflection and Future Improvements:

The project works well overall but there are definitely some areas that could be improved. The boundary detection for instance doesn’t always function perfectly. The idea was to have the snake reset to its original size when it touches the edges of the canvas but this doesn’t always happen as smoothly as I’d like. Sometimes the reset doesn’t trigger right away or the snake’s movement becomes a bit erratic. This is something I’d like to refine in future versions.

I’m also thinking about adding more complexity to the snake’s movement. For example incorporating Perlin noise could make the snake’s movement smoother and more natural giving it an organic feel. Another idea is to experiment with sound. Imagine if the snake’s movement and growth were accompanied by dynamic audio feedback like a change in pitch or tone as the snake grows or when it changes direction. This could add another layer of immersion to the game.

This project was a great starting point for exploring the combination of motion and visual effects in a simple game. There’s a lot of potential for further development and I’m excited to keep experimenting with these ideas and see where they lead.