Author: Maryam Almatrooshi

Design Concept and Artistic Direction
Last year, during the Interactive Media (IM) show, I remember engaging with a fascinating sketch by another student. Their project used a webcam to capture a photo, which was then transformed into a shuffled grid puzzle for users to solve. I was inspired by the creative use of the webcam and wanted to recreate something similar, but with a different level of complexity and interaction. After brainstorming, I shifted the idea toward using a webcam not just to capture but to enable free drawing with hand gestures. This led to the concept of Neon Doodle World, where users could draw vibrant doodles with their fingers in real-time.

To make the experience even more engaging, I incorporated features inspired by concepts we learned in class. In addition to a standard paintbrush mode, I added a particle trail drawing mode for dynamic, animated effects. Users can also clear the sketch at any time, ensuring the canvas remains a space for unrestricted creativity.

Interaction Methodology
The interaction design leverages MediaPipe Hands, a library for real-time hand-tracking. The webcam detects hand landmarks, allowing users to control the drawing with simple gestures:

• Paintbrush Mode: Users draw strokes in a chosen color. A pinch gesture (bringing the thumb and index finger close) changes the color dynamically.
• Particle Trail Mode: A more playful drawing style where colorful, randomized particles trail the user’s hand movements.
• Clear Canvas: Users can clear the drawings with a single click, resetting the canvas for a fresh start.

The key interaction focus was to make the experience intuitive. By mapping hand coordinates to the canvas, users can freely draw without needing a mouse or keyboard. The pinch gesture ensures seamless control of color switching, and the modes allow creative exploration.

Canvas Design and Interaction Plan
The canvas is divided into two main components: the video feed and the drawing layer. The webcam feed is mirrored horizontally, ensuring the gestures feel natural and intuitive. The drawing layer exists as an overlay, maintaining a clear separation between the user’s input and the video feed.

Above the canvas, simple buttons control the modes and functionalities. Users can easily toggle between paintbrush and particle trail modes, clear the canvas, and change drawing styles. This clean and straightforward layout ensures accessibility while minimizing distractions from the creative process.

Base p5 Sketch and Initial Explorations
The Draft 1 sketch built the basic functionality of the project:

• It uses MediaPipe Hands to track hand movements and map them to the canvas.
• The paintbrush mode lets users draw smooth, colorful lines.
  The particle trail mode creates fun, animated effects with random bursts of color.
• A clear canvas button resets the drawing layer without touching the webcam feed.

Here’s an example of how the particle trail mode works:

 } else if (mode === "particle-trail") {
// Create particle effects around the finger position
for (let i = 0; i < 5; i++) {
let particleX = x + random(-10, 10); // Random x-offset for particles
let particleY = y + random(-10, 10); // Random y-offset for particles
drawingLayer.fill(random(100, 255), random(100, 255), random(100, 255), 150); // Random color with transparency
drawingLayer.noStroke();
drawingLayer.ellipse(particleX, particleY, random(5, 10)); // Draw a small particle
}
}

Current Sketch

Next Steps and Expansions
Building on the Draft 1 sketch, the project will be expanded with several new features to improve interaction and enhance the user experience:

• Introduction Page: A new page will be added at the beginning to introduce the project, setting the tone and providing users with context about the experience they are about to have.
• Color Palette: A palette will be added to allow users to select specific colors for drawing, instead of cycling through preset options. This will make the experience more customizable.
• Undo Feature: Functionality will be introduced to undo the last drawing action, giving users more control and flexibility while drawing.
• Save Feature: Users will be able to save their creations as images, including both the drawings and the webcam overlay.
• Pause/Resume Drawing: A pause button will be added, allowing users to stop and resume drawing as needed.

These additions will make the project more interactive, user-friendly, and visually appealing, while staying true to the original concept of creating a dynamic, webcam-based drawing experience.

Concept

Code Highlight

One part of the code I’m particularly proud of is the updateGrid function, which handles how each cell evolves based on its current state and neighbors. Here’s the snippet:

