HTML5版3D实验室系列【六】----WAVE

一.简介

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

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

 

 

二.实现

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

       var c = document.getElementById("myCanvas");
       var cxt = c.getContext("2d");  
       var angel = 2 * Math.PI;
       var step = Math.PI / 10;
       function draw() {
           cxt.clearRect(0, 0, 1000, 1000);
           for (var i = 0; i < 600; i  = 10) {
               cxt.fillStyle = randomColor();
               cxt.beginPath();
               angel -= step;
               cxt.arc(i, 100, 7, 0, Math.PI * 2, true);
               cxt.closePath();
               cxt.fill();
           }
       }
       draw();
       function randomColor() {
           var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]; var strHex = "#";
           var index;
           for (var i = 0; i < 6; i  ) {
               index = Math.round(Math.random() * 15);
               strHex  = arrHex[index];
           }
           return strHex;
       } 

 

效果如下：

 

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

       var c = document.getElementById("myCanvas");
       var cxt = c.getContext("2d");  
       var angel = 2 * Math.PI;
       var step = Math.PI / 10;
       function draw() {
           cxt.clearRect(0, 0, 1000, 1000);
           for (var i = 0; i < 600; i  = 10) {
               cxt.fillStyle = randomColor();
               cxt.beginPath();
               angel -= step;
               cxt.arc(i, 150   100 * Math.cos(angel), 7, 0, Math.PI * 2, true);
               cxt.closePath();
               cxt.fill();
           }
       }
       draw();

 

效果如下：

 

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

       var c = document.getElementById("myCanvas");
       var cxt = c.getContext("2d");     
       var angel = 2 * Math.PI;
       var step = Math.PI / 10;
       function draw() {
           cxt.clearRect(0, 0, 1000, 1000);
           for (var i = 0; i < 600; i  = 10) {
               cxt.fillStyle = randomColor();
               cxt.beginPath();
               angel -= step;
               cxt.arc(i, 150   100 * Math.cos(angel), 7, 0, Math.PI * 2, true);
               cxt.closePath();
               cxt.fill();
           }
       }
       var step2 = 0.2;
       var waveAsync = eval(Jscex.compile("async", function () {
           while (true) {
               angel = 2 * Math.PI;
               angel -= step2;
               step2  = 0.1;
               $await(Jscex.Async.sleep(100))
               draw();
           }
       }))
       waveAsync().start();

 

三.在线演示

 

 

下篇预告：《3DWave》

您可能还喜欢：http://www.cnblogs.com/iamzhanglei/archive/2011/09/30/2196793.html

您可能还喜欢：http://www.cnblogs.com/iamzhanglei/archive/2011/09/20/2182038.html