Educational Animation Interactive: How to build a Molecule Movement Simulator In HTML5

CASE STUDY

How to make an HTML5 Molecule Simulator?

The animation you are looking at is NOT a finished product. But a vital step, our team’s creation, an in-house research tool. An important step in our research to determine an effective way to simulate the movement of molecules using only the limited tools available in HTML5. The goal was to make the invisible visible – to make learning easier for students, to illustrate the states of matter. What we needed to show:

• What separates the way molecules of liquid, solid, and gas move?
• Do they move around each other or get stuck in position?
• How close or far apart are the molecules of a solid, liquid, or gas?
• How fast do molecules move in different states?

We used this tool we used to fine-tune the simulations to get the main points across visually. With the results, we created many chemistry teaching tools that included molecular simulations combined with compelling animated educational tools that work on all browsers, all devices, and all platforms. But none of this would be possible without teamwork: Thanks to the ACS team, and Cybergoal’s interactive creative team, especially  Jayed, Li Ming, Qian, and John, combining specialists in education, creative services, coding, and chemistry!

Cybergoal creates educational interactive for institutions and organizations, helping educate children from preschool through graduate level. Our presentations keep up with the changing technologies of the Internet. These samples utilize vector animation and interactive tools that are HTML5-based to conform to all browsers and all devices in use today.