基于HTML5的气体分子碰撞仿真

项目Pram发表留言
文章阅读量： 507
内容目录

项目材料

目录结构

本仿真模拟程序的目录结构如下图所示

    ├── README.md
    ├── index.html
    ├── static
    │   ├── css
    │   │   ├── bootstrap.css
    │   │   ├── bootstrap.css.map
    │   │   ├── font-awesome.css
    │   │   ├── font-awesome.min.css
    │   │   ├── material-design-iconic-font.css
    │   │   ├── material-design-iconic-font.min.css
    │   │   └── style.css
    │   ├── fonts
    │   │   ├── FontAwesome.otf
    │   │   ├── Material-Design-Iconic-Font.*
    │   │   ├── fontawesome-webfont.*
    │   └── js
    │       ├── balls.js
    │       ├── bootstrap.js
    │       ├── echarts.js
    │       ├── jquery-3.6.0.js
    │       └── utils.js
    └── tutorial.pdf
  • index.html
    整个仿真模拟的入口文件，用户交互界面
  • README.md
    仿真程序代码的说明文档，即本文件
  • static/
    静态资源目录

    • css/
      样式表目录，存放所有的css样式

      • style.css
        所有自定义的css样式表
    • fonts/
      字体目录，存放所有的网络字体
    • js/
      脚本目录，存放所有的js控制脚本

      • balls.js
        整个程序的控制脚本，最核心的代码逻辑
  • turorial.pdf
    用户使用指导文件

外部依赖

  • Bootstrap

    • v3.4.1
    • 简洁、直观、强悍的前端开发框架
    • 包含css样式与js插件
    • 官方中文文档

  • jQuery

    • v3.6.0
    • A fast, small, and feature-rich JavaScript library
    • 包含js脚本
    • 官方API文档

  • Apache ECharts

  • Font Awesome

    • v4.7.9
    • An Internet's icon library and toolkit
    • 包含css样式与特殊字体
    • 官方文档

  • Material Design Iconic Font

    • v2.2.0
    • A full suite of material design icons
    • 包含css脚本与特殊字体
    • 官方文档

  • MathJax

    • v4.7.9
    • A JavaScript display engine for mathematics that works in all browsers
    • 包含两个通过cdn引入的js脚本，本地文件无法使用
    • 官方文档

代码说明

HTML

整个index.html主要分为三个部分，即#header、#body、#footer三个<div>标签，分别容纳页面的页头、主体与页脚。

页头

页头即为页面导航栏部分，由导航头与左右两个导航条组成，导航头显示标题，左导航条即为程序控制栏（工具栏）页面，右导航条为帮助链接。

控制栏由按钮组组成，其中按钮组的类型包括普通按钮与下拉菜单启动按钮两种，下拉菜单启动按钮后面需要跟上下拉菜单的具体内容。普通按钮用于切换程序状态，在本程序中有开始程序、暂停程序、重置程序等。下拉菜单启动按钮用于输入初始化参数，其具体内容包括切换初始化模式的按钮组，以及其他输入参数的输入的表单组。

下拉菜单启动按钮等部分的具体实现请参照Bootstrap官网文档

主体

主体即为程序的呈现部分，包括左侧边栏（简单的教程引导）、主显示框、右侧边栏（结果展示）三部分。三部分均使用panel呈现，左右两部分使用Bootstrap中的collapse插件实现可折叠。

主显示框中#show部分容纳了本程序的三个<canvas>画布，分别为主程序#canvas与两个ECharts的画布。

右边栏结果展示部分本质为一个列表组，每一个列表项包含一个输入框组。

页脚

页脚也是一个导航栏，可以添加一些程序的额外的说明信息。建议可以把它改进为程序的状态栏。

JavaScript

整个balls.js主要分为4个部分，包括全局变量定义区、功能函数与事件函数定义区、主程序函数定义区、绘图函数定义区与程序执行区。

全局变量定义区

