基于 HTML5 Canvas 的病毒模拟视觉试验台
前言
病毒的爆发并不单单只有中国这人口大国,纵观整个地球,2020 年,还有很多国家也在“水深火热”中努力进行着“自救”。美国,近几个月来爆发了非常致命的流感--乙型流感病毒,据相关数据统计,到目前为止全美范围已经有超 1300 万人感染了该病毒, 12 万人住院治疗,死亡人数可能高达 6600 多人;波兰,2019 年 12 月 31 日至 2020 年 1 月 4 日,该国卢布林省和大波兰省发生 8 起 H5N8 亚型高致病性禽流感,此次疫情可能导致多达 4 万只禽类被宰杀,方圆3公里多达 35 万只家禽受到威胁;中国,农业农村新闻办公室 2 月 1 日发布,湖南省邵阳市双清区发生一起家禽 H5N1 亚型高致病性禽流感疫情,养殖户存栏肉鸡 7850 只,发病死亡 4500 只,疫情发生后,当地按照有关预案和防治技术规范要求切实做好疫情处置工作,已扑杀家禽 17828 只,全部病死和扑杀家禽均已无害化处理......
在病毒面前,人类真的很脆弱,此次新型冠状病毒虽然致死率低,但传染性极强,如果传播过程中发生了可怕的变异,导致致死率提升,那么造成的后果难以估量。如果大家早期能够认识到病毒的危害,提高自我防范意识,那么就能有效的控制疫情的蔓延。此次春节在家,发现大多数的长辈都对此次疫情不以为然,依旧到处串门喝茶聊天,进出人群密集的地方时,不戴口罩,多番劝阻无果,很是无奈,依旧有部分人不了解病毒的危害。
此篇文章就以 HIV 病毒为例,采用 2/3D 结合的可视化效果,直观展示病毒的微观世界。补充说明:人类免疫缺陷病毒 ( Human Immunodeficiency Virus;abbe:HIV ),即艾滋病 ( AIDS,获得性免疫缺陷综合症) 病毒,属逆转录病毒的一种。
效果预览:
动态案例预览地址:https://www.hightopo.com/demos/index.html
HIV 活性实验台
该模块主要模拟在不同环境不同试剂的情况下,病毒活性的变化。
功能点1:左侧为实验控制台,可拖拽其值进度条来改变数值,通过一定的计算公式进而去动态修改 3D 场景中病毒的活性面板的相关显示值。
功能实现:监听 2D 图纸的交互器,在图元拖拽中进行去进行相关参数值的修改( addInteractorListener,简写为 mi ),接着通过模型中 Data 元素属性变化监听器( addDataPropertyChangeListener,简写为 md )去监听每一次参数的变化,然后通过一定的计算公式去计算活性面板的最终显示值,最后以数据驱动方式去修改活性面板的数据。
主要代码:
// 获取病毒图元this._virusNode = virus2D.dm().getDataByTag('virusNode');// 对图元进行缩放function setScale(value) { this._virusNode.setScale(value, value);}this.g2d.dm().mp(function (e) { if (e.property === "a:virusScale") { if (this.virus2D) { setScale(e.newValue); this._virusNode.setScale(value, value); } }}, this);
功能点2:放大镜查看。
功能实现:根据放大镜左侧倍数控制器的值去动态设置放大镜中图元的缩放值。
主要代码:
let params = { duration: 10000, // 动画周期毫秒数,默认采用`ht.Default.animDuration` easing: (t) => { return t }, // 动画缓动函数,默认采用`ht.Default.animEasing` action: (v, t) => { this.virus.forEach((i, index) => { let count = 0; if (i.a('count')) { count = i.a('count'); } else { count = 0; } count += 0.5; let scale = this.virusScales[index] + 0.1 * Math.cos( (((count % 36) * Math.PI) / 180) * 10 + ((360 / this.virus.length) * index * Math.PI) / 180 ); i.eachChild(data => { data.setScale3d(scale, scale, scale); }); i.a('count', count) }) }, finishFunc: () => { if (this._continuous) { this.breating(); } }, // 动画结束后调用的函数。}
功能点3:病毒成分剖面示意图及其 RNA 链。 2D 及 3D 的效果展示,使微观病毒更加具象化,帮助人们更加清晰的认识病毒。
功能点4: 3D 场景中病毒的呼吸效果。
功能实现:使用 HT 的动画功能,不断的去设置病毒图元自身的缩放值。
主要代码:
let params = { duration: 10000, // 动画周期毫秒数,默认采用`ht.Default.animDuration` easing: (t) => { return t }, // 动画缓动函数,默认采用`ht.Default.animEasing` action: (v, t) => { this.virus.forEach((i, index) => { let count = 0; if (i.a('count')) { count = i.a('count'); } else { count = 0; } count += 0.5; let scale = this.virusScales[index] + 0.1 * Math.cos( (((count % 36) * Math.PI) / 180) * 10 + ((360 / this.virus.length) * index * Math.PI) / 180 ); i.eachChild(data => { data.setScale3d(scale, scale, scale); }); i.a('count', count) }) }, finishFunc: () => { if (this._continuous) { this.breating(); } }, // 动画结束后调用的函数。}
免疫系统侵入演示
动画步骤描述:
① 病毒侵入,免疫激活 开始:场景中只有三个白细胞(两个小的白细胞离大号的较远); 过程:病毒渐显(粉色颗粒,上面无附着抗体标记); 结束:场景中只存在三个白细胞和病毒 ② 白细胞释放趋化因子和增值化学物质 开始:画面中有三个白细胞和六个病毒; 过程:趋化因子从大号白细胞内部释放出来,渐显,而后另外两个白细胞向大号靠近到一定距离,然后趋化因子渐渐消失 结束:场景中存在三个白细胞(两个小的白细胞靠近大号的)、六个病毒 ③ 白细胞产生抗体标记靶向细菌/病毒 开始:场景中有三个白细胞(两个小的白细胞靠近大号的)和六个病毒; 过程:抗体标记从大号白细胞里渐显飞出,最后附着在病毒上,此时出现提示面板(内容:病毒/细菌被白细胞标记抗体),最后面板渐隐 结束:场景中存在三个白细胞(两个小的白细胞靠近大号的)、六个病毒和抗体标记(附着在病毒上) ④ 白细胞吞噬靶向细胞/病毒 开始:场景中存在三个白细胞(两个小的白细胞靠近大号的)、六个病毒和抗体标记(附着在病毒上) 过程:大号白细胞出现提示面板(内容:白细胞被吸引到标记抗体处,面板渐显渐隐后,大号白细胞移动至四个病毒区域,二号白细胞移动至两个病毒区域,三号朝病毒区域中心移动轻微移动一小段,稍微停顿后,白细胞恢复初始位置,病毒、抗体标记消失 结束:场景中只存在三个白细胞 ⑤ HIV 病毒侵入进入白细胞 开始:场景中存在三个白细胞 过程:出现几个病毒,然后HIV病毒渐显,再然后进入到一号白细胞内部 结束:场景中存在三个白细胞,一个 HIV 病毒,两三个粉色病毒 ⑥ HIV 病毒在白细胞内复制,白细胞死亡 开始:场景中存在三个白细胞,一个 HIV 病毒(在一号白细胞内部),两三个粉色病毒 过程:HIV 病毒开始复制(体现在数量增多),然后三个白细胞同时缩小到原来的一半 结束:场景中存在三个白细胞(体积缩小),三个 HIV 病毒 ⑦ HIV 病毒跑出,细菌增生免疫系统破坏成功 开始:场景中存在三个白细胞(体积缩小),三个 HIV 病毒 过程:HIV病毒跑出一号白细胞,同时白细胞渐隐直至消失,而后粉色病毒增多 结束:场景中只存在三个 HIV 病毒,多个粉色病毒
动画实现:ht.Default.startAnim 的动画函数,示例代码如下:
ht.Default.startAnim({ frames: 12, // 动画帧数 interval: 10, // 动画帧间隔毫秒数 easing: function(t){ return t * t; }, // 动画缓动函数,默认采用`ht.Default.animEasing` finishFunc: function(){ console.log('Done!') }, // 动画结束后调用的函数。 action: function(v, t){ // action函数必须提供,实现动画过程中的属性变化。 ... }});
除了以上动画外,该模块还新增了两个控制项:控制动画播放速度(修改动画的 duration 参数值)及 3D 场景的视角(修改 eye)。
实现代码:
function getPositionByZoom(arr, zoom) { return [arr[0] * zoom, arr[1] * zoom, arr[2] * zoom];}this.g2d.dm().mp(function (e) { if (e.property === 'a:stepIndex') { // 做演示动画 this.stepIndex = e.newValue; this['anim' + (e.newValue + 1)](); } else if (e.property === 'a:screenZoom') { let value = e.newValue; if (this._eye) { let newEye = getPositionByZoom(this._eye, value); this.g3d.setEye(newEye); } } else if (e.property === 'a:playSpeed') { this.speed = 1 / e.newValue; }})
药物抑制原理演
该模块主要演示生物酶抑制剂和化学消毒/去污药剂对病毒活性的影响。通过改变试剂的用量来模拟计算出病毒的活性率、复制速度、感染性、突变几率。动画演示中涉及的 3D 图元的位移方法。通过绘制一条管道轨迹线来实现。
// 偏移动画let g3d = this.g3d;let params = { frames: 100, // 动画帧数 interval: 30, // 动画帧间隔毫秒数 easing: (t) => { return t }, // 动画缓动函数,默认采用`ht.Default.animEasing` action: (v, t) => { let pipe; this.moveNodes.forEach((i, index) => { if (index < 2) { pipe = this.pipe1; } else { pipe = this.pipe2; } let length = g3d.getLineLength(pipe), offset = g3d.getLineOffset( pipe, length * t ), point = offset.point, px = point.x, py = point.y, pz = point.z, tangent = offset.tangent, tx = tangent.x, ty = tangent.y, tz = tangent.z; i.p3(px, py, pz); i.lookAt([px + tx, py + ty, pz + tz], 'right'); i.a('angle', t * Math.PI * 120); }) }, finishFunc: () => { if (this._continuous) { this.move(); } }, // 动画结束后调用的函数。}this.anim = ht.Default.startAnim(params);
结语
这个春节,一场突如其来的疫情防控阻击战,在中华大地骤然打响,这是一场没有硝烟的战争,无论是医护人员,还是基础工作者,他们在疫情爆发的那一刻,就拿起了“武器”奔赴“战场一线”。病毒并不会因为他们是医护人员而“网开一面”,岁月静好,是因为有人在为我们负重前行,感谢那些在疫情中为我们奔赴前行的人,在疫情面前,我们没有一个人能置身事外。“宅”在家,这是对自己负责,对他人负责,更是对社会、对国家最大的支持。中华儿女从不畏惧任何困难,不会退缩,我们坚信这场战争我们肯定能赢,也必须要赢。
上期我也分享了关于科技早班车:HTML5 WebGL 实现 3D 地图,助力疫情实时数据可视化的内容,助大家更为直观了解疫情蔓延的分布趋势。有兴趣的可以了解一下~
- 三种决策树算法(ID3, CART, C4.5)及Python实现
- Logistic 回归算法及Python实现
- MySQL主从不一致的修复过程(r10笔记第96天)
- ML中相似性度量和距离的计算&Python实现
- Oracle中的ROWID实现(r10笔记第95天)
- 100个Numpy练习【3】
- 100个Numpy练习【4】
- Golang语言中Path包用法
- 100个Numpy练习【5】
- Golang中container/list包中的坑
- 关于Golang语言数组索引的有趣现象
- 使用SQL来分析数据库参数(二)(r10笔记第82天)
- Golang不定参数
- [go语言]利用缓冲信道来实现网游帐号验证消息的分发和等待
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 基于 Kotlin + Netty 实现一个简单的 TCP 自定义协议
- dnslog带出——sqli-labs第8关
- Boolean源码解剖学
- SpringBoot+Mybatis整合出现org.apache.ibatis.binding.BindingException: Invalid bound statement (not found
- xss-labs第1~13关
- 在虚拟机上搭建xss平台
- 一个速度快,内存占用小的一致性哈希算法
- 一文搞定web微信第三方登录
- python学习笔记(1)
- Swift Mutating
- 31.opengl高级光照-泛光bloom
- Swift 泛型
- Swift高阶函数map,filter,reduce
- 一文解决大批量基因相关性分析
- Swift String 与 NSString