Activity

ACE

Shipped this project!

Hours: 20.6
Cookies: 🍪 240
Multiplier: 9.72 cookies/hr

Lately I’ve been building a bunch of small physics-based projects using just HTML, CSS, and vanilla JavaScript.
I made things like a Projectile Motion Simulator, Ohm’s Law Simulator, Gravity Simulator, Sound Wave Visualizer, Magnetic Force Simulator, a Black Hole Simulator, and even a simple chain reaction simulation. Each one focuses on a different concept, but they all use canvas and basic logic to make the behavior interactive.
Honestly, the hardest part wasn’t just writing the code — it was getting everything to feel right. Sometimes the motion looked too fast, too slow, or just unrealistic, so I had to keep adjusting values and testing again and again. There were also small bugs here and there that took time to figure out.
But through all this, I learned a lot about animations, handling objects on canvas, and how physics concepts like force, motion, and velocity actually work when you try to implement them.
Overall, it’s been a really fun process, and I’m planning to keep building more and improving these further.

ACE

The simulation works by placing several nuclei (U-235) randomly on the canvas and starting with one moving neutron. When a neutron collides with a nucleus, it triggers fission — the nucleus splits into fragments and releases more neutrons. These newly created neutrons continue moving and can hit other nuclei, creating a chain reaction. This process is updated frame-by-frame using animation, making the reaction feel alive and continuous.
I added collision detection to check when neutrons hit nuclei, and after fission, I generate fragments and 2–3 new neutrons with random directions. There’s also a small visual highlight effect when a nucleus splits, which makes the reaction easier to follow.
Some special features include particle trails, bouncing neutrons, and a legend that explains each element (nucleus, neutron, fragments). The simulation also automatically stops when no active neutrons or nuclei are left, keeping it clean and controlled.

Attachment
0
ACE

Black Hole Simulator
The idea was to create a simple space environment where particles can orbit, spiral inward, and eventually disappear into the black hole.
The core logic is based on gravitational force, where each object is continuously pulled toward the center using an inverse-square relation. Every frame, I update velocity and position, which creates smooth motion and realistic curved paths. Objects closer to the center experience stronger force, so they accelerate faster and fall in.
One interesting part was handling the “event horizon.” I set a boundary near the center where objects get removed, giving the effect that they are being absorbed. I also added trails to each object so their paths look more dynamic and help visualize orbits.

For interactivity, I included sliders to control black hole strength, number of objects, and speed. This lets users experiment with different scenarios—like stable orbits vs chaotic collapse. Another nice feature is the ability to click on the canvas to add new objects with automatic orbital motion.
IN Visually, I worked on making it feel more like space by adding glow effects, an accretion disk, and fading trails. These small details make the simulation more engaging without making the code too complex.

Attachment
0
ACE

Magnetic Force Simulator
it visualize how magnetic forces work in real time. It allows users to explore both pole interactions and the behavior of moving charges within a magnetic field. By combining simple physics concepts with dynamic visuals, the project creates an engaging way to understand attraction, repulsion, and field effects.
This includes two main modes: pole interaction and moving charge. In pole mode, users can drag magnets, change their polarity, and observe how forces change based on distance and strength. In charge mode, users can spawn particles that move and curve under the influence of a magnetic field, demonstrating the effect of force on moving charges. These features make the simulation both interactive and educational.
The working mechanism is based on simplified physics principles. Magnetic force is calculated using an inverse-square relationship, while particle motion follows a basic form of the Lorentz force. The animation is handled using (requestAnimationFrame), ensuring smooth and continuous updates, while user inputs from sliders and mouse interactions instantly affect the simulation.

Attachment
0
ACE

Sound Wave Visualizer
It demonstrate how sound behaves through frequency, amplitude, and wave speed. The app visually represents sound waves on a canvas using sine functions, where users can interactively change sliders to see real-time changes in the wave shape. It also includes smooth animation using requestAnimationFrame and a neon-style visual design to make the experience more engaging.

