Home / Projects / Kinematics & Motion Planning
● ROBOTICS · JAVASCRIPT + HTML5 CANVAS

Robot Kinematics & Motion Planning

A collection of from-scratch robotics simulations built in JavaScript and HTML5 — covering graph-search path planning, physical simulation, forward and inverse kinematics, and sampling-based motion planning. Each module was implemented without a physics or robotics library: the math, the renderer, and the search algorithms are all hand-built.

JavaScriptHTML5 CanvasA* Search Lagrangian DynamicsQuaternionsJacobian MethodsRRT-Connect
01 · Path Planning

A* Search Algorithm

Implemented a heap-based priority queue and the A* search algorithm from scratch to find shortest paths across a grid, using Euclidean distance to the goal as an admissible heuristic.

The visualization shows the frontier expanding outward from the start node, guided by the heuristic, until it converges on the optimal path to the goal.

Priority QueueHeuristic SearchGraph Traversal
A* search algorithm animation
astar.gif — heap-based A* search expanding toward the goal
02 · Physical Simulation

Simple Pendulum Simulation

Modeled a 1-DOF robot arm as a physical pendulum, deriving its equations of motion from Lagrangian dynamics and integrating them forward in time with two numerical integrators: Euler's Method and Velocity Verlet.

Comparing the two integrators side-by-side highlights how energy drift accumulates differently — Velocity Verlet stays far more stable over long simulation runs.

Lagrangian DynamicsEuler IntegrationVelocity Verlet
Pendulum physical simulation animation
pendularm.gif — 1 DOF pendulum arm under numerical integration
03 · Forward Kinematics

Forward Kinematics

Rendered a multi-link robot arm using 3D geometric matrix transforms and matrix-stack composition to propagate each joint's coordinate frame down the kinematic chain.

Added Axis-Aligned Bounding Box (AABB) collision detection between links — the red wireframe highlights which robot segments are currently colliding.

Coordinate TransformsMatrix StackAABB Collision
Forward kinematics animation
forwardkinematics.gif — matrix-stack transforms with AABB collision highlighting
04 · Inverse Kinematics

Inverse Kinematics

Solved for joint angles that drive the end effector to a target position using gradient descent optimization, implemented two ways: the Jacobian Transpose method and the Jacobian Pseudoinverse method.

The end effector tracks the cursor in real time as the solver iterates, converging on a valid joint configuration each frame.

Gradient DescentJacobian TransposeJacobian Pseudoinverse
Inverse kinematics animation
inversekinematics.gif — end-effector tracking via Jacobian-based IK
05 · Motion Planning

Sampling-Based Motion Planning

Implemented the RRT-Connect search algorithm to plan collision-free paths for the robot through cluttered environments, growing two rapidly-exploring random trees from the start and goal until they connect.

Yellow breadcrumbs mark the explored tree nodes, and the final collision-free path is highlighted in red as the robot executes it.

RRT-ConnectCollision DetectionSampling-Based Planning
RRT-Connect tree search animation
rrtconnect.gif — dual-tree RRT-Connect search
Robot executing planned motion path
rrtmotion.gif — robot executing the planned path