Inspiration
As a student, I've watched countless classmates struggle with mathematics—not because they lacked intelligence, but because traditional teaching makes formulas feel abstract and disconnected from reality. When I asked my peers "what does the 'a' in y=ax²+bx+c actually do?", they could recite the formula but couldn't explain its meaning. I realized that math education needed two things: emotional engagement and instant visual feedback. What if instead of memorizing equations, students could see them come alive? What if solving math felt like playing a video game? That's when Noesis Academy was born—a fusion of storytelling, 3D graphics, and interactive visualization that transforms abstract concepts into tangible adventures.
What it does
Noesis Academy is an immersive 3D learning platform that turns mathematical education into an epic quest. Students don't just solve equations—they save a magical world where broken mathematical patterns threaten reality itself. Core Experience:
Narrative-Driven Learning: Students meet characters like the Headmaster, Guardian Spirits, and Crystal Miners who guide them through challenges Interactive Visualizations: Real-time graphs update as students adjust parameters (a, b, c), creating immediate "aha!" moments 3D Game Environment: WebGL-powered particle fields, floating geometric shapes, and parallax effects immerse learners in a fantasy world Intelligent Challenge System: 3-attempt limits with AI-powered contextual hints that guide without spoiling Epic Celebrations: Victory modals with confetti animations reward success and build confidence
Learning Journey:
Choose your path (Haunted Parabola or Sine Wave Forest) Receive story-based clues ("The fountain should peak at height 4") Manipulate formula parameters with interactive sliders Watch graphs transform in real-time Request hints when stuck Achieve victory and become a "Pattern Master"
The app covers quadratic, trigonometric, and exponential functions, with each presented through rich storytelling that gives mathematical concepts emotional weight and memorable context.
How we built it
Architecture:
Frontend Framework: React.js for component-based architecture and state management 3D Graphics Engine: Three.js with WebGL rendering for particle systems (2000+ particles), floating geometric meshes (octahedrons, tetrahedrons), dynamic lighting, and mouse-parallax camera movement Mathematical Visualization: Chart.js with react-chartjs-2 for real-time graph rendering with smooth animations Computation Engine: Math.js for safe formula evaluation and parameter substitution Data Persistence: Browser localStorage API with graceful fallbacks for progress saving Styling: Custom CSS with 3D transforms, glassmorphism effects, gradient overlays, and keyframe animations
Technical Implementation:
Created modular component system (StoryView, ChallengeInterface, FormulaVisualizer, ThreeBackground, Modal) Implemented typewriter text animation with character-by-character rendering Built speech bubble UI with positioning arrows and glowing borders Designed adaptive graph scaling based on formula output ranges Integrated Three.js scene lifecycle with React useEffect hooks Optimized particle system performance to maintain 60fps Created modal system for answer reveals and celebration screens Implemented attempt tracking with auto-reveal on failure
Development Process: Built solo in 24 hours with iterative design—started with core story engine, added visualization layer, integrated 3D graphics, then polished UI/UX with modals and animations.
Challenges we ran into
- Three.js + React Integration React's reconciliation can conflict with Three.js's imperative API. Solution: Used refs to mount the Three.js canvas and cleanup functions to properly dispose of geometries/materials on unmount.
- Real-Time Performance Rendering 2000 particles + multiple geometric shapes + graph updates simultaneously threatened frame rates. Solution: Reduced particle update frequency, used BufferGeometry instead of Geometry, and memoized expensive calculations.
- Formula Evaluation Security Directly evaluating user-manipulated formulas risks code injection. Solution: Used Math.js's safe parser with restricted scope and validated all parameter inputs.
- Graph Auto-Scaling Different formulas (quadratic vs exponential) produce vastly different y-ranges. Solution: Implemented dynamic axis calculation based on parameter ranges and formula types.
- 3D Depth Perception Creating visual hierarchy with overlapping 3D elements, transparent cards, and foreground content was challenging. Solution: Used z-index layers, backdrop-blur filters, and careful opacity management.
- State Synchronization Keeping story progress, parameter values, attempt counts, and modal states synchronized across components. Solution: Lifted state to App.js and passed handlers down through props with clear data flow.
- Mobile Responsiveness 3D effects and complex layouts broke on smaller screens. Solution: Used responsive padding, flexible font sizes, and conditional rendering for resource-intensive effects.
Accomplishments that we're proud of
🎮 Built a fully functional 3D learning game in 24 hours : From concept to polished product with multiple game systems 🌟 Created an emotional connection to math : Students report it "doesn't feel like studying" 🎨 Achieved a cohesive dark hero aesthetic : Professional-grade UI/UX with glassmorphism, neon accents, and smooth animations 📊 Made abstract formulas tangible :Seeing parameters affect graphs in real-time creates genuine understanding 🎭 Integrated narrative and education seamlessly :Story clues naturally guide mathematical problem-solving ⚡ Maintained 60fps performance : Even with 2000+ particles and real-time graph rendering 🎉 Designed delightful micro-interactions : From typing animations to confetti celebrations, every detail feels polished 💡 Solved real educational problems : Addresses the disconnect between rote memorization and conceptual understanding 🔧 Clean, maintainable code : Modular component architecture that's easy to extend with new chapters and formulas
What we learned
Technical Skills:
Advanced Three.js techniques: particle systems, dynamic lighting, camera controls, and performance optimization React hooks patterns: useEffect for lifecycle management, useState for complex state, and useRef for DOM access WebGL rendering pipeline and how to maintain performance with complex scenes Chart.js customization for mathematical visualization CSS 3D transforms and how to create depth without actual 3D rendering Browser storage APIs and data persistence strategies
Design Principles:
Visual hierarchy matters: Users need clear focal points even in complex 3D environments Feedback loops are crucial: Instant visual response to slider changes makes learning intuitive Emotion drives retention: Stories create memorable contexts for abstract concepts Progressive disclosure: Introducing features gradually prevents overwhelming learners
Educational Insights:
Students learn by doing, not watching: Interactive manipulation beats passive observation Context makes concepts stick: "Fix the fountain" is more memorable than "solve for c" Failure needs to feel safe: Hints and attempt limits reduce math anxiety Celebration reinforces learning: Victory screens create positive associations with math
Product Development:
Scope management is critical in hackathons—focus on core experience first Polish matters—small details like animations significantly impact perceived quality User testing reveals gaps between developer intent and user understanding Accessibility considerations (contrast, font size, clear instructions) can't be afterthoughts
What's next for Noesis Academy
Immediate Enhancements (Next Month):
Expand to 20+ story chapters covering algebra through pre-calculus Add more mathematical topics: geometry (transformations), statistics (distributions), calculus (derivatives) Implement sound design with background music and effect sounds Create difficulty modes (Easy/Normal/Hard) for differentiated learning
Medium-Term Goals (3-6 Months):
Teacher Dashboard: Analytics showing student progress, time-on-task, and common struggle points Custom Story Creator: Tool for educators to build their own narrative-driven math challenges Multiplayer Mode: Competitive math duels and cooperative problem-solving Mobile App: Native iOS/Android versions with touch-optimized controls Achievement System: Badges, leaderboards, and unlockable cosmetics
Long-Term Vision (1 Year+):
VR/AR Integration: Manipulate 3D graphs in virtual space AI Personalization: Adaptive difficulty and story paths based on individual learning patterns Curriculum Integration: Align with Common Core and state standards Partnerships: Collaborate with schools, tutoring centers, and educational publishers Research Study: Partner with universities to measure learning outcomes vs traditional methods Internationalization: Multi-language support and culturally adapted stories Accessibility Features: Screen reader support, colorblind modes, dyslexia-friendly fonts
Scalability Plans:
Architecture designed for easy chapter addition (just add JSON objects) Component system supports new formula types without core refactoring Story engine can handle branching narratives of any complexity 3D scene optimized for web, but designed to scale to native performance
Impact Goals:
Reach 10,000 students in first year Achieve 80%+ completion rates (vs 20-30% for traditional online math tools) Demonstrate measurable improvement in conceptual understanding through A/B testing Make math the subject students choose to study during free time.
Log in or sign up for Devpost to join the conversation.