function updateGrid() {
  let newGrid = grid.map((col) => col.slice()); // Copy the current grid

  for (let x = 0; x < cols; x++) {
    for (let y = 0; y < rows; y++) {
      let state = grid[x][y];
      let neighbors = getNeighbors(x, y); // Get neighboring cells

      if (state === 3) {
        // Fire burns out into barren land
        newGrid[x][y] = 0;
      } else if (state === 2) {
        // Tree catches fire if near fire
        if (neighbors.includes(3)) {
          if (random(1) < 0.6 + 0.2 * windDirection) newGrid[x][y] = 3;
        }
      } else if (state === 1) {
        // Grass grows into a tree if surrounded by trees
        if (neighbors.filter((n) => n === 2).length > 2) {
          newGrid[x][y] = 2;
        }
      }
    }
  }

  grid = newGrid; // Update the grid
}

This function applies the rules of the automaton in a straightforward way:

• Fire turns into barren land after burning.
• Trees can catch fire if they’re near a burning cell.
• Grass grows into trees when surrounded by enough trees.

Embedded Sketch

Reflection and Future Ideas

I’m happy with how the sketch turned out, as it creates an engaging way to explore the balance between growth and destruction in a forest. Watching the fire spread and the forest recover with water and trees is satisfying and makes the simulation feel alive. However, there is room for improvement. The interface could be designed to look more visually appealing to attract users and make the experience more immersive. Adding better visuals, like smoother transitions between states or animated effects for fire and water, could enhance the overall presentation. Another idea is to include sound effects for the different features, such as a crackling sound for fire or a soft splash when using water. These small additions could make the simulation more engaging and enjoyable for users, turning it into a more polished and interactive experience.

References

https://editor.p5js.org/yadlra/sketches/B3TTmi_3F

https://ahmadhamze.github.io/posts/cellular-automata/cellular-automata/

Concept
This week’s sketch is all about creating a simple platform game using the Matter.js physics library. The game involves controlling a ball that jumps from platform to platform, trying to reach new heights. The ball collects points as it climbs higher, and the goal is to score as much as possible before falling off the screen. This sketch explores gravity, jumping mechanics, and collision detection, creating a fun game where timing and precision matter.

Code Highlight
One of the main parts of this code is the handleCollision function, which checks when the ball lands on a platform. When the ball hits a platform, it enables jumping again, letting the player continue their ascent. Here’s a snippet of how this works:

function handleCollision(event) {
  for (let pair of event.pairs) {
    const { bodyA, bodyB } = pair; // Get the bodies in collision
    // Check if ball collides with any platform
    if (
      (bodyA === ball && platforms.includes(bodyB)) ||
      (bodyB === ball && platforms.includes(bodyA))
    ) {
      if (ball.velocity.y > 0) { // Allow jump if ball is moving downward
        canJump = true;
      }
    }
  }
}

In this function, each time the ball collides with a platform, the canJump variable is set to true if the ball is moving downwards. This allows the player to jump again, making the gameplay smooth and responsive. This function is essential because it controls when the player can jump, ensuring the ball only jumps after touching a platform.

Embedded Sketch

Reflection and Future Ideas
I’m happy with how this game turned out! The ball’s movement and simple controls make it easy to pick up and play, and the scoring system adds a fun challenge. Watching the ball jump from platform to platform is satisfying, especially with the smooth collision detection and responsive jumping mechanics. Setting up the collision events in Matter.js was a new experience, and it was exciting to see how different forces and gravity values could create realistic movement in the game.

In the future, I’d like to explore more ideas to make the game more dynamic. Adding different platform types, like moving or disappearing ones, would introduce an extra layer of difficulty and variety to the gameplay. Visually, adding effects like particle trails for jumps or enhancing the ball’s design would make the game feel more polished. Another improvement would be adding sound effects for actions like jumping and landing, which would make the game more immersive and engaging.

 

References

https://editor.p5js.org/hinatahave91/sketches/G91aWNP_9

https://github.com/jakewarrenblack/p5.js-ball-game

 

Concept 

This week’s sketch is all about the movement of a school of fish. I wanted to show how they can swim in different patterns and scatter around, just like real fish do in the ocean. The main idea is to create a fun and lively underwater scene where the fish either swim together in formations or move freely, giving a sense of both community and individuality.

Code Highlight

