Week 3: OOP assignment

Reflection

In this assignment, I set out to create a whimsical yet recognizable depiction of our solar system, complete with every planet—and even Pluto for nostalgia. The overarching idea was sparked by my longstanding fascination with both outer space and various generative art techniques, as I sought to merge the awe-inspiring nature of celestial bodies with the playful unpredictability of computer-generated visuals. To capture the Sun’s vibrant energy, I used sine waves to animate its pulsing effect, allowing the star’s size and color to oscillate smoothly. This design choice aimed to give the Sun an almost breathing, organic character, setting the tone for the rest of the scene. Each planet follows an elliptical orbit, and I introduced distinct starting angles and orbital speeds to ensure that no two bodies behave exactly alike. This subtle variety makes the animation feel more alive from the outset, preventing it from looking too rigid or scripted. Additionally, I incorporated a feature to generate a random number of moons for each planet, providing further variation across multiple runs. One of the structural highlights of my approach was centralizing each planet’s properties—such as hue, orbit radii, and moon count—within a dedicated data array. This not only simplified the process of tweaking individual planetary attributes but also made it easier to add or remove planets and features without having to refactor the entire codebase.

// Each object in this array describes one planet's settings
let planetData = [
  {
    name: "Mercury",
    orbitXRadius: 80,
    orbitYRadius: 70,
    p_speed: 2.0,
    size: 6,
    col: [200, 200, 60],
    moonCount: 0
  },
  {
    name: "Venus",
    orbitXRadius: 120,
    orbitYRadius: 110,
    p_speed: 1.8,
    size: 8,
    col: [220, 150, 70],
    moonCount: 0
  },
  {
    name: "Earth",
    orbitXRadius: 160,
    orbitYRadius: 150,
    p_speed: 1.6,
    size: 9,
    col: [70, 150, 220],
    moonCount: 1 // Earth has 1 moon
  },
  {
    name: "Mars",
    orbitXRadius: 200,
    orbitYRadius: 190,
    p_speed: 1.3,
    size: 7,
    col: [220, 100, 70],
    moonCount: 2 // Mars has 2 small moons
  },
];

During development, a particularly intriguing challenge arose when dealing with the sheer number of moons orbiting the larger gas giants, like Jupiter and Saturn. Rendering a high volume of small objects orbiting in real-time can quickly become computationally expensive. To address this, I experimented with optimizing the drawing routines and ensuring that the code avoids unnecessary calculations—especially when multiple moons share similar trajectories or render states. Another aspect I focused on was enhancing the user’s sense of connection with the simulation. Currently, a single mouse click toggles whether the orbit paths are displayed, letting viewers choose between a minimalistic, clean look and a more instructive, data-rich visualization. As an additional layer of engagement, I plan to implement interactive elements such as hovering over a planet to reveal tooltips or pressing specific keys to label celestial bodies and show background stars. These features would deepen the user’s involvement, granting them not just a visual feast but also the chance to explore and learn.