@HamdanMuneer

Added automated science tests to ExoSim.The new test suite verifies the circle-overlap formula used for grazing transits, including exact analytical values, containment, separation, symmetry, and boundary conditions. It also tests full, grazing, and missed transit visibility, confirms that the signal decreases as projected separation increases, and checks the geometry-classification thresholds. All 17 tests pass, and ExoSim still completes a clean production build with no TypeScript or compilation errors.

Redesigned ExoSim’s full interface to match the new realistic observation experience. I replaced the generic dashboard styling with an open scientific-console layout built from precise dividers, restrained colors, and more intentional spacing. I also created an original ExoSim logo combining an eclipse, orbital path, and transit light-curve dip. The interface now uses separate fonts for display headings, normal controls, and scientific telemetry. I redesigned the buttons, sliders, planet archive, Science Math section, and live chart so everything feels like one cohesive exoplanet research tool rather than a collection of grey cards. The updated production build passes successfully with no TypeScript or compilation errors.

Made ExoSim properly responsive for mobile devices. I redesigned the mobile header and navigation, reorganized the orbital playback controls, converted the telemetry panel into a two-column layout, and adjusted the simulator, mission controls, and light-curve chart to fit smaller screens without horizontal overflow. I also fixed a light-curve UI issue where switching between “Baseline Stable” and “Transit Detected” caused the chart to move because the labels had different widths. The chart now stays fixed while only the live measurement marker, flux value, and detection status update.

Improved the science accuracy of grazing transits in ExoSim. Previously, the simulator estimated partial transits using a simple straight-line calculation. I replaced that with the actual overlapping-circles formula, treating the visible star and planet as two disks. The simulator now calculates exactly how much of the planet overlaps the star during a grazing transit. The transit percentage and light-curve dip change nonlinearly as the orbital inclination moves from a full transit to a missed one. I also separated the calculation into its own TypeScript utility file so the science logic is easier to understand and maintain.

Added distinct visual profiles for ExoSim’s NASA presets. The planets no longer share the exact same surface appearance. Kepler-10 b now has a darker volcanic look, Kepler-186 f uses cooler iron-rich colors, and Kepler-20 e has a scorched copper surface. I separated the visual settings into their own TypeScript data file, then connected them to the procedural texture generator. Loading a NASA preset now changes both the scientific measurements and the planet’s 3D appearance. These are scientifically inspired visualizations rather than actual images, since we don’t have photographs of these exoplanet surfaces.

Improved the planet visuals in ExoSim! The planet now has a procedurally generated rocky surface with terrain variation, ridges, craters, and bump mapping instead of being a plain colored sphere. I also added a subtle atmospheric rim and changed the lighting so it has a proper illuminated side and dark side. The texture is generated directly in the code, so I didn’t need to use an external image. The planet still resizes, rotates, follows the tilted orbit, and turns into a darker silhouette while crossing the star.

I added a NASA exoplanet library to ExoSim. I built a new library using real data for Kepler-10 b, Kepler-186 f, and Kepler-20 e. Each card shows the planet radius, star radius, orbital period, discovery year, and a link to its NASA Exoplanet Archive source. I also connected the presets to the actual simulator. Loading a planet now updates the 3D star and planet sizes, transit depth, light curve, target name, and live science calculations together. Comparing the systems is interesting—Kepler-186 f creates a much deeper dip because its host star is considerably smaller.

Added a live Science Math section to ExoSim.
It explains how exoplanet transit depth is calculated using (Rp / Rstar)², and the calculation updates with the simulator controls. I also connected orbital inclination to the explanation, so it shows the difference between full, grazing, and missed transits.
I’m trying to make the science understandable without turning the simulator into a textbook page.

I added simulated telescope noise to ExoSim’s light curve. There is now an Observation Noise control from 0 to 300 ppm. At 0 ppm, the telescope data is perfectly clean. Increasing it adds scattered measurement points around the theoretical transit curve, making smaller brightness dips harder to identify. The graph now separates the clean theoretical model from the simulated telescope observation. I also added an observed-flux reading, a noise-floor measurement, and replaced the old pill-shaped detection badge with a flatter instrument-style status display. The playback controls, orbital animation, current measurement marker, and transit detection still remain synchronized.

I added a proper playback console to ExoSim. The simulation can now be paused and resumed, reset to phase 0, and adjusted anywhere from 0.2× to 3.0× speed. The speed slider uses 0.1× steps, and it changes the planet’s orbit, the star rotation, the background movement, and the live graph together. I also enlarged the Orbital View so the 3D simulation has more room. My first version made the playback controls too large, so I reduced their height and width while keeping the speed slider readable. Pause, reset, speed changes, orbital phase, transit detection, and the light-curve marker now remain synchronized.

I added a live light-curve graph to ExoSim and synchronized it with the planet’s 3D orbit.The graph shows the star’s relative brightness across one complete orbit. When the planet moves in front of the star, the marker enters the dip, the measured flux falls below 100%, and the status changes from “Baseline stable” to “Transit detected.” Changing the planet or star radius also recalculates the transit depth and redraws the curve. The first version had a synchronization bug: the curve rendered, but the live marker stayed stuck at orbital phase 0.00 even while the planet was moving. I traced it to how the 3D scene was reporting its phase and replaced that logic with a browser-time update and a stable callback reference. Now the animation, transit calculation, graph marker, brightness reading, and detection status all update together.

ExoSim’s simulation is interactive now.I added controls for both the planet radius and star radius. Changing either slider updates the 3D objects immediately while the planet continues orbiting. The simulator also calculates the transit depth live using ΔF/F = (Rₚ/R★)², including the conversion between Earth radii and solar radii.I also spent time improving the orbital scene. The planet now travels in front of and behind the star, the orbit path is easier to see, and the star has a rotating generated surface texture, darker spots, lighting, and a softer atmospheric glow instead of looking like a flat yellow circle.Next I’m building the live light-curve graph so the brightness dip matches the simulated transit.

I replaced the Orbital View placeholder with ExoSim’s first actual 3D scene using React Three Fiber.The scene now has a glowing star, a small exoplanet, warm lighting, and a subtle background star field. I also learned how 3D positions use x, y, and z coordinates and experimented with the planet’s position, size, and colours. It was really satisfying to see the dashboard turn from a static mockup into an actual WebGL simulation. The planet is still stationary for now. Next I’m going to animate it across the star and start building the transit itself.

I replaced the default Next.js starter page with the first real ExoSim interface. It now has a dark observatory-style layout, a top navigation bar, an orbital view panel, mission controls, and a placeholder for the live light-curve graph.

I also changed the color direction because I didn’t want it to look like a generic neon AI dashboard. I’m going for a warmer space-instrument look with black, stone, amber, and muted red accents.

The app is still mostly a frontend shell right now, but it finally looks like the start of the actual simulator. Next I’ll commit this UI work and then start adding the real 3D WebGL scene.

Today I set up the base Next.js project with TypeScript, Tailwind, and the App Router. I also installed the libraries I’ll need later for the 3D simulator and charts, like Three.js, React Three Fiber, Drei, Chart.js, Framer Motion, and Lucide.

I ran into a small issue at the start because npm package names can’t have capital letters, so I had to create the project folder as “exosim” instead of “ExoSim”. After that I got the dev server running locally and made my first small edit to the starter page.

I also pushed the project to GitHub, so now the repo is connected to my Stardance project. Next I’m going to start turning the default page into the actual ExoSim space-themed UI.