计算机模拟虫洞,Canvas 3D虫洞模拟
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
(function() {
var bands, c, can, clamp, ctx, getXY, maxRadius, points, render, size, time;
can = document.getElementById("c");
ctx = can.getContext("2d");
size = 800;
c = size / 2;
can.width = size;
can.height = size;
points = 21;
bands = 16;
maxRadius = Math.sqrt(2 * c * c) / Math.pow(bands, 3) * 1.8;
time = 0;
getXY = (function(_this) {
return function(p, b) {
var a, mo, r;
p = p % points;
b = b % bands;
a = p / points * Math.PI * 2;
mo = time * 0.001;
mo %= 1;
r = Math.pow(b + mo, 3) * maxRadius;
return {
x: c + Math.sin(a) * r + Math.sin(mo + b) * 15,
y: c + Math.cos(a) * r + Math.cos(mo + b) * 15,
r: r
};
};
})(this);
clamp = (function(_this) {
return function(v) {
if (v < 0) {
return 0;
} else if (v > 1) {
return 1;
} else {
return v;
}
};
})(this);
render = (function(_this) {
return function(t) {
var b, blue, c0, c1, c2, c3, colour, distanceShadow, green, i, j, p, radialShadow, red, ref, ref1, shade;
time = t;
ctx.clearRect(0, 0, size, size);
for (p = i = 0, ref = points; 0 <= ref ? i < ref : i > ref; p = 0 <= ref ? ++i : --i) {
for (b = j = 0, ref1 = bands - 1; 0 <= ref1 ? j < ref1 : j > ref1; b = 0 <= ref1 ? ++j : --j) {
c0 = getXY(p, b);
c1 = getXY(p, b + 1);
c2 = getXY(p + 1, b + 1);
c3 = getXY(p + 1, b);
distanceShadow = c0.r / maxRadius / 700;
radialShadow = 0.2 + (Math.abs(((p + 0.5) - points / 2) / points)) * 0.7;
shade = Math.round(radialShadow * distanceShadow * 255);
if (shade > 255) {
shade = 255;
}
red = Math.round(distanceShadow * 160);
green = Math.round(shade);
blue = Math.round(255 - shade);
colour = "rgba(" + [red, green, blue, 1] + ")";
ctx.fillStyle = colour;
ctx.beginPath();
ctx.moveTo(c0.x, c0.y);
ctx.lineTo(c1.x, c1.y);
ctx.lineTo(c2.x, c2.y);
ctx.lineTo(c3.x, c3.y);
ctx.closePath();
ctx.fill();
/*
ctx.beginPath()
ctx.moveTo(c0.x, c0.y)
ctx.lineTo(c2.x, c2.y)
ctx.closePath()
ctx.fill()
ctx.stroke()
*/
}
}
return requestAnimationFrame(render);
};
})(this);
render(0);
}).call(this);
计算机模拟虫洞,Canvas 3D虫洞模拟相关推荐
- 50代码HTML5 Canvas 3D 编辑器优雅搞定
1024程序员节刚过,手痒想实现一个html的3d编辑器,看了three.js 同时还看了网上流传已久的<<基于 HTML5 Canvas 的简易 2D 3D 编辑器>>,都觉 ...
- 高斯旋转热源与双椭球热源_【干货】论焊接,3D打印模拟的热源模型——焊缝、3D打印高度变换模拟...
原标题:[干货]论焊接,3D打印模拟的热源模型--焊缝.3D打印高度变换模拟 焊接.3D打印是难度相对较高的数值模拟过程,在模拟温度场及应力场过程中,至关重要的是如何进行热源函数的建立和加载,同时配以 ...
- Canvas 3D球形文字云动画特效
Canvas 3D球形文字云动画特效 Canvas 3D球形文字云动画特效 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. ...
- 使用webgl(three.js)搭建一个3D建筑,3D消防模拟——第三课
使用webgl(three.js)搭建一个3D建筑,3D消防模拟--第三课 项目背景 消防安全一直是各大都市关注的重要课题,在消防体系中,特别是高楼消防体系中,消防系统整体布控与监控,火情有效准确定位 ...
- php 3d animation,基于three.js的酷炫Canvas 3D线条动画特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效 ...
- 可以用计算机模拟人体,科学家用超级计算机和3D打印模拟人体血管网
研究人员们说,他们正用一台新型的超级计算机模拟整个人体的血液流动,并将其与真实的流动数据进行比照,结果非常好.在该模拟软件中每一个动脉都有其三维表示,甚至包括那些直径仅有1毫米的血管,这些都是同一个人 ...
- Canvas 3D魔方小游戏
目录 一.案列效果 二.案列思路 三.代码目录 四.代码实现 一.案列效果 二.案列思路 1.先将平面上的6个DIV拼接在一起.形成一张类似于3d立方体图形展开的平面图. 2.我们需要将每一个面旋转到 ...
- BIM与超级计算机,科学家用超级计算机和3D打印模拟人体血管网
目前该系统的准确性已经通过了第一项关键性实验,当时科学家们将虚拟动脉中的血液流动与其在一个3D打印的复制品中的真实流动进行了比较.结果是,他们在实体复制品中看到的流动模式与模拟软件匹配得很好. 在另一 ...
- html js 动画效果,原生js html5 canvas 3D云动画效果
特效描述:原生js html5canvas 3D云动画效果.3D云效果,叼炸天!可用鼠标控制方向!本地要localhost才能正常演示 代码结构 1. 引入JS 2. HTML代码 varying v ...
最新文章
- Android运行时异常“Binary XML file line # : Error inflat
- Zedboard学习(七):VGA显示
- 模拟课----需求文本
- Java程序创建Kafka Topic,以及数据生产消费,常用的命令
- .NET下使用ufun函数取CAM操作的进给速度
- 在CentOS6和CentOS7安装epel仓库-最简单的方法
- 联想K3全系,救黑砖(只要手机链接电脑有端口识别就能恢复正常)
- NBU备份软件实施过程的注意事项
- 【小程序-开篇】国内IT技术圈的技能树貌似点歪了?
- 线性表、栈和队列的相同点和不同点
- android布局跑马灯,Android自定义跑马灯效果(适合任意布局)
- react的生命周期函数(超详细)
- 安卓腾讯Bugly使用教程
- 使用pathogen管理Vim插件并托管到Github 参照文章【1】【2】的办法,将vim打造成一个Python开发环境。文章中使用的是 pathogen + git 来管理 Vim 插件的。对这种
- 计算机科学丛书之第9章和第10章代码
- C语言试题三十二之编写函数function,它的功能是:将一个字符串转换为一个整数(不得调用c语言提供的将字符串转换为整数的函数)。 1
- C# 字符串操作--减少垃圾回收压力
- 位运算的优点和小白鼠面试题
- 转载 一个小时学会MySQL数据库(3)
- 利用MomentJS 绘制日历
热门文章
- Web Worker 使用教程
- windows下安装emscripten
- 使用librdkafka的C++接口实现简单的生产者和消费者
- PCL点云库法向量显示,vtk错误“no override found for vtkActor”
- C++输入输出运算符重载(“”“”)
- ACE中的Proactor和Reactor
- mac改终端前面的计算机名
- VS2017 + cmake 3.7 + opencv 3.2 编译
- vue-router之路由属性配置说明(十)
- ArcGIS符号异常问题