When I first read the assignment to use Cellular Automata to create dynamic and interesting patterns, I had no idea what to do. I was stuck for a while. Then, I remembered the classic Snake game I used to play and thought, “What if I could make it more exciting?”
I decided to add obstacles that change over time, making the grid feel alive and unpredictable. Using Cellular Automata, the obstacles evolve and move during the game, creating a challenge that grows as the game progresses. This small twist made the game much more engaging and fun.
Embedded Sketch:
Logic of the Code:
In my game, Cellular Automata is used to generate dynamic and evolving obstacles. Here’s how it works step by step:
Starting Grid: The grid starts with some random cells marked as “alive” (obstacles). This randomness ensures the starting grid is different every time you play.
Cellular Automata Logic: Every few frames, the code checks each cell on the grid to decide if it should become an obstacle, stay as one, or disappear. This decision depends on how many neighboring cells are also alive. For example:
If a cell is an obstacle and has too many or too few neighbors, it disappears.
If a cell is empty but has the right number of alive neighbors, it becomes an obstacle. This logic ensures the obstacles move and evolve naturally over time.
Obstacle Management: To keep the game challenging, I added a function to make sure there are always at least 10 obstacles on the grid. If the number of obstacles drops too low, the code randomly adds new ones.
Pulsing Effect for Obstacles: To make the obstacles visually dynamic, I added a pulsing effect. This effect changes the color intensity of obstacles smoothly over time using a sine wave. The sin() function creates a smooth wave that oscillates between values, giving the obstacles a “breathing” effect. Here’s the code:
frameCount is a built-in variable that counts the number of frames since the sketch started. This makes the color change over time.
sin(frameCount * 0.05) creates a wave that oscillates between -1 and 1.
By multiplying the wave value by 50 and adding 150, the color smoothly pulses between lighter and darker shades of red. This effect makes the obstacles look alive and dynamic, matching the Cellular Automata theme.
Challenges:
One big challenge was balancing the speed of the Cellular Automata and the snake. At first, the obstacles were changing way too fast, making the game unplayable. To fix this, I slowed down how often the obstacles update compared to the snake’s movement. This kept the game smooth and manageable.
Another challenge was ensuring there were always enough obstacles on the grid. Sometimes, the Cellular Automata rules would clear too many obstacles, leaving the grid empty. To solve this, I added a check to add new obstacles whenever the number dropped below a certain threshold.
Future Improvements:
Here are some things I’d like to add in the future:
Player Options: Let players choose how obstacles behave, like making them grow faster or slower.
Dynamic Difficulty: Make the game harder as the player scores more points by speeding up the snake or increasing obstacle density.
Enhanced Visuals: Add glowing effects or different colors for obstacles to make the game look even better.
Sound Effects: Include sounds for eating food, hitting obstacles, or speeding up.
When I saw the assignment to create a project using Matter.js, the first thing that came to mind was recreating the classic Super Breakout game. I wanted to take the concept of bouncing a ball to break blocks and add some extra dynamics and fun with a physics engine. Super Breakout is simple yet addictive: you control a paddle, bouncing a ball to break rows of blocks. The challenge grows as the ball speeds up and changes angles, keeping the player focused and engaged.
Embedded Sketch:
Logic of Code:
I started by setting up a canvas with Matter.js as the physics engine to handle everything from gravity to collisions.
Matter.js Basics: First, I created an engine and world using Matter.Engine and Matter.World, which handle the entire physics environment. To make the ball and paddle, I used Matter.Bodies to create specific shapes, including a rectangle for the paddle and a circle for the ball.
Applying and Changing Forces: The ball starts with an initial velocity that gives it an upward and slightly angled movement. Each time the ball hits a block, I apply a slight random force. This “slight random force” is a tiny push in a random direction, which makes the ball move in an unpredictable way after each collision. This force helps the ball take new paths, creating a more dynamic and challenging gameplay experience, as it doesn’t just keep following the same straight line.
Collision Events: Using Matter.Events.on, I could detect whenever the ball hit a block. Each time it does, the code removes that block from the world, applies a small random force to the ball, and slightly increases the ball’s speed, making the game progressively harder. Additionally, I added logic to make the ball bounce when it touches the canvas edges, keeping it in play.
Challenges:
One issue I encountered was the ball getting stuck bouncing horizontally, going left to right without moving much vertically. To solve this, I added a check to ensure the ball always has a minimum vertical speed (y velocity). If the y velocity is too low, the code adjusts it to a minimum value, ensuring the ball keeps moving in both directions. This way, the game remains challenging, and the ball doesn’t get trapped in a back-and-forth loop.
function increaseBallSpeed() {
let speedFactor = 1.02; // Increase speed slightly after each collision
let minYVelocity = 3; // Minimum vertical speed to prevent horizontal bouncing
let currentVelocity = ball.velocity;
// Set new velocity with minimum vertical speed
let newVelocity = {
x: currentVelocity.x * speedFactor,
y: Math.abs(currentVelocity.y) < minYVelocity
? (currentVelocity.y < 0 ? -minYVelocity : minYVelocity)
: currentVelocity.y * speedFactor
};
Body.setVelocity(ball, newVelocity); // Apply the new velocity to the ball
}
In this function:
speedFactor controls how much the ball’s speed increases with each hit, keeping it manageable.
minYVelocity sets a minimum speed for the y direction, so the ball keeps moving vertically.
The code checks if Math.abs(currentVelocity.y) is less than minYVelocity. If it is, the y velocity is adjusted to either minYVelocity or -minYVelocity based on its current direction.
This addition keeps the gameplay smooth and prevents the ball from getting stuck in horizontal motion, which makes it one of my favorite parts of the code!
Future Improvements:
While I’m happy with the current version, there’s a lot more I could add to enhance the gameplay. Some ideas for future improvements include:
Power-Ups: Add special blocks that, when hit, might speed up the ball, slow it down, or make it larger, adding more excitement and strategy to the game.
Score Tracking and Levels: Keeping score and advancing to new levels as blocks get progressively harder to break or new rows appear.
Sound Effects: Adding sounds for when the ball hits a block, the paddle, or the canvas edges to make it more engaging.
Mobile Version: Modifying the controls for touch interaction so the game can be played on mobile devices.
Concept:
The idea was to create a dynamic simulation where fireworks launch, explode, and slowly fade away, all while maintaining a sense of development over time. I wanted it to feel like a live performance in the sky, starting from calm darkness to sudden bursts of light and color and back to calm again.
Embedded Sketch:
Code Logic:
Here’s how the flocking concept is applied in my code:
Cohesion (Launching): The initial firework is like a single leader particle that starts from the bottom of the screen and moves upward. This particle influences the others once it bursts. Separation (Explosion): When the main firework particle reaches its peak and “explodes,” it releases smaller particles that spread out in random directions. The particles act like a flock momentarily repelling from the center, creating that explosion effect. Alignment (Falling and Fading): As the particles start to slow down and fall due to gravity, they align more with each other to create the visual of embers gently dispersing and fading away.
Code I’m Proud Of:
One part of the code I’m particularly proud of is how the flocking system’s logic was adapted to control the explosion and fading of particles:
explode() {
for (let i = 0; i < 100; i++) {
let p = new Particle(this.firework.pos.x, this.firework.pos.y, false);
this.particles.push(p);
}
}
When the firework reaches its highest point, this explode() function kicks in. It creates 100 new Particle objects, each with its own direction and speed. This mimics the behavior of a flock splitting apart. Instead of moving together like traditional flocks, these particles use a random2D() vector to scatter and simulate an explosion.
Additionally, each particle follows a simple rule:
Velocity Adjustment: Each particle’s velocity is affected by gravity, making them fall and spread out more realistically.
Lifespan Control: Particles gradually lose opacity (this.lifespan -= 4) to simulate them fading as they fall, creating that “embers in the sky” look.
This adaptation of flocking logic is what makes the explosion feel dynamic and natural, allowing the particles to behave independently yet still appear as part of a cohesive firework.
Challenges I Faced:
One of the main challenges was making the explosion look natural. Initially, the particles either looked too rigid or didn’t spread out enough. To solve this, I played around with p5.Vector.random2D() and tweaked the speed multipliers until it felt right. Another challenge was getting the fading effect correct. It took some trial and error to adjust the lifespan so that particles would fade smoothly and not disappear too abruptly.
Future Improvements:
While I’m happy with how the project turned out, there’s always room for more! Here are some ideas I’m thinking about:
Sound Integration: Adding sound effects would make the fireworks feel even more real. I’d like to use the p5.sound library to sync explosions with audio. Mouse Interaction: Letting users click to create their own fireworks would add an interactive element to the project. Different Shapes and Trails: Experimenting with different particle shapes and trail effects could make each firework more unique and visually interesting. Color Themes: Adding color gradients or changing themes over time to simulate different types of fireworks shows would enhance the overall look.
The guest lecture was really interesting and got me thinking about how everything changes—whether it’s sand dunes moving in the wind waves in the ocean or even our own thoughts and feelings. The way digital art was used to show things coming together staying for a while and then breaking apart was really creative. It made the idea of impermanence feel real even through technology. I realized that digital art can actually be a great way to explore big ideas in a new and modern way.
I liked that the visuals were not only beautiful but also had meaning. They weren’t trying to copy nature exactly but instead capture its essence in a unique way. I think that’s what makes digital art special—it can show things that are hard to put into words. At first I wasn’t sure if digital art could really make us feel the raw nature of change but this lecture made me more open to the idea. It left me excited to talk in class about whether digital art can help us understand abstract ideas or even make them feel more real.
Concept:
The core idea of this assignment is to create a realistic Fly Spray simulation where:
Flies are attracted to food when it appears on the canvas.
Flies flee from a spray can when it gets too close.
The spray can follows the mouse cursor and sprays a burst when flies get too close.
To make this happen, I used steering behaviors, a concept popularized by Craig Reynolds, to model realistic movement. Steering behaviors are all about adjusting an object’s acceleration to achieve goals like fleeing, seeking, and arriving.
Embedded Sketch:
The code for this fly spray simulation focuses on three main parts: flies, food, and the fly spray. Each of these parts has its own behaviors and interactions, using a coding technique called steering behaviors.
The flies move randomly but change direction based on what’s nearby. If food appears within a certain range, the flies move toward it using an attraction behavior. However, if the fly spray gets too close, the flies switch to a fleeing behavior, quickly steering away to escape. This creates a realistic effect of flies avoiding the spray while seeking food.
The food appears randomly on the canvas for a limited time, attracting nearby flies. It disappears after a while and then reappears at a new spot. This makes the flies constantly adjust their paths, adding excitement to the simulation.
The fly spray follows the mouse using a smooth arrive behavior and sprays when flies are within a certain range. The spray creates a visual burst when close to flies, simulating a spraying action. The code uses a loop to constantly check distances between the flies, food, and spray, adjusting their movements to create a lively and interactive simulation.
Code Snippet:
Here’s the part of the code where I handled the spray effect when flies come near the fly spray:
// Spray effect when close to a fly
sprayEffect(flyPos) {
let distance = dist(this.pos.x, this.pos.y, flyPos.x, flyPos.y);
if (distance < sprayRadius) {
push();
translate(this.pos.x, this.pos.y);
rotate(this.vel.heading());
noStroke();
fill('rgba(0, 0, 0, 0.5)'); // Black spray effect with transparency
triangle(10, -60, 60, -100, 60, -20); // Bigger spray burst
pop();
}
}
I’m particularly proud of this snippet because it brings the fly spray to life! The spray burst animates when flies come too close, making the simulation feel more realistic and interactive. It’s a simple but satisfying visual element that adds a lot of character to the spray can.
Challenges Faced:
Like any coding project, this one came with its fair share of challenges:
Ensuring Consistent Spray Behavior: Initially, the spray effect wasn’t triggering consistently, and it sometimes missed flies that were within range. I had to fine-tune the logic and adjust the proximity checks to make sure the spray worked every time.
Balancing Attraction and Repulsion: Making the flies switch seamlessly between attraction (to food) and repulsion (from the spray) required careful control of their acceleration and speed. It was tricky to get the right balance so that the flies didn’t act erratically.
Managing Timing: The food appears randomly and disappears after a set duration, which added an extra layer of complexity. I used a timer to handle the food’s lifecycle, but it took some tweaking to get it to behave consistently.
Future Improvements:
There’s always room for improvement! Here are some ideas I’d love to implement in the future:
More Realistic Fly Movements: Right now, the flies have basic behaviors. Adding more randomness and making them swarm together around food could add realism.
Better Spray Animation: The spray burst is a simple triangle, but I’d love to add particles or make it look more like a mist.
Multiple Food Sources: Currently, only one food source appears at a time. Adding multiple food sources that attract flies in different directions would make the simulation more dynamic.
Scoring System: Adding a scoring system could make the simulation more game-like, where users earn points for getting close to the flies.
For my midterm project, I wanted to explore the mesmerizing nature of the Fibonacci spiral through a generative art system. I named the project “Fibonacci Dream” because it combines the beauty of mathematical spirals with dynamic, flowing petals that continuously change over time.
Concept and Artistic Vision:
The Fibonacci sequence and the golden angle have always fascinated me. I love how these mathematical principles appear in nature—from sunflowers to seashells. My goal was to mimic this natural elegance by creating a digital flower that grows and oscillates, combining organic movement with vibrant color palettes.
While researching Fibonacci spirals, I learned how deeply they connect to growth patterns in nature. This connection inspired me to build a visual system that transitions between different moods through rotating petals, oscillating sizes, and shifting color schemes. The final sketch uses a Fibonacci spiral to control the petal arrangement, creating a dynamic, mesmerizing flower with endless possibilities.
I used colors inspired by the natural world, with gradients of pink, yellow, blue, and green to evoke different emotional states. This color-changing feature makes the flower feel alive, as if it’s reacting to its environment.
Embedded Sketch:
https://editor.p5js.org/ha2297/full/Eo2Yntsgr
Coding Logic and Translation:
The logic behind “Fibonacci Dream” revolves around creating a dynamic, generative artwork using a Fibonacci spiral, with petals that oscillate, rotate, and change color over time. Here’s how each part of the code works:
Fibonacci Spiral Arrangement
The petals follow a Fibonacci spiral pattern, where each petal’s position is determined by an angle (137.5°) and a radius that grows as the square root of the petal index. This ensures that the petals are evenly spaced and spread outward in a natural spiral.
let angle = i * spiralAngle + time * 10;
let radius = sqrt(i) * 8;
let x = radius * cos(angle);
let y = radius * sin(angle);
2.Oscillation and Rotation
To give the petals life, they oscillate in size using the sine function, creating a smooth breathing effect. The petals also rotate in a spiral, and the speed of rotation is controlled by a user-adjustable slider.
let oscillation = map(sin(time + i), -1, 1, 0.8, 1.2);
let dynamicPetalLength = petalLength * oscillation;
let dynamicPetalWidth = petalWidth * oscillation;
rotate(angle + time);
3.Color Palettes
The code includes six color palettes that the user can switch between. Each palette uses gradients like pink to yellow or blue to green, adding variety to the artwork
switch (colorPalette) {
case 0:
colorVal = map(i, 0, numPetals, 255, 100); // Pink to yellow gradient
fill(255, colorVal, 150, 200);
break;
// Other palettes...
}
4.User Interaction
Two sliders let the user control the rotation speed and zoom level, while a button switches between color palettes. These interactive elements make the artwork more engaging and customizable.
let oscillation = map(sin(time + i), -1, 1, 0.8, 1.2);
let dynamicPetalLength = petalLength * oscillation;
let dynamicPetalWidth = petalWidth * oscillation;
This code snippet is key to creating a “breathing” effect for the petals by making them grow and shrink over time. It uses the sin() function to generate oscillating values between -1 and 1, which are then mapped to a range between 0.8 and 1.2. This controls the petal size fluctuation, where petals shrink to 80% of their original size and grow to 120%, giving the effect of rhythmic breathing.
The combination of time and petal index (i) ensures that each petal oscillates with a slight variation, making the motion feel more organic. The mapped oscillation value is applied to both petal length and width, making the petals dynamically change in size.
This subtle movement brings the generative art to life. Without this oscillation, the flower would feel static and mechanical. The breathing effect, combined with the spiral pattern and color changes, adds a layer of depth, making the artwork more engaging and lifelike.
Challenges:
One of the biggest challenges was ensuring that the oscillation and rotation worked smoothly together, especially when combined with user input. It took several iterations to get the timing and size oscillation just right without breaking the flow of the petals.
Another challenge was handling the zoom function. Initially, zooming affected the positioning of the sliders and button, but I managed to fix this by anchoring them to the screen while zooming the canvas content independently.
Another issue that took some time to resolve was an error I encountered when trying to save the SVG file. Initially, I was using the following HTML file. However, I kept getting an error when trying to export the SVG. After some debugging, I realized that the issue was with the version of the p5.js SVG library I was using. I switched to an older version of the HTML file.The error occurred because the version of p5.js-svg I was initially using wasn’t compatible with the main p5.js version in my project. By switching to an older, more stable version, I was able to fix the issue and successfully save the SVG files.
Pen Plotting Experience:
For the pen plotting experience, I initially wanted to make the image of the flower more interesting by dividing it into two color layers. I chose to have the inner layer in yellow and the outer layer in pink to create a subtle contrast. When I printed it with the pen plotter, I used light blue for the inner part and dark blue for the outer part.
Unfortunately, the video I recorded didn’t save. So, I decided to reprint the image with the same colors and setup. However, while printing the second layer (the outer part in dark blue), the ink started running out—not completely, but enough to create a faded effect. I thought about pausing the process to replace the pen, but I ended up liking the way it looked with the gradual fading. It gave the piece a more unique, unexpected quality, so I let the print finish as it was. This added an element of spontaneity to the final artwork that I hadn’t initially planned for, but really enjoyed.
First Version: Second Version:
A3 Printed Images:
Areas for Improvement and Future Work
In future versions of this project, I have several ideas to improve and expand on:
More User Interaction:
I want to add mouse or touch gestures, so users can control the flower’s rotation and zoom by dragging or pinching the screen. This would make the interaction more natural and fun, especially on touch devices like tablets.
2. 3D Elements:
I’m thinking of adding 3D effects to make the flower feel more immersive. For example, the petals could rise and fall, creating a sense of depth. This would make the flower seem more realistic, almost like it’s floating on the screen.
I also want to explore how natural forces like gravity or wind could affect the petals in 3D, adding a new layer of interaction and visual complexity.
3. Improving Pen Plotting:
I plan to refine the line quality for smoother transitions between layers of the flower when using the pen plotter.
I want to try different styles like stippling (dot patterns) or crosshatching (overlapping lines) to create shading and color effects similar to the digital version.
Experimenting with different pens and inks, like metallic or gradient colors, could help capture the vibrant look of the digital artwork in physical form.
These improvements will make the project more interactive and visually rich, both in the digital version and the pen-plotted version.
I’ve always found the Fibonacci spiral fascinating. It’s a beautiful pattern that shows up in nature, like in seashells and the way leaves are arranged on plants. The spiral is created by drawing quarter-circle arcs inside squares, and the size of these squares follows the Fibonacci sequence—a series of numbers where each one is the sum of the two before it. To me, the spiral represents the balance between structure and natural growth.
For my midterm project, I’ll bring this spiral to life by making it grow and change dynamically. I’ll use moving patterns and shifting colors to give it a more organic, natural feel. The result will combine the exactness of math with slight, natural variations to create something both structured and alive.
Designing the Code
Here’s my plan for designing the Fibonacci spiral visualization:
Fibonacci Sequence Generator: I will write a function to generate the Fibonacci sequence, which will determine the side lengths of the squares. These squares will serve as the framework for the spiral’s construction.
Arc Drawing Function: I will create a function that draws quarter-circle arcs within each square. These arcs will be positioned based on rotating angles, allowing the spiral to take shape.
Dynamic Spiral Growth: I intend to animate the spiral’s growth by using oscillation to control the pace of arc creation. This will give the artwork a sense of life as the spiral grows dynamically on the canvas.
Color Gradients: I will integrate shifting color gradients, ensuring each new arc or section of the spiral has a slightly different hue, reflecting continuous growth and change over time.
Perlin Noise for Organic Variation: Lastly, I will add subtle randomness using Perlin noise to slightly alter the placement and shape of the arcs, which will give the spiral a more natural, organic feel.
Tackling the Most Complex Part
The most challenging aspect of this project will be integrating Perlin noise without disrupting the geometric accuracy of the Fibonacci spiral. To reduce this risk, I will write a test program to explore how noise affects the arcs. By fine-tuning the noise parameters early on, I will ensure that the randomness enhances rather than detracts from the overall design.
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:
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.
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.
Second Version:
