用科技视角看病毒：基于 HTML5 Canvas 的病毒模拟视觉试验台
在病毒面前，人类真的很脆弱，此次新型冠状病毒虽然致死率低，但传染性极强，如果传播过程中发生了可怕的变异，导致致死率提升，那么造成的后果难以估量。如果大家早期能够认识到病毒的危害，提高自我防范意识，那么就能有效的控制疫情的蔓延。此次春节在家，发现大多数的长辈都对此次疫情不以为然，依旧到处串门喝茶聊天，进出人群密集的地方时，不戴口罩，多番劝阻无果，很是无奈，依旧有部分人不了解病毒的危害。此篇**就以 HIV 病毒为例，采用 2/3D 结合的可视化效果，直观展示病毒的微观世界。补充说明：人类免疫缺陷病毒 ( Human Immunodeficiency Virus;abbe:HIV )，即艾滋病 ( AIDS，获得性免疫缺陷综合症) 病毒，属逆转录病毒的一种。效果预览：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 +
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 +
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] * zoom, arr * 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(, 'right');
i.a('angle', t * Math.PI * 120);
})
},
finishFunc: () => {
if (this._continuous) {
this.move();
}
}, // 动画结束后调用的函数。
}
this.anim = ht.Default.startAnim(params);
结语这个春节，一场突如其来的疫情防控阻击战，在中华大地骤然打响，这是一场没有硝烟的战争，无论是医护人员，还是基础工作者，他们在疫情爆发的那一刻，就拿起了“武器”奔赴“战场一线”。病毒并不会因为他们是医护人员而“网开一面”，岁月静好，是因为有人在为我们负重前行，感谢那些在疫情中为我们奔赴前行的人，在疫情面前，我们没有一个人能置身事外。“宅”在家，这是对自己负责，对他人负责，更是对社会、对国家最大的支持。中华儿女从不畏惧任何困难，不会退缩，我们坚信这场战争我们肯定能赢，也必须要赢。上期我也分享了关于科技早班车：HTML5 WebGL 实现 3D 地图，助力疫情实时数据可视化的内容，助大家更为直观了解疫情蔓延的分布趋势。有兴趣的可以了解一下~
页:
[1]