One cool part of my code is the generateFormationPoints function. This function creates different shapes for the fish to follow, allowing for variety in their movement. Here’s a snippet of how it works:

function generateFormationPoints() {
  targetPoints = []; // Reset the target points array
  let shape = random(['doubleSpiral', 'wave', 'school', 'dna', 'vortex', 'shoal']); // Randomly select a formation shape
  let centerX = width / 2; // Calculate the center x position
  let centerY = height / 2; // Calculate the center y position
  let size = min(width, height) * 0.3; // Determine the size of the formation

  switch(shape) {
    case 'doubleSpiral':
      // Generate points for a double spiral formation
      // Logic for creating double spiral points...
      break;
    case 'wave':
      // Generate points for a wave formation
      // Logic for creating wave points...
      break;
    // Additional cases for other shapes...
  }
}

In this function, the fish can follow different patterns, like spirals, waves, or even formations resembling a DNA strand. Each time the function runs, it randomly picks a shape for the fish to follow. This keeps the scene dynamic and adds a layer of excitement to the simulation, as the fish move together in beautiful formations.

Embedded Sketch

Reflection and Future Ideas
I really like how this sketch turned out! The way the fish swim together creates a beautiful underwater scene that feels lively and realistic. The switch between swimming in formation and scattering around adds a fun element to the animation, making it engaging for viewers. I especially enjoyed seeing how the fish react to the different target points and how smoothly they transition between formations.

For the future, I see many ways to improve this project. I’d love to add more complex behaviors, like introducing a predator that chases the fish. This would add tension and excitement to the simulation, showcasing how the fish react to threats and change their behavior to survive.

Additionally, I could enhance the visuals by adding more details to the fish, creating different types and colors to represent various species. Improving the background with coral reefs or underwater plants could also make the scene more immersive. Sound effects, like bubbling water or gentle waves, could enhance the experience, making it feel like you’re truly underwater.

 

Concept

This weeks sketch is a fun, interactive scene where a police car chases a robber car, and the user controls the robber car’s movement. While the user moves the robber car around the screen, the police car automatically chases it, creating an exciting dynamic. Ordinary cars also drive randomly across the road, adding to the lively atmosphere of the chase.

Code Highlight
One part of the code that I’m really proud of is the chase function in the Car class. This function helps the police car determine how to move toward the robber car:

chase(target) {
  let force = p5.Vector.sub(target, this.pos); // Calculate direction to the target
  force.setMag(this.maxSpeed); // Set the force's magnitude to max speed
  force.sub(this.vel); // Adjust force based on current velocity
  force.limit(this.maxForce); // Limit the force to max steering
  return force; // Return the calculated force
}

This function uses math to calculate the direction the police car should go to catch the robber car. It ensures that the police car moves smoothly and quickly toward its target, making the chase feel realistic.

Embedded Sketch

Reflection and Future Ideas
I really liked how this project turned out! The chase between the police car and the robber car feels dynamic and engaging. However, there is always room for improvement. In the future, I could add more complicated steering behaviors, like making the ordinary cars avoid the police car or work together. I could also include obstacles on the road or change the weather to make it more challenging.

Another idea is to add a score system based on how long the police car can chase the robber or how many collisions happen, adding some competition to the game. I’d love to make the visuals more interesting too, with animated cars and a detailed background.

I really enjoyed the guest lecture by Aaron Sherwood and Kiori Kawai from Purring Tiger. They shared their project, MuJo, which mixes art and technology in an exciting way. One interesting part of their talk was how they began with interactive installations in cities before moving to the desert. They used projections on the sand dunes to create a unique experience, showing how nature can inspire art.

Aaron mentioned how he often discovers cool ideas by accident while coding. He talked about experimenting with different algorithms, which sometimes led to unexpected and beautiful results. This idea of “happy accidents” really resonated with me. It shows that creativity can come from trying new things, even when things don’t go as planned.

The theme of impermanence was also important in their work. They explained how both the art and the sand dunes change over time, which reflects the idea that nothing stays the same. I liked how they connected this concept to storytelling, showing how every performance is like a journey with its own beginning, middle, and end. Overall, the lecture opened my eyes to new ways of thinking about art and design. I left feeling excited to explore my creativity and connect my work to the world around me, just as they have done with MuJo.

