Week 3-Simulating Planetary Motion

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.