In addition to the visual part, I integrated basic audio functionality using the Web Audio API, allowing users to generate a tone that matches the selected frequency and amplitude. I also added preset modes like bass and treble to quickly show different sound behaviors. Overall, the project connects both sound and visuals in a simple interactive way.

Attachment
0
ACE

Gravity Playground
Explore how objects fall under different planetary conditions. The idea was to let users select a planet, set mass and height, and then simulate a falling object in real time.
I used a canvas to animate the motion, updating position and velocity frame by frame to create a smooth falling effect. I also added calculations for falling time and final velocity using basic kinematics.
One thing I focused on was keeping the simulation simple but interactive, especially by showing how gravity changes across planets. Overall, this project helped me better understand how Gravitational Acceleration affects motion in different environments.

Attachment
0
ACE

another, I built an interactive Ohm’s Law Simulator to show how voltage and resistance affect current in a circuit. Users can adjust values with sliders and see real-time updates based on Ohm’s Law.
I have added a glowing bulb that changes brightness with current and a small animation to represent current flow. I also handled cases like short circuits to make the simulation more realistic.
Overall, the project turns basic electrical formulas into a simple and visual learning experience.

Attachment
0
ACE

Today I developed the Projectile Motion Simulator, an interactive physics tool that visualizes how objects move under gravity when launched at an angle.
The simulator allows users to adjust launch angle, initial velocity, and gravity for different planets. It then calculates and displays real-time results like maximum height, time of flight, and range using standard projectile motion equations.
It demonstrates core concepts of Projectile Motion in a simple and interactive way, making physics learning more visual and intuitive.

Attachment
0
ACE

Today I built the main dashboard for Physics Simulation Hub, a web-based collection of interactive physics simulations. The goal was to keep everything in one place so users can easily access different physics experiments like projectile motion, gravity, and electricity.

This dashboard acts as the central hub for all simulations, including Projectile Motion, Ohm’s Law, Wave Motion, and Gravity, making physics learning more interactive and accessible through visual simulation.

Attachment
0
ACE

Shipped this project!

Hours: 8.84
Cookies: 🍪 16
Multiplier: 1.79 cookies/hr

built a Student Management Dashboard that makes school data simple, visual, and easy to manage.
It shows student counts from Pre-Primary to Higher Secondary with class-wise breakdown, gender stats, and CSV export. I also added extra student details like blood group and health issues to make it more useful for real school management.

What I learned
Managing data with JavaScript & localStorage
Dynamic UI updates using DOM
Designing clean dashboards without frameworks

Challenge
Handling real-time updates and organizing data without a backend.

ACE

In this phase of development, I built a “Total Students” dashboard page for my Student Management System. The goal of this module is to provide a clear, structured overview of student distribution across different academic levels, along with real-time statistics and export functionality.
Objective

The main objective was to design a clean, responsive UI that displays:

Total number of students
Breakdown by education levels (Pre-Primary to Higher Secondary)
Class-wise distribution of boys and girls
Easy data export for reporting purposes

I created a set of top summary cards showing:
Pre-Primary, Primary, Lower Secondary, Secondary, Higher Secondary
Grand Total students

These values are dynamically calculated using data stored in localStorage.
Whenever new students are added, the stats automatically update.

Data Handling via Local Storage

Instead of using a backend, I used:

localStorage.getItem(‘students’) to fetch student data
JSON parsing to manage records

Each student is mapped to a class using a CLASS_MAPPING object, which organizes them into levels like:

Nursery → Pre-Primary
Class 1–5 → Primary
Class 6–8 → Lower Secondary
etc.

This allows automatic grouping and counting.

Gender Detection Logic

A simple function was implemented to determine gender:

Based on the last letter of the student’s name
const girlNames = [‘a’, ‘i’, ‘y’, ‘e’];

While not perfect, this approach helps quickly estimate gender distribution without extra input fields.

Tab-Based Navigation System

I implemented a tab system to switch between levels:

Pre-Primary
Primary
Lower Secondary
Secondary
Higher Secondary

Each tab dynamically shows:

Grade cards
Detailed student table

This improves usability and keeps the UI clean.

Attachment
0