Concept and Artistic Vision
For my midterm project, I wanted to explore how trees grow and branch out, which led me to create a generative art piece inspired by fractals in nature. Fractals are patterns that repeat themselves on smaller scales, like how branches grow from a tree trunk or veins spread in a leaf. This idea of repeating structures fascinated me, and I thought it would be fun to create a digital version of it.

My goal was to make the tree interactive, allowing users to control how the branches form in real-time. By moving the mouse, users can change the angle of the branches, making each tree unique based on their input. The inspiration for this project came from my curiosity about natural patterns and how I could recreate them using code. I researched fractal geometry and recursion, which are mathematical concepts often found in nature, and used this knowledge to guide my design.

Embedded Sketch and Link

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

Coding Translation and Logic
To create the tree, I used a recursive function, which is a function that calls itself to repeat the same process multiple times. This method was perfect for drawing a fractal tree because the branches of a tree naturally split into smaller and smaller branches. The main function that drives the sketch is branch(), which takes the current branch length, draws it, and then calls itself to draw smaller branches at an angle. The recursion stops when the branches become too small. This allowed me to create a natural branching structure with only a few lines of code.

The logic behind the tree’s growth is connected to the user’s mouse movements. I mapped the mouse’s X position to the angle of the branches, so when you move the mouse left or right, the branches change their direction. This made the tree feel interactive and dynamic. From class, I applied concepts of randomness and noise to slightly change how the branches grow, which gave the tree a more organic, natural feel. I also used vector transformations, like translate() and rotate(), to position and rotate each branch correctly on the canvas.

Parts I Am Proud Of and Challenges Overcome
One part of the project I’m really proud of is how smoothly the tree responds to mouse movement. I wanted the interaction to feel natural, without any jittering or sharp movements, which can be tricky when working with recursion. By carefully mapping the mouseX position to the branch angle, I made sure the transitions between the branches are smooth, even when the mouse is moved quickly. This adds to the overall experience, making the tree feel more alive.

One of the main challenges I faced was getting the recursion right without creating overlapping branches or cluttered patterns. When working with recursive functions like branch(), there’s a risk that the drawing can become messy if the angles or lengths aren’t carefully controlled. I solved this by setting a minimum branch length and adjusting the angle based on the mouse position, so the branches only grow within a controlled range.

Here’s a snippet of the code that handles the recursion for the branches:

function branch(len) {
  line(0, 0, 0, -len);  // Draw the current branch
  translate(0, -len);  // Move to the end of the branch

  if (len > 8) {  // Only keep branching if the length is greater than 8
    push();  // Save the current state
    rotate(angle);  // Rotate based on mouse position
    branch(len * 0.67);  // Recursively draw a smaller branch
    pop();  // Restore the state

    push();  // Save the state again for the opposite branch
    rotate(-angle);  // Rotate in the opposite direction
    branch(len * 0.67);  // Recursively draw the other branch
    pop();  // Restore the state
  }
}

Overcoming these challenges made the project more rewarding and taught me how to refine recursive logic for smoother results.

Pen Plotting Process
For the pen plotting process, I used my second draft sketch, which was a simplified version of the tree without user interaction. In this version, the tree grows and sways left and right, as if blown by the wind, with the branches and leaves already attached. To prepare it for plotting, I saved a specific moment of the sketch as an SVG file. I then imported the file into Inkscape for further editing.

In Inkscape, I layered the different parts of the tree to make it easier to plot in multiple colors. Specifically, I grouped all the branches and leaves together on one layer, and the stem on a separate layer. This allowed me to plot the stem first in black and then the branches and leaves in green. Using layers was crucial to make sure each part of the tree was plotted clearly without overlapping or messy transitions between colors.

This process of layering and color separation helped me create a clean, visually striking pen plot, where the black stem contrasts with the green branches and leaves.

Link to my second draft for reference: https://editor.p5js.org/maryamalmatrooshi/sketches/K0YQElaqm

Pen Plotted Photograph and Sped up Video

