SAMPLES

PHYSICS SIMULATIONS PORTFOLIO (opens in new tab)

Developed by Takashi Inskeep with AI troubleshooting assistance.

These projects are a sample of my recent work with React, as seen in my GitHub Repository (opens in new tab) .

This interactive portfolio showcases three physics simulations built with React, demonstrating mathematical programming, real-time animations, and advanced state management. Each simulation explores different aspects of physics and astronomy through interactive visualizations.

Technical Skills Demonstrated

  • React Expertise: Advanced hooks (useState, useEffect, useRef, useCallback)
  • Mathematical Programming: Trigonometry, physics calculations, orbital mechanics
  • Performance Optimization: requestAnimationFrame, efficient state management
  • Component Architecture: Reusable components, prop handling, composition patterns
  • Animation Systems: Smooth 60fps animations, delta-time calculations
  • User Interface Design: Responsive controls, intuitive parameter adjustment
  • Physics Simulation: Collision detection, gravity systems, realistic motion

Technologies Used:

  • React 18 - Component framework and state management
  • JavaScript ES6+ - Modern JavaScript features
  • CSS3 - Animations, transforms, and responsive design
  • HTML5 - Semantic markup and canvas-like visualizations
  • Mathematical Libraries - Custom physics and orbital calculations

Physics Ball Bounce Simulation

Screenshot of bounce simulation showing colorful circles on a black background (opens in new tab)

A multi-object physics engine featuring bouncing balls with realistic gravity and collision detection. Each ball maintains independent physics while sharing global parameters.

Key Features:

  • Multi-ball physics simulation (12 independent objects)
  • Real-time gravity adjustment (0-1000 pixels per second squared)
  • Variable bounce elasticity (0-100%)
  • Realistic collision detection with boundaries
  • Random ball colors and initial velocities

Orbital Mechanics Simulation

Screenshot of orbital simulation showing a planet orbiting a star (opens in new tab)

A physics-based demonstration of Kepler's Third Law showing the relationship between orbital period and distance. Features a planet orbiting a central star with adjustable orbital parameters.

Key Features:

  • Implementation of Kepler's Third Law (T squared proportional to a cubed)
  • Smooth animations using requestAnimationFrame
  • Real-time calculation display (period, radius, angular velocity)
  • Interactive orbital period adjustment
  • Dynamic orbit visualization that scales with distance

Planetary Ring System Visualizer

Screenshot of planetary ring visualizer showing rings from different angles (opens in new tab)

An astronomical simulation demonstrating how planetary rings appear from different orbital perspectives. Users can adjust orbital inclination and watch real-time changes in ring appearance as viewed from a moon's surface.

Key Features:

  • Real-time orbital mechanics calculations using trigonometry
  • Interactive parameter controls with smooth animations
  • 60fps performance optimization
  • Mobile-responsive touch controls
  • Mathematically accurate astronomical relationships

OTHER PROJECTS

These projects use HTML, CSS, and vanilla JavaScript to create educational demonstrations of math and science concepts.

BaseCalc(opens in new tab)

Screenshot of BaseCalc multi-base calculator interface (opens in new tab)

What This App Is:

BaseCalc is a multi-base calculator that performs arithmetic operations in any numeric base from 1 to 36, including binary, octal, decimal, and hexadecimal. Its color-coded interface visually highlights the mathematical properties of each number: Prime numbers appear in dark red, perfect squares in yellow-green, powers of two in teal, and so on, making it both a powerful calculation tool and an educational resource for exploring number theory across different base systems.

How to Use It:

Select your desired base from the dropdown menu (bases 1-36, with "A" representing base 10), then enter numbers using the digit buttons or keyboard and choose an operation (+, -, *, /, **, √). Press the equals button (=) or Enter key to calculate, with results automatically displayed in your selected base. Advanced features include trigonometric functions (switch between degrees and radians with the "rad/°" button), custom base logarithms, mathematical constants (e and π), and full keyboard support - use number and letter keys for digits, operator symbols for functions, and Backspace to clear.

Climate(opens in new tab)

Screenshot of Climate visualization tool showing temperature and precipitation data (opens in new tab)

What This App Is:

Climate: Base-06 is a climate visualization tool designed for worldbuilding. The app generates detailed climate data for any location on a fictional planet by simulating temperature and precipitation patterns based on latitude, longitude, and altitude. It classifies climates into nine distinct types (Jungle, Savanna, Desert, Forest, Prairie, Canyon, Taiga, Heath, and Barren) and displays monthly temperature and precipitation data in an interactive chart. The tool provides information about seasonal patterns and temperature variations (both annual and diurnal).

How to Use It:

To use the app, adjust the sliders to your desired latitude (0 - 90°), longitude (-90 - 0°), and altitude (0 - 2000 meters). You can also fine-tune parameters like base temperature, temperature range, and rainshadow effect using the additional sliders. The app responds to keyboard shortcuts for quick navigation: use W/S to adjust latitude, A/D for longitude, arrow keys for larger jumps, and Ctrl/Shift to change altitude in 100-meter increments. The climate chart updates in real-time, showing monthly temperatures and precipitation levels, while the display indicates your climate classification, hemisphere, and whether the climate exhibits more annual or diurnal temperature variation. You can toggle between Celsius and Fahrenheit using the 'c', 'f', or 'u' keys.

Orbit(opens in new tab)

Screenshot of Orbit simulator showing multiple celestial bodies in orbit (opens in new tab)

What This App Is:

The Interactive Orbital Simulator is a physics-based visualization tool that demonstrates celestial mechanics and Kepler's Third Law of planetary motion. The app allows you to simulate up to seven orbital bodies (moons or planets) orbiting around a central host body, with each orbital body color-coded for easy tracking (red, orange, yellow, lime, cyan, skyblue, and hotpink). The simulator automatically calculates orbital distances based on the periods you input using Kepler's Third Law (which states that the square of an orbital period is proportional to the cube of the orbital distance), providing a scientifically accurate representation of how celestial bodies move in space. The visual display shows the orbits as translucent circles with the moons traveling along their paths in real-time.

How to Use It:

To use the simulator, simply enter the orbital period (in seconds) for each moon in the input fields labeled p1 through p7 on the left side of the display. The app will automatically calculate and display the corresponding orbital distances (d1-d7) in pixels based on Kepler's Third Law. You can control the simulation using the Play/Pause button to start or stop the animation, and the Reset button to return all bodies to their starting positions. The speed slider allows you to adjust how fast time passes in the simulation (1x to 100x speed), making it easy to observe longer orbital patterns. The current simulation time is displayed in the table on the right. To hide any orbital body, simply enter 0 or a negative value for its period, and both the moon and its orbit will disappear from the display.