Inspiration

Learning anatomy and learning how to train muscles are usually separate fields. Medical anatomy explains bodily function in detail, while fitness resources struggle to explain the science or muscles involved. We created MuscleAtlas to connect these fields through an interactive experience, allowing users to discover further behind each subject.

What it does

MuscleAtlas allows users to explore the musculature of a detailed 3D model, selecting muscle groups, learning their functions, roles in each movement, etc. Each section provides detailed information on hypertrophy-inducing exercises, loading information, rep ranges, frequency, recovery, diet, and sleep information.

Users can also open an AI assistant to ask questions or build training programs. Mixer Mode allows several muscles or subdivisions to be selected, after which the AI will recommend exercises that effectively train the combination.

How we built it

We built the interface or UI with TypeScript, Vite, Three.js, HTML, and CSS. The model is adapted from Z-Anatomy and used through an interactive Three.js scene with muscle selection capability, individual muscle coloring, labels, camera controls, and anatomical layers.

The software is deployed through Github Pages. AI requests go through a Cloudflare Worker, securely storing the OpenAI API key and preventing it from being exposed in the browser. Research and models are credited properly within the sources subsection.

Challenges we ran into

One major challenge was connecting the individual anatomical objects to bodybuilding muscle groups. Some areas, such as the abdominal wall, which contains overlapping layers that were difficult to display without damaging the general view of the structure.

We also had to coordinate camera movement, right-click selections, muscle descriptions, and the AI window without having one interaction interfere with another. Finally, connecting the GitHub Page to an AI service required a secure backend, request handling, deployment changes, and API error adjustments.

Accomplishments that we're proud of

We are proud that MuscleAtlas goes beyond simply labeling anatomy. It connects anatomical structures to hypertrophy-centered training within one interface.

We also created unique visual highlighting for muscle subdivisions, responsive camera controls, expandable educational selections, previously described Mixer Mode, and integrated AI.

What we learned

We learned that creating a project centered around anatomy or biological models can have implementation struggles. A technically accurate model may still be confusing to the user unless the labeling, camera, layers, and colors are all carefully designed, teaching us a lesson on the importance of user friendliness, and a sufficient interface.

We also learned the importance of source verification when it comes to presenting scientific modeling or software. Exercise recommendations require more than typical advice, including the context regarding technique, loading, volume, recovery, individual differences, and scientific research. From a technical viewpoint, we gained experience in interactive 3D rendering, state management, frontend creation, APIs, AI integration, and more.

What's next for MuscleAtlas

Next, we would like to expand the coverage of anatomy, refine muscle subdivisions, and add a larger library or database of evidence, or research used for lifting and calisthenic exercises. We also plan to improve the AI assistant with better source usages, personalized program creation, and recommendations based on the user's equipment, experience, history logs, and more.

Further improvements could include mobile optimization, more accessibility features, exercise demonstrations, training plan exports, progress tracking, and exercise comparisons in regard to muscle coverage.

Share this project:

Updates

Submission history