Areas for Improvement and Future Work
One improvement I wanted to add to my sketch was background music that plays while the user interacts with the tree. I think adding a calming, nature-inspired sound would make the experience feel even more alive and immersive. This would enhance the interaction, making it feel like the tree is part of a more natural, dynamic environment.

Regarding the pen plotting process, I faced a challenge with the way the leaves are drawn. In my sketch, the leaves are represented as ellipses that are filled in. However, the plotter only draws strokes, which means my leaves were outlined ellipses instead of being filled in. I’d like to improve this by experimenting with different leaf shapes that work better with the plotter. For example, I could create custom leaf shapes that are more suitable for stroke-only plotting, ensuring the final result looks more like natural leaves.

Two A3 Printed Images

References

https://editor.p5js.org/YuanHau/sketches/ByvYWs9yM

https://github.com/latamaosadi/p5-Fractal-Tree

https://github.com/adi868/Fractal-Trees

https://stackoverflow.com/questions/77929395/fractal-tree-in-p5-js

Concept

For my midterm project, I chose to create a generative art piece based on a fractal tree. I’ve always found fractal patterns in nature really interesting, like how trees branch out or how veins spread in a leaf. Each part of a fractal reflects the whole, which is something I wanted to explore in this project. I also wanted the tree to feel interactive so that users can control how the branches grow and move, making it feel more personal and engaging. The mouse controls the angle of the branches, which adds an element of real-time interaction.

Design

The design focuses on creating a tree that changes based on user input. By moving the mouse horizontally, the user can adjust the angle of the branches, which directly influences how the tree grows and branches out. This makes the experience interactive and unique to the user’s movement.

The main function in the code is branch(), which uses recursion to draw the tree. It takes the length of the current branch, draws it, and then calls itself to draw smaller branches at an angle. The recursion stops once the branch length is small enough, and the angle of the branches is tied to the position of the mouse on the screen. This creates a dynamic, interactive system where the tree’s structure shifts as the mouse moves.

Code
For now, I have a basic draft that lays the foundation for the project. Here’s the current code:

let angle = 0; // Initialize the angle variable, which will be controlled by mouse movement

function setup() {
  createCanvas(640, 360); // Set up a canvas of 640 by 360 pixels
}

function draw() {
  background(0); // Set the background to black each frame to clear the previous drawing
  angle = map(mouseX, 0, width, 0, TWO_PI); // Map the mouse's X position to an angle between 0 and TWO_PI (full circle)
  
  stroke(255); // Set the stroke color to white
  strokeWeight(2); // Set the stroke thickness to 2 pixels

  translate(width * 0.5, height); // Move the origin to the bottom center of the canvas
  
  branch(100); // Call the branch function to start drawing the tree with an initial length of 100
}

// Recursive function to draw the branches
function branch(len) {
  line(0, 0, 0, -len); // Draw a vertical line representing the current branch

  translate(0, -len); // Move the origin to the end of the current branch
  
  // If the current branch length is greater than 4, keep drawing smaller branches
  if (len > 4) {
    push(); // Save the current state of the drawing
    rotate(angle); // Rotate by the current angle (controlled by the mouse)
    branch(len * 0.67); // Call the branch function recursively, reducing the length by 67%
    pop(); // Restore the original state

    push(); // Save the current state again for the other branch
    rotate(-angle); // Rotate in the opposite direction by the current angle
    branch(len * 0.67); // Call the branch function for the opposite branch
    pop(); // Restore the original state
  }
}

This code creates a simple tree that responds to the mouse’s horizontal position. The tree grows and splits into smaller branches as the user moves the mouse. This serves as the base for the more complex features I will add later.

Embedded Sketch

Identified Risk and How I Reduced It
The part of the project that worried me the most was making sure the interaction with the mouse felt smooth and natural. I was concerned that the tree would shake too much when the mouse moved quickly, which would make the experience less enjoyable. To deal with this, I focused on carefully mapping the angles using the mouseX position to ensure the tree’s motion stays smooth and doesn’t jitter too much. I also tested the recursive function separately to make sure the branches don’t overlap or become cluttered.

Possible Future Additions
While this is the current draft, there are a few features I am considering for future versions, though these are not finalized yet:

• Colors: I might add color gradients or change the color of the branches based on their depth or size to make the tree more visually interesting.
• Animations: Animations can be added to make the tree grow over time or sway in the wind to make the piece feel more dynamic.
• More Trees: Adding multiple trees on the canvas could create a forest-like scene, where each tree is slightly different in shape or size.

draft 2 for now: https://editor.p5js.org/maryamalmatrooshi/sketches/K0YQElaqm

Concept
Inspired by Memo Akten’s Simple Harmonic Motion, I wanted to create something that combines pendulums and electron orbits, both moving in harmony. Akten’s work is amazing because it shows natural forces and mathematical patterns as art, and I wanted to bring that same feeling into my own sketch. In my sketch, pendulums swing while electrons move around a nucleus, representing atomic motion. I wanted to show how harmonic motion, something we usually see in science, can also be artistic and full of life. The result is an abstract but dynamic experience that connects physics with art.

Code Highlight
A section of the code I’m particularly happy with is the part that updates and draws the electrons. I didn’t want them to just follow a fixed orbit; I wanted them to move more like waves, giving the sketch a more organic and alive feel.

// Electron class to represent electrons orbiting the nucleus
class Electron {
    constructor(orbitalRadius, startAngle) {
        this.orbitalRadius = orbitalRadius; // Radius of the orbital
        this.angle = startAngle; // Starting angle for electron
        this.speed = 0.02; // Angular speed of electron
        this.amplitude = 40; // Amplitude for oscillating motion (to simulate wave-like behavior)
        this.frequency = 0.2; // Frequency of oscillation
        this.phase = random(TWO_PI); // Random phase offset for each electron
    }

    // Update electron's position with simple harmonic motion
    update() {
        this.angle += this.speed; // Increase angle for circular motion
        let displacement = this.amplitude * sin(this.frequency * time + this.phase); // Calculate oscillation in radius
        this.currentRadius = this.orbitalRadius + displacement; // Current radius based on oscillation
    }

    // Display electron and its trail
    display() {
        let x = cos(this.angle) * this.currentRadius; // Calculate x position based on current angle and radius
        let y = sin(this.angle) * this.currentRadius; // Calculate y position based on current angle and radius

        // Draw a trail behind the electron
        stroke(180, 100, 100, 0.2); // Light trail color
        noFill(); 
        beginShape(); // Begin trail shape
        for (let i = 0; i < 20; i++) {
            let trailAngle = this.angle - i * this.speed; // Calculate trail angle
            let trailRadius = this.orbitalRadius + this.amplitude * sin(this.frequency * (time - i * 0.1) + this.phase); // Calculate trailing radius with oscillation
            let tx = cos(trailAngle) * trailRadius; // X position of trail point
            let ty = sin(trailAngle) * trailRadius; // Y position of trail point
            vertex(tx, ty); // Draw vertex at trail point
        }
        endShape(); // Finish trail shape

        // Draw the electron as a filled circle
        fill(180, 100, 100); // Bright blue electron color
        noStroke(); 
        circle(x, y, 12); // Draw electron at current position
    }
}

The key part here is the use of harmonic oscillation to give the electrons a wave-like displacement, which makes them feel less rigid and more alive. I think this detail makes the overall animation more interesting and adds a layer of depth to the movement.

Challenges
One of the biggest challenges I faced was getting the electron orbits to feel natural. At first, they moved too mechanically, just following a circle. It felt too predictable and didn’t fit with the kind of fluid, organic motion I was aiming for. To fix this, I added the harmonic oscillation to their radius, which made them move in and out as they orbit, giving the motion more life.

Embedded Sketch

Reflection and Future Work
I’m happy with how the pendulums and electrons came together in this sketch. The combination of pendulums swinging and electrons orbiting creates an interesting mix of science and art. I liked exploring how these motions can be turned into something visually engaging. In the future, I’d like to add some interactivity to the sketch. For example, letting the viewer control the speed or direction of the pendulums and electrons using their mouse. I think that would make the experience more fun and personal. Finally, using randomness (like Perlin noise) for the electron movement could make it look more natural and less predictable. There are a lot of ways I could continue improving this, but for now, I’m happy with what I’ve created!

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.