Virtual Chemistry Lab

Virtual chemistry Lab turns school chemistry into a mission‑based virtual lab, where students mix reagents, watch reactions come alive, and see a simple particle‑level story of what’s happening

Comment

Inspiration

Chemistry is often taught through static equations and too little lab time. Students memorize that HCl + NaOH gives NaCl and H₂O, but rarely get to play with reactions or see what happens at the particle level. At the same time, simulations like “Mouse Party” and PhET show how much more engaging science becomes when it looks and feels like a game, not a worksheet. Virtual Chemistry Lab grew out of the idea: “What if a small, focused set of classic reactions could be turned into mission‑style challenges with rich visuals and a simple micro‑level story behind each mix?”

What it does

Virtual Chemistry Lab is a browser‑based interactive lab for introductory reactions. Learners:

  • Add stylized flasks with reagents like HCl, NaOH, CuSO₄, FeCl₃, KSCN, NaCl, AgNO₃, NaHCO₃, CH₃COOH, and H₂O to a bench.
  • Drag flasks into a central mixing beaker; the flasks tilt, the beaker fills, and the liquid color smoothly transitions.
  • See reaction‑type‑specific animations:
    • Gas evolution: bubbles and a subtle gas plume.
    • Precipitation: cloudy “floc” forming and settling.
    • Neutralization and complex formation: cleaner color changes and gentler motion.
  • Get instant textual feedback from the backend: reactants used, a short description of the reaction, and the combined molar mass.
  • Watch a Reaction Story panel that shows a simplified particle‑level animation (ions clustering into a solid, gas bubbles forming, H⁺ and OH⁻ meeting, etc.) plus a short caption connecting the animation back to the chemistry concept.

On top of the sandbox, there is a mission system (e.g., “Create a blue precipitate,” “Make a blood‑red complex,” “Produce gas”) so students are not just randomly mixing but aiming for specific learning goals.

How I built it

Frontend

  • Built with HTML5, CSS3, and vanilla JavaScript (ES6).
  • Uses PIXI.js for all 2D drawing and animation:
    • Layered scene: background (wall, cabinet, shelf), mid layer (table, flasks, mixing beaker), foreground (bubbles, gas plumes).
    • Custom‑drawn glassware shapes and liquid surfaces with shadows and highlights.
    • Smooth easing for drag, pour, and liquid‑level animations.
  • Implements drag‑and‑drop flasks, mission logic, and the Reaction Story mini‑canvas driven by a reactionType flag from the backend.

Backend

  • Built with Node.js and Express plus CORS.
  • Contains a small in‑memory chemistry engine:
    • chemicalDB with reagent formulas, molar masses, and typical solution colors.
    • reactionOverrides for key reactions (neutralization, gas evolution, precipitates, and complexes), each annotated with:
    • product (balanced reaction string).
    • description (short explanation).
    • color (product color).
    • gas / precipitate booleans.
    • type (e.g. "precipitation", "gas_evolution", "neutralization", "complex_formation", "dissolution").
  • When the frontend calls POST /api/mix with reactant names, the backend:
    • Uses an override if available, or falls back to blending colors.
    • Optionally queries the Wolfram|Alpha Short Answer API to generate a concise reaction description for pairs that are not explicitly hard‑coded.

This structure keeps the visuals and the chemistry logic cleanly separated and easy to extend.

Challenges I ran into

  • Balancing realism and fun:
    Full general‑purpose reaction prediction is hard, and not every reagent pair yields a nice, visually obvious outcome. The challenge was to stay chemically sensible, but still guarantee a clear, educational reaction for the core mission pairs. The solution was to curate a small, high‑impact set of reactionOverrides and let everything else be a softer fallback.

  • Getting the visuals to feel “intentional” without an artist:
    Pure code‑drawn glassware and liquids can easily look like placeholders. It took several iterations of outlines, shadows, and highlights to land on a style that looks like a deliberate design instead of rectangles and circles.

  • UX stability and drag feel:
    Early experiments with parallax and subtle motion made the entire lab feel like it was “shaking,” which hurt usability. Simplifying the scene to a stable camera, generous hitboxes, and predictable drag math was essential for making the interface feel easy and professional.

  • Integrating an external API safely under time pressure:
    Using Wolfram|Alpha inside the time constraints meant clearly limiting its role: it only provides short text when there is no override, and never controls the visuals directly. This keeps the system robust even if the external call fails or returns something unexpected.

Accomplishments that I am proud of

  • Turning a handful of classic school‑level reactions into a mission‑based game‑like experience that still respects the underlying chemistry.
  • Implementing a consistent 2D lab aesthetic with PIXI.js: stable camera, smooth animations, nicer glass and liquid rendering, and reaction‑type‑specific effects.
  • Designing a small, extensible chemistry engine where adding a new reaction is as simple as adding one object to reactionOverrides, which automatically powers both the beaker visuals and the Reaction Story micro‑view.
  • Successfully wiring in the Wolfram|Alpha Short Answer API as a backup explainer, while keeping the hand‑crafted educational reactions in full control.

What I learned

  • How to use a rendering library like PIXI.js for educational content, not just games, and how much good easing and layering matter for perceived quality.
  • How to structure a domain‑specific “rules engine” for chemistry at the right level: not trying to model everything, but choosing a small set of reactions that are didactically important and visually distinctive.
  • How to integrate an AI/knowledge API in a controlled way, letting it enhance explanations without making the system dependent on it.
  • How sensitive learners (and judges) are to small UX issues: easy dragging, a stable view, and clear feedback matter as much as clever backend logic.

What's next for Virtual Chemistry Lab

  • More reactions and reagents:
    Gradually expand chemicalDB and reactionOverrides to cover more classic reactions at the high school / intro‑uni level, with clearly defined visuals and explanations for each type.

  • Deeper missions and progression:
    Move from single‑step missions to small “quest lines” (for example, a sequence of reactions to reach a target solution), and add a sense of progression or “levels” so students feel they are advancing their chemistry skills.

  • Prediction and feedback for learning:
    Before mixing, ask learners to predict what will happen (e.g., gas, precipitate, no visible change) and then compare their prediction with the actual outcome, giving hints when they misunderstand a concept.

  • Teacher and analytics tools:
    Log which missions are frequently failed or skipped, so teachers can see where students struggle and adapt lessons accordingly. Provide a simple dashboard and maybe an export so it can be used in real classrooms.

  • Richer micro‑visualizations and data sources:
    Refine the Reaction Story visuals with more consistent iconography for ions and molecules, and explore using more structured chemistry data or more advanced Wolfram endpoints to support a broader range of reactions over time.

Built With

Share this project:

Updates