project 17: Particle Model for 3 States of Matter (Solid, Liquid and Gas) Designed for G1 by KJ

solid https://sg.iwant2study.org/ospsg/index.php/1231"}">https://sg.iwant2study.org/ospsg/index.php/1231

liquid https://sg.iwant2study.org/ospsg/index.php/1231"}">https://sg.iwant2study.org/ospsg/index.php/1231

gas https://sg.iwant2study.org/ospsg/index.php/1231"}">https://sg.iwant2study.org/ospsg/index.php/1231

Developing a Particle Model of Matter: A 3-State Simulation in WebEJS in Under 5 Days

Introduction

The particle model of matter is a fundamental concept in physics that describes the three states of matter—solid, liquid, and gas—based on the behavior and arrangement of particles. Using WebEJS, a versatile simulation tool, I embarked on a journey to create a dynamic simulation that demonstrates these three states of matter in just five days. In this blog post, I'll walk you through the development process, challenges faced, and the final results of this exciting project.

Day 1: Acquiring and Understanding the Source Code

Objective: Obtain the source code from a trusted resource and familiarize myself with it.

• Source Code Acquisition: The starting point for the project was acquiring the source code from Compadre Open Source Physics, which provides a robust framework for particle simulations.
• Understanding the Code: Spent time thoroughly analyzing the existing code structure, focusing on how particle interactions and states were implemented. This provided a solid foundation to build upon and modify the simulation to meet the project goals. The file mdpresets.js contains the combobox lists of options. Edit it to suit your purpose.
• var presetList = [ {

  name: "Solid",

  N: 40,

  size: 10,

  gravity: 4.5,

  dt: 0.01,

  steps: 1,

  fixedCount: 0,

  bondCount: 62,

  fixedTCount: 0,

  data: [

   

  1, 1, 0, 0,

  2, 1, 0, 0,

  3, 1, 0, 0,

  4, 1, 0, 0,

  5, 1, 0, 0,

  6, 1, 0, 0,

  7, 1, 0, 0,

  8, 1, 0, 0,

  9, 1, 0, 0,

  1.5, 2, 0, 0,

  2.5, 2, 0, 0,

  3.5, 2, 0, 0,

  4.5, 2, 0, 0,

  5.5, 2, 0, 0,

  6.5, 2, 0, 0,

  7.5, 2, 0, 0,

  8.5, 2, 0, 0,

  9.5, 2, 0, 0,

  1, 3, 0, 0,

  2, 3, 0, 0,

  3, 3, 0, 0,

  4, 3, 0, 0,

  5, 3, 0, 0,

  6, 3, 0, 0,

  7, 3, 0, 0,

  8, 3, 0, 0,

  9, 3, 0, 0,

  1.5, 4, 0, 0,

  2.5, 4, 0, 0,

  3.5, 4, 0, 0,

  4.5, 4, 0, 0,

  5.5, 4, 0, 0,

  6.5, 4, 0, 0,

  7.5, 4, 0, 0,

  8.5, 4, 0, 0,

  9.5, 4, 0, 0,

   

   

   

   

  ],bondList: [

  0, 1,

  1, 2,

  2, 3,

  3, 4,

  4, 5,

  5, 6,

  6, 7,

  7, 8,

  9, 10,

  10, 11,

  11, 12,

  12, 13,

  13, 14,

  14, 15,

  15, 16,

  16, 17,

  18, 19,

  19, 20,

  20, 21,

  21, 22,

  22, 23,

  23, 24,

  24, 25,

  25, 26,

  27, 28,

  28, 29,

  29, 30,

  30, 31,

  31, 32,

  32, 33,

  33, 34,

  34, 35,

  36, 37,

  37, 38,

  38, 39,

  0, 9,

  1, 10,

  2, 11,

  3, 12,

  4, 13,

  5, 14,

  6, 15,

  7, 16,

  8, 17,

  9, 18,

  10, 19,

  11, 20,

  12, 21,

  13, 22,

  14, 23,

  15, 24,

  16, 25,

  17, 26,

  18, 27,

  19, 28,

  20, 29,

  21, 30,

  22, 31,

  23, 32,

  24, 33,

  25, 34,

  26, 35,

  27, 36,

  28, 37,

  29, 38,

  30, 39,

   

  
  

   

   

   

   

   

   

  ],

  fixedList: [0,8,9, 10, 11, 12, 13, 14, 15, 16, 17, 18]

  } ,{

  name: "Liquid",

  N: 40,

  size: 10,

  gravity: 2.5,

  dt: 0.01,

  steps: 1,

  fixedCount: 0,

  bondCount: 0,

  fixedTCount: 0,

  data: [

   

  1, 1, 0, 0,

  2, 1, 0, 0,

  3, 1, 0, 0,

  4, 1, 0, 0,

  5, 1, 0, 0,

  6, 1, 0, 0,

  7, 1, 0, 0,

  8, 1, 0, 0,

  9, 1, 0, 0,

  1.5, 2, 0, 0,

  2.5, 2, 0, 0,

  3.5, 2, 0, 0,

  4.5, 2, 0, 0,

  5.5, 2, 0, 0,

  6.5, 2, 0, 0,

  7.5, 2, 0, 0,

  8.5, 2, 0, 0,

  9.5, 2, 0, 0,

  1, 3, 0, 0,

  2, 3, 0, 0,

  3, 3, 0, 0,

  4, 3, 0, 0,

  5, 3, 0, 0,

  6, 3, 0, 0,

  7, 3, 0, 0,

  8, 3, 0, 0,

  9, 3, 0, 0,

  1.5, 4, 0, 0,

  2.5, 4, 0, 0,

  3.5, 4, 0, 0,

  4.5, 4, 0, 0,

  5.5, 4, 0, 0,

  6.5, 4, 0, 0,

  7.5, 4, 0, 0,

  8.5, 4, 0, 0,

  9.5, 4, 0, 0,

   

   

   

   

  ],bondList: [

  0, 1,

  1, 2,

  2, 3,

  3, 4,

  4, 5,

  5, 6,

  6, 7,

  7, 8,

  9, 10,

  10, 11,

  11, 12,

  12, 13,

  13, 14,

  14, 15,

  15, 16,

  16, 17,

  18, 19,

  19, 20,

  20, 21,

  21, 22,

  22, 23,

  23, 24,

  24, 25,

  25, 26,

  27, 28,

  28, 29,

  29, 30,

  30, 31,

  31, 32,

  32, 33,

  33, 34,

  34, 35,

  36, 37,

  37, 38,

  38, 39,

  0, 9,

  1, 10,

  2, 11,

  3, 12,

  4, 13,

  5, 14,

  6, 15,

  7, 16,

  8, 17,

  9, 18,

  10, 19,

  11, 20,

  12, 21,

  13, 22,

  14, 23,

  15, 24,

  16, 25,

  17, 26,

  18, 27,

  19, 28,

  20, 29,

  21, 30,

  22, 31,

  23, 32,

  24, 33,

  25, 34,

  26, 35,

  27, 36,

  28, 37,

  29, 38,

  30, 39,

   

  
  

   

   

   

   

   

   

  ],

  fixedList: [0,8,9, 10, 11, 12, 13, 14, 15, 16, 17, 18]

  } , {

  name: "Gas",

  N: 40,

  size: 10,

  gravity: 0,

  dt: 0.01,

  steps: 1,

  fixedCount: 0,

  bondCount: 0,

  fixedTCount: 0,

  data: [

  1, 1, 0.0513, 0.1674,

  2, 1, 0.3152, 0.7458,

  3, 1, 0.8530, -0.7395,

  4, 1, 0.5015, 0.6857,

  5, 1, -0.7326, 0.9319,

  6, 1, -0.2543, -0.4225,

  7, 1, 0.2198, 0.6120,

  8, 1, -0.4147, -0.4722,

  9, 1, -0.5625, 0.2362,

  1.5, 2, -0.1092, -0.5189,

  2.5, 2, -0.4429, 0.9631,

  3.5, 2, -0.0614, -0.0469,

  4.5, 2, 0.5369, 0.0958,

  5.5, 2, 0.6285, 0.1172,

  6.5, 2, 0.1698, -0.2235,

  7.5, 2, 0.2935, -0.9148,

  8.5, 2, 0.2365, 0.8045,

  9.5, 2, -0.0311, -0.2083,

  1, 3, -0.7169, 0.1587,

  2, 3, -0.5842, 0.3891,

  3, 3, -0.0765, 0.6132,

  4, 3, 0.0976, 0.4059,

  5, 3, -0.8692, 0.4716,

  6, 3, 0.6735, -0.3026,

  7, 3, 0.3258, 0.1063,

  8, 3, -0.3074, -0.0942,

  9, 3, 0.0492, 0.2486,

  1.5, 4, 0.1783, 0.0725,

  2.5, 4, 0.4085, -0.5193,

  3.5, 4, 0.2764, 0.9461,

  4.5, 4, 0.6749, 0.2145,

  5.5, 4, -0.2748, 0.7896,

  6.5, 4, 0.8132, -0.1375,

  7.5, 4, -0.6752, -0.6859,

  8.5, 4, -0.2369, 0.4279,

  9.5, 4, 0.5867, -0.0746,

  ]

  
  

  ,bondList: [

  0, 1,

  1, 2,

  2, 3,

  3, 4,

  4, 5,

  5, 6,

  6, 7,

  7, 8,

  9, 10,

  10, 11,

  11, 12,

  12, 13,

  13, 14,

  14, 15,

  15, 16,

  16, 17,

  18, 19,

  19, 20,

  20, 21,

  21, 22,

  22, 23,

  23, 24,

  24, 25,

  25, 26,

  27, 28,

  28, 29,

  29, 30,

  30, 31,

  31, 32,

  32, 33,

  33, 34,

  34, 35,

  36, 37,

  37, 38,

  38, 39,

  0, 9,

  1, 10,

  2, 11,

  3, 12,

  4, 13,

  5, 14,

  6, 15,

  7, 16,

  8, 17,

  9, 18,

  10, 19,

  11, 20,

  12, 21,

  13, 22,

  14, 23,

  15, 24,

  16, 25,

  17, 26,

  18, 27,

  19, 28,

  20, 29,

  21, 30,

  22, 31,

  23, 32,

  24, 33,

  25, 34,

  26, 35,

  27, 36,

  28, 37,

  29, 38,

  30, 39,

   

  
  

   

   

   

   

   

   

  ],

  fixedList: [0,8,9, 10, 11, 12, 13, 14, 15, 16, 17, 18]

  } ]

Day 2: Designing the Particle System

Objective: Remove all the super features and create a basic particle system to represent atoms/molecules.

Day 3: Implementing the States of Matter

Objective: Simulate the three states of matter based on particle behavior.

• Solid State:

  • Characteristics: Particles are closely packed and vibrate in fixed positions. see data and bondlist to simulate the molecular bonds
  • Implementation: Created vary the force coefficient where particles are constrained to vibrate around fixed points and reduce the speed of the solid molecules every evolution and some gravity to simulate Earth's gravity.

• Liquid State:

  • Characteristics: Particles are close but can move past each other, allowing for flow.
  • Implementation: Enabled particles to move freely within a confined space, simulating liquid behavior and a small gravity.

• Gas State:

  • Characteristics: Particles are far apart and move rapidly in all directions.
  • Implementation: Allowed particles to move randomly and occupy the entire container, mimicking gas behavior. see data : [ x,y,vx,vy] so need to edit the x and y to be positions and velocity as generated by AI using (Math.random() - 0.5)*2

Day 4: Adding User Controls and Features

Objective: Enhance interactivity and visualization.

• User Controls: Added combobox to switch between states
• Visual Enhancements: Implemented single color coding for different states for simple and better visualization.

Day 5: Testing and Optimization

Objective: Ensure smooth performance and fix any bugs.

• Testing: Ran the simulation under various conditions to test the transitions between states and overall stability.
• Optimization: Fine-tuned algorithms for better performance and reduced computational overhead.

Final Results

The simulation successfully demonstrates the particle model of matter, showcasing the distinct characteristics of solids, liquids, and gases. Users can interact with the model, observe particle behavior, and gain a deeper understanding of the states of matter.

Challenges and Learnings

• Challenge: Balancing realism and computational efficiency in particle interactions.
• Learning: The importance of building on existing body of knowledge/code and iterating quickly to meet tight deadlines, far superior to traditional out sourcing to be developed by external parties.

Conclusion

Developing a particle model of matter simulation in WebEJS was a rewarding experience, combining programming, physics, and creativity. This project not only illustrates the beauty of the particle model but also highlights the potential of WebEJS as a tool for interactive learning and visualization.

Try It Yourself!

I encourage you to try building your own simulation using WebEJS. It's a great way to explore physics concepts and develop your Digital Literacy coding skills.