前言
2020 年 1 月 12 日, 世界卫生组织以武汉病毒肺炎病例命名了一种病毒, 2019 新型冠状病毒( 2019-nCoV ) . 随着春运的到来, 该病毒迅速的蔓延开来, 大家都唯恐避之不及. 病毒的爆发并不单单只有中国这人口大国, 纵观整个地球, 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, 获得性免疫缺陷综合征) 病毒, 属逆转录病毒的一种.
demo: http://www.hightopo.com/demo/hiv-test-bed/
效果图:
1.HIV 活性实验台
该模块主要模拟在不同环境不同试剂的情况下, 病毒活性的变化.
功能点 1: 左侧为实验控制台, 可拖拽其值进度条来改变数值, 通过一定的计算公式进而去动态修改 3D 场景中病毒的活性面板的相关显示值.
功能实现: 监听 2D 图纸的交互器, 在图元拖拽中进行去进行相关参数值的修改 ( addInteractorListener, 简写为 mi ), 接着通过模型中 Data 元素属性变化监听器( addDataPropertyChangeListener, 简写为 md ) 去监听每一次参数的变化, 然后通过一定的计算公式去计算活性面板的最终显示值, 最后以数据驱动方式去修改活性面板的数据.
主要代码:
- this.operator = { temperature: 60, humidity: 60, time: 25, sorbitol: 35, FBS: 50 }
- // 温度, 湿度, 时间, 山梨醇, 胎牛血清
- this.g2d.dm().md(handleInterActivePanel, this);
- function handleInterActivePanel(e) {
- // 温度, 湿度, 时间, 山梨醇, 胎牛血清
- if (this.operator.hasOwnProperty(e.data.getTag()) && e.property === 'a:value') {
- this.operator[e.data.getTag()] = e.newValue;
- const operator = this.operator;
- let node = this.g3d.dm().getDataByTag('activePanel');
- let dataSource = node.a('dataSource');
- let calc = [
- {
- value: parseFloat((100
- * (1 - operator.temperature / 100)
- * (1 - operator.time / 60)
- * (1 - operator.sorbitol / 100)
- * (1 - operator.FBS / 100)
- * (operator.humidity / 100)
- ).toFixed(2))
- },
- {
- value: parseFloat((90
- * (1 - operator.temperature / 100)
- * (1 - operator.time / 60)
- * (1 - operator.sorbitol / 100)
- * (1 - operator.FBS / 100)
- * (operator.humidity / 100)
- ).toFixed(2))
- },
- {
- value: parseFloat((60
- * (1 - operator.temperature / 100)
- * (1 - operator.time / 60)
- * (1 - operator.sorbitol / 100)
- * (1 - operator.FBS / 100)
- * (operator.humidity / 100)
- ).toFixed(2))
- },
- {
- value: parseFloat((10
- * (operator.temperature / 100)
- * (operator.time / 60)
- * (operator.sorbitol / 100)
- * (operator.FBS / 100)
- * (1 - operator.humidity / 100) + 0.01
- ).toFixed(2))
- },
- ]
- dataSource = dataSource.map((i, index) => {
- return {
- rising: i.value> calc[index].value,
- value: calc[index].value,
- }
- })
- node.a('dataSource', []);
- node.a('dataSource', dataSource);
- }
- }
功能点 2: 放大镜查看.
功能实现: 根据放大镜左侧倍数控制器的值去动态设置放大镜中图元的缩放值.
主要代码:
- // 获取病毒图元
- 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);
功能点 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();
- }
- }, // 动画结束后调用的函数.
- }
- this.anim = ht.Default.startAnim(params);
2. 免疫系统侵入演示
动画步骤描述:
1 病毒侵入, 免疫激活
开始: 场景中只有三个白细胞(两个小的白细胞离大号的较远);
过程: 病毒渐显(粉色颗粒, 上面无附着抗体标记);
结束: 场景中只存在三个白细胞和病毒
2 白细胞释放趋化因子和增值化学物质
开始: 场景中有三个白细胞和六个病毒;
过程: 趋化因子从大号白细胞内部释放出来, 渐显, 而后另外两个白细胞向大号靠近到一定距离, 然后趋化因子渐隐消失
结束: 场景中存在三个白细胞(两个小的白细胞靠近大号的), 六个病毒
3 白细胞产生抗体标记靶向细菌 / 病毒
开始: 场景中有三个白细胞 (两个小的白细胞靠近大号的) 和六个病毒;
过程: 抗体标记从大号白细胞里渐显飞出, 最后附着在病毒上, 此时出现提示面板(内容: 病毒 / 细菌被白细胞标记抗体), 最后面板渐隐
结束: 场景中存在三个白细胞(两个小的白细胞靠近大号的), 六个病毒和抗体标记(附着在病毒上)
4 白细胞吞噬靶向细胞 / 病毒
开始: 场景中存在三个白细胞(两个小的白细胞靠近大号的), 六个病毒和抗体标记(附着在病毒上)
过程: 大号白细胞出现提示面板(内容: 白细胞被吸引到标记抗体处, 面板渐显渐隐后, 大号白细胞移动至四个病毒区域, 二号白细胞移动至两个病毒区域, 三号朝病毒区域中心移动轻微移动一小段, 稍微停顿后, 白细胞恢复初始位置, 病毒, 抗体标记消失
结束: 场景中只存在三个白细胞
5 HIV 病毒侵入进入白细胞
开始: 场景中存在三个白细胞
过程: 出现几个病毒, 然后 HIV 病毒渐显, 再然后进入到一号白细胞内部
结束: 场景中存在三个白细胞, 一个 HIV 病毒, 两三个粉色病毒
6HIV 病毒在白细胞内复制, 白细胞死亡
开始: 场景中存在三个白细胞, 一个 HIV 病毒(在一号白细胞内部), 两三个粉色病毒
过程: HIV 病毒开始复制(体现在数量增多), 然后三个白细胞同时缩小到原来的一半
结束: 场景中存在三个白细胞(体积缩小), 三个 HIV 病毒
7HIV 病毒跑出, 细菌增生免疫系统破坏成功
开始: 场景中存在三个白细胞(体积缩小), 三个 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;
- }
- })
3. 药物抑制原理演示
该模块主要演示生物酶抑制剂和化学消毒 / 去污药剂对病毒活性的影响. 通过改变试剂的用量来模拟计算出病毒的活性率, 复制速度, 感染性, 突变几率.
动画演示中涉及的 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);
现在新型冠状病毒愈演愈烈, 感染的人越来越多, 但是很多人尤其是中老年人还没有意识到严重性, 依然坚持过完年要走亲访友的观念, 这走走那串串. 为了避免感染新型冠状病毒, 如何劝说家人不走亲访友呢? 今天就来跟大家分享下.
1. 告诉家人目前新型冠状病毒疫情的最新情况, 告诉他们每天有多少病例增加, 让他们意识到疫情的传播速度很快, 很容易被感染的, 如果出去走亲访友, 被传染的概率会增加.
2. 单纯的数字可能他们还不以为然, 认为全国十几亿人口, 自己 "中奖几率" 很低, 没啥概念, 这时候我们可以给他们看看更为直观的疫情地图.( http://www.hightopo.com/demo/coronavirus/ )这里面有每天最新的可视化数据, 帮助大家更为直观了解当前疫情蔓延的分布趋势.
3. 新闻报道! 一般中老年人更相信电视上的新闻, 让他们了解病毒的严重性, 从而打消出门走亲访友的念头.
4. 药店的相关预防药物及医用口罩等已经卖空了, 让他们知道周围的人都已经在进行自身防护了, 建立家人自身防范的意识, 从而自觉放弃走亲访友.
5. 告知各地封村封路的消息, 让他们知道疫情的严重性.
6. 给他们看些硬核标语.
口罩还是呼吸机, 您老看着二选一;
发烧不说的人, 都是潜伏在人民群众中的阶级敌人;
老实在家防感染, 丈人来了也得撵;
今年过年不串门, 来串门的是敌人, 敌人来了不开门;
串门就是互相残杀, 聚会就是自寻短见;
现在请吃饭的都是鸿门宴
......
这个春节, 一场突如其来的疫情防控阻击战, 在中华大地骤然打响, 这是一场没有硝烟的战争, 无论是医护人员, 还是基础工作者, 他们在疫情爆发的那一刻, 就拿起了 "武器" 奔赴 "战场一线". 病毒并不会因为他们是医护人员而 "网开一面", 岁月静好, 是因为有人在为我们负重前行, 感谢那些在疫情中为我们奔赴前行的人, 在疫情面前, 我们没有一个人能置身事外."宅" 在家, 这是对自己负责, 对他人负责, 更是对社会, 对国家最大的支持. 中华儿女从不畏惧任何困难, 不会退缩, 我们坚信这场战争我们肯定能赢, 也必须要赢.
来源: http://www.bubuko.com/infodetail-3424386.html