根据 ECMAScript 6 标准，我们不再推荐使用var定义变量，因此，在本文件中，我们一律使用const或let
定义变量。关于这三者的具体区别，可以参考MDN Web Docs。

  • 常量部分

    • drawing
      主程序画布#canvas的HTMLElement
    • width
      主程序画布宽度
    • height
      主程序画布高度
    • u
      物理常数，原子质量单位
    • m
      模拟中的分子质量
    • k
      物理常数，玻尔兹曼常量
    • ao
      物理常数，玻尔半径
    • rad_rate
      半径换算比例，像素与一个波尔半径的换算关系，例如rad_rate = 5则表示5个像素代表一个玻尔半径的长度
    • vel_rate
      速率换算比例，像素每帧与速度的换算关系，例如vel_rate = 400则表示程序中1 px/fm = 400 m/s
    • balls
      储存所有粒子的数组
    • context
      主程序画布的CanvasRenderingContext2D
    • 其余常量分别表示对应id的HTMLElement

  • 变量部分

    • num
      分子数
    • radius
      分子半径
    • velocity
      速度模式下的平均速率
    • temp
      温度模式下的温度
    • param
      \frac{2kT}{m}
    • count
      程序当前运行帧
    • mode
      当前初始化模式，true表示速率模式，false表示温度模式，关于这两种模式，可以参见tutorial.pdf
    • state
      当前程序状态，false为暂停状态，true为运行状态
    • maxVelocity
      当前最大的粒子速度
    • free_path
      所有粒子总自由程
    • collision_num
      总碰撞次数

功能函数与事件函数定义区

  • window.onresize
    窗口自适应变化
  • changeMode
    切换初始化模式，在index.html中调用，判断切换到哪种模式并切换
  • initMaxwell
    创建num个满足温度为temp时的麦克斯韦速率分布的速率序列data以及速率综合sum
  • *.onchange
    各个输入框数值变化后改变相应的参数值的函数

主程序函数定义区

主类

  • Ball
    • 粒子类
    • 成员变量
      • x
        粒子的x坐标
      • y
        粒子的y坐标
      • vx
        粒子沿x方向的速度
      • vy
        粒子沿y方向的速度
      • r
        粒子半径
      • free_path
        粒子的总自由程，本质上是运动开始之后的总路程
    • 成员方法
      • velocity()
        • return
          粒子当前的速率
        • 返回当前的粒子速率
      • move()
        执行一帧中的移动操作
      • distance(that)
        • that
          另一个Ball实例，即另一个粒子
        • return
          两个粒子之间的距离
      • toward(that)
        • that
          另一个Ball实例，即另一个粒子
        • return
          两个粒子的 \Delta \vec{v} \cdot \Delta \vec{x}
      • collision(that)
        • that
          另一个Ball实例，即另一个粒子
        • 执行两个粒子的碰撞操作
      • draw()
        • 在画布上绘制当前粒子

各类函数

  • init()
    • 初始化程序
  • executeBalls()
    • 执行粒子的运动、碰撞与绘制操作
  • collectVelocities()
    • return
      • 所有粒子的速率：Array(num)
    • 收集当前所有粒子的速率并返回
  • getSum()
    • return
      返回所有粒子速率的总和
  • getSquareSum()
    • return
      返回所有粒子速率的平方和
  • showInfo()
    • 在右侧边栏展示当前的数据结果
  • run()
    • 重复执行的主运行函数

绘图函数定义区

  • 从renderItem(params, api)至drawTable_velocity()的所有函数为绘制ECharts图表的函数，此处不作详细解释。

程序执行区

Bootstrap插件所需的语句，请勿删除

$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})

函数启动逻辑

if (drawing.getContext) {
    init_table();
    run();
} else {
    const support = document.getElementById("support-canvas");
    support.innerHTML = "The Explorer does not support canvas. ";
}

留下回复

著作权 © 2025 泊舟坞 PramSin 制作