HTML5技术

HTML5版3D实验室六:WAVE

字号+ 作者:当耐特砖家 来源: 2014-11-16 21:26 我要评论( )

一.简介 波,在空间以特定形式传播的物理量或物理量的扰动。由于是以特定的形式传播,这个物理量(或其扰动,下同)成为空间位置和时间的函数,而且是这样的函数,即在时间t出现

QQ截图20111031103318

一.简介

波,在空间以特定形式传播的物理量或物理量的扰动。由于是以特定的形式传播,这个物理量(或其扰动,下同)成为空间位置和时间的函数,而且是这样的函数,即在时间t出现在空间r处周围的分布,会在时间(t+t┡)出现在空间(r+vt┡)的周围。 v一般说是个常矢量,就是有关物理量(或其扰动)的传播速度。物理量函数称为波函数,数学上它是一个叫波动方程的在特定边界条件下的解。

物理定义:某一物理量的扰动或振动在空间逐点传递时形成的运动。不同形式的波虽然在产生机制、传播方式和与物质的相互作用等方面存在很大差别,但在传播时却表现出多方面的共性,可用相同的数学方法描述和处理。

二.实现

波是由无数的点组成,每个点有着自己的运动方向和速度大小。为了实现波的效果,我们首先模拟波上的点:

JavaScript Code复制内容到剪贴板
  1. var c = document.getElementById("myCanvas");  
  2.     var cxt = c.getContext("2d");   
  3.     var angel = 2 * Math.PI;  
  4.     var step = Math.PI / 10;  
  5.     function draw() {  
  6.         cxt.clearRect(0, 0, 1000, 1000);  
  7.         for (var i = 0; i < 600; i += 10) {  
  8.             cxt.fillStyle = randomColor();  
  9.             cxt.beginPath();  
  10.             angel -= step;  
  11.             cxt.arc(i, 100, 7, 0, Math.PI * 2, true);  
  12.             cxt.closePath();  
  13.             cxt.fill();  
  14.         }  
  15.     }  
  16.     draw();  
  17.     function randomColor() {  
  18.         var arrHex = ["0""1""2""3""4""5""6""7""8""9""A""B""C""D""E""F"]; var strHex = "#";  
  19.         var index;  
  20.         for (var i = 0; i < 6; i++) {  
  21.             index = Math.round(Math.random() * 15);  
  22.             strHex += arrHex[index];  
  23.         }  
  24.         return strHex;  
  25.     }  
 

效果如下:

image 

然后我们让波上的每个点回到某一时刻它该回到的位置:

JavaScript Code复制内容到剪贴板
  1. var c = document.getElementById("myCanvas");  
  2. var cxt = c.getContext("2d");   
  3. var angel = 2 * Math.PI;  
  4. var step = Math.PI / 10;  
  5. function draw() {  
  6.     cxt.clearRect(0, 0, 1000, 1000);  
  7.     for (var i = 0; i < 600; i += 10) {  
  8.         cxt.fillStyle = randomColor();  
  9.         cxt.beginPath();  
  10.         angel -= step;  
  11.         cxt.arc(i, 150 + 100 * Math.cos(angel), 7, 0, Math.PI * 2, true);  
  12.         cxt.closePath();  
  13.         cxt.fill();  
  14.     }  
  15. }  
  16. draw();  

效果如下:

image

 

然后我们利用Jscex实现动画效果:

JavaScript Code复制内容到剪贴板
  1. var c = document.getElementById("myCanvas");  
  2. var cxt = c.getContext("2d");      
  3. var angel = 2 * Math.PI;  
  4. var step = Math.PI / 10;  
  5. function draw() {  
  6.     cxt.clearRect(0, 0, 1000, 1000);  
  7.     for (var i = 0; i < 600; i += 10) {  
  8.         cxt.fillStyle = randomColor();  
  9.         cxt.beginPath();  
  10.                angel -= step;  
  11.         cxt.arc(i, 150 + 100 * Math.cos(angel), 7, 0, Math.PI * 2, true);  
  12.         cxt.closePath();  
  13.         cxt.fill();  
  14.     }  
  15. }  
  16. var step2 = 0.2;  
  17. var waveAsync = eval(Jscex.compile("async"function () {  
  18.     while (true) {          angel = 2 * Math.PI;  
  19.         angel -= step2;  
  20.         step2 += 0.1;  
  21.         $await(Jscex.Async.sleep(100))  
  22.         draw();  
  23.     }  
  24. }))  
  25. waveAsync().start();  

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 8款超酷的HTML5 3D图片动画源码 - 帅的相对论

    8款超酷的HTML5 3D图片动画源码 - 帅的相对论

    2015-12-17 09:45

  • 9个超绚丽的HTML5 3D图片动画特效 - 帅的相对论

    9个超绚丽的HTML5 3D图片动画特效 - 帅的相对论

    2015-12-15 13:00

  • HTML5游戏开发引擎,初识CreateJS - 请叫我头头哥

    HTML5游戏开发引擎,初识CreateJS - 请叫我头头哥

    2015-11-03 08:05

  • 无插件纯Web HTML5 3D机房 终结篇(新增资产管理、动环监控等内容) - twaver

    无插件纯Web HTML5 3D机房 终结篇(新增资产管理、动环监控等内容)

    2015-10-27 11:47

网友点评