[原创]酷炫的canvas粒子动画和性能消耗

这里只有作者精心编写的学习经历!
回复
头像
hellohappy
网站管理员
网站管理员
帖子: 280
注册时间: 2018年11月18日, 14:27
Been thanked: 2 time

#1 [原创]酷炫的canvas粒子动画和性能消耗

未读文章 hellohappy » 2019年1月08日, 03:25

    自从建站以后,就对别人网站的各种特效十分敏感,有时候会遇到一些很酷炫的动画或者背景,就很想模仿(抄袭。。)。

    当然我遇到的使用这些特效的网站,一般都不会对特效js进行加密,通常都是使用经过简单混淆压缩的js代码,甚至直接放源码(还带注释那种),所以通常想模仿也不是很难实现。
    就比如之前在网站上看到了很多类似的粒子动画,有的还会跟随鼠标,比如如下样式(点击查看原图)。

    粒子特效1会跟随鼠标移动而围剿过来~
粒子特效1.GIF

    粒子特效2还可以自己输入文字,他会自动聚集成你输入的文字。
粒子特效2.GIF

    粒子特效3纯动画,展示的是神级网络样式?
粒子特效3.GIF

    特别是第一个特效,第一次遇到玩了差不多2分钟才住手。当时还以为有多难实现,花了很久去研究这个网站到底哪个js画出了这么漂亮的效果,还能跟随鼠标移动。后来发现这个项目在github上有各种不同的版本,效果也差不多。我下面会给出含有注释的版本(本来实现逻辑都不是很难,都不超过200行有效代码,真的想看懂代码的,自己对着带注释的源码认真看半小时估计都能懂了)。

    正当我十分兴奋地给我的网站加上这些秀的不行的特效的时候;我发现一个现象,一打开网站,电脑的风扇就fufu作响?哦?以前我的网站不会这么耗电脑性能的啊?打开任务管理器一看(ctrl+alt+del),浏览器的程序直接跑满了的单核(我电脑是4核八线程,他直接跑满了其中1核,也就占用13%左右),而且关掉特效以后,立马就降到了0%。

    这到底是程序优化不好还是真的就必须这么消耗cpu?为了一个特效,要消耗如此多的性能,是不太值得的(除非人家本来就是过来欣赏特效的。)

    我们随便打开一个源码来分析分析,看看这代码到底是怎么回事。以特效1为例
Spoiler
Show

Code: 全选

<!DOCTYPE html>
<html>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
          var cWidth,cHeight;
        resize();
        window.onresize = resize;
        function resize() {
          cWidth = canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
          cHeight = canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        }
        // 鼠标活动时,获取鼠标坐标
        var mouse = {x: null, y: null, max: 20000};
        window.onmousemove = function(e) {
          e = e || window.event;
          mouse.x = e.clientX;
          mouse.y = e.clientY;
        };
        window.onmouseout = function(e) {
          mouse.x = null;
          mouse.y = null;
        };
        // 添加粒子
        // x,y为粒子坐标,moveX, moveY为粒子xy轴加速度,max为连线的最大距离
        var dots = ;
        for (var i = 0; i < 300; i++) {
          var x = Math.random() * cWidth;
          var y = Math.random() * cHeight;
          var moveX = Math.random() * 2 - 1;
          var moveY = Math.random() * 2 - 1;
          dots.push({
            x: x,
            y: y,
            moveX: moveX,
            moveY: moveY,
            max: 6000
          })
        }
        // 延迟100毫秒开始执行动画,如果立即执行有时位置计算会出错
        setTimeout(function() {
          animate();
        }, 100);
        // 每一帧循环的逻辑
        function animate() {
          ctx.clearRect(0, 0, cWidth, cHeight);
          // 将鼠标坐标添加进去,产生一个用于比对距离的点数组
          var allDots = [mouse].concat(dots);
          dots.forEach(function(dot) {
            // 粒子位移
            dot.x += dot.moveX;
            dot.y += dot.moveY;
            // 遇到边界将加速度反向
            dot.moveX *= (dot.x > cWidth || dot.x < 0) ? -1 : 1;
            dot.moveY *= (dot.y > cHeight || dot.y < 0) ? -1 : 1;
            // 绘制点
            ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);
            // 循环比对粒子间的距离
            for (var i = 0; i < allDots.length; i++) {
              var tempDot = allDots[i];
              if (dot === tempDot || tempDot.x === null || tempDot.y === null) continue;
              var _x = dot.x - tempDot.x;
              var _y = dot.y - tempDot.y;
              // 两个粒子之间的距离
              var dis = _x * _x + _y * _y;
              // 距离比
              var ratio;
              // 如果两个粒子之间的距离小于粒子对象的max值,则在两个粒子间画线
              if (dis < tempDot.max) {
                // 如果是鼠标,则让粒子向鼠标的位置移动
                if (tempDot === mouse && dis > (tempDot.max / 2)) {
                  dot.x -= _x * 0.03;
                  dot.y -= _y * 0.03;
                }
                // 计算距离比
                ratio = (tempDot.max - dis) / tempDot.max;
                // 画线
                ctx.beginPath();
                ctx.lineWidth = ratio / 2;
                ctx.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')';
                ctx.moveTo(dot.x, dot.y);
                ctx.lineTo(tempDot.x, tempDot.y);
                ctx.stroke();
              }
            }
            // 将已经计算过的粒子从数组中删除
            allDots.splice(allDots.indexOf(dot), 1);
          });
         setTimeout(function() {
             animate();
         }, 1000/60);
        }
      </script>
    </body>
</html>
    以上整个特效,html的body里面只包含了一个canvas元素和一个JavaScript程序段。JavaScript是我们要研究的内容(具体整个js什么意思自己去读吧,我只介绍一小部分)。
这里,整个js,是用setTimeout() 控制整个核心函数animate的执行频率的。
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。( 1000 毫秒= 1 秒。)
第一次出现setTimeout出现在43行,直接告诉浏览器在100毫秒以后开始访问我们的核心函数animate;而核心程序本身又是自己调用自己的,animate的最后几行是:

Code: 全选

setTimeout(function() {
  animate();
}, 1000/60);
    这几行是在告诉浏览器再过 1000/60大约17毫秒再调用一次自己。总体上说就是,整个例子动画效果就是用animate这个函数,一帧一帧地画出来的,每执行一次就会刷新一次屏幕。这里1000毫秒等于1秒,除以60,刚好是人类视网膜能接受的流畅帧率60帧。
    那么如果我们调低整个核心函数animate的执行频率,把1000/60改成更大,是否能降低整个电脑的负载呢?当然没问题!比如你改成1000/10=100,cpu的负载也是接近于零的,只是动画变得十分的缓慢,而且也不是很流畅。

    同理,我们也可以分析其他例子效果的程序,下面给出这几个效果的源码,粘贴成文本再以html文件后缀保存就可以了。

单击显示按钮显示源码
Show
例子特效1:

Code: 全选

<!DOCTYPE html>
<html>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
      	var cWidth,cHeight;
        resize();
        window.onresize = resize;
        function resize() {
          cWidth = canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
          cHeight = canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        }
        // 鼠标活动时,获取鼠标坐标
        var mouse = {x: null, y: null, max: 20000};
        window.onmousemove = function(e) {
          e = e || window.event;
          mouse.x = e.clientX;
          mouse.y = e.clientY;
        };
        window.onmouseout = function(e) {
          mouse.x = null;
          mouse.y = null;
        };
        // 添加粒子
        // x,y为粒子坐标,moveX, moveY为粒子xy轴加速度,max为连线的最大距离
        var dots = [];
        for (var i = 0; i < 300; i++) {
          var x = Math.random() * cWidth;
          var y = Math.random() * cHeight;
          var moveX = Math.random() * 2 - 1;
          var moveY = Math.random() * 2 - 1;
          dots.push({
            x: x,
            y: y,
            moveX: moveX,
            moveY: moveY,
            max: 6000
          })
        }
        // 延迟100hao毫秒开始执行动画,如果立即执行有时位置计算会出错
        setTimeout(function() {
          animate();
        }, 100);
        // 每一帧循环的逻辑
        function animate() {
          ctx.clearRect(0, 0, cWidth, cHeight);
          // 将鼠标坐标添加进去,产生一个用于比对距离的点数组
          var allDots = [mouse].concat(dots);
          dots.forEach(function(dot) {
            // 粒子位移
            dot.x += dot.moveX;
            dot.y += dot.moveY;
            // 遇到边界将加速度反向
            dot.moveX *= (dot.x > cWidth || dot.x < 0) ? -1 : 1;
            dot.moveY *= (dot.y > cHeight || dot.y < 0) ? -1 : 1;
            // 绘制点
            ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);
            // 循环比对粒子间的距离
            for (var i = 0; i < allDots.length; i++) {
              var tempDot = allDots[i];
              if (dot === tempDot || tempDot.x === null || tempDot.y === null) continue;
              var _x = dot.x - tempDot.x;
              var _y = dot.y - tempDot.y;
              // 两个粒子之间的距离
              var dis = _x * _x + _y * _y;
              // 距离比
              var ratio;
              // 如果两个粒子之间的距离小于粒子对象的max值,则在两个粒子间画线
              if (dis < tempDot.max) {
                // 如果是鼠标,则让粒子向鼠标的位置移动
                if (tempDot === mouse && dis > (tempDot.max / 2)) {
                  dot.x -= _x * 0.03;
                  dot.y -= _y * 0.03;
                }
                // 计算距离比
                ratio = (tempDot.max - dis) / tempDot.max;
                // 画线
                ctx.beginPath();
                ctx.lineWidth = ratio / 2;
                ctx.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')';
                ctx.moveTo(dot.x, dot.y);
                ctx.lineTo(tempDot.x, tempDot.y);
                ctx.stroke();
              }
            }
            // 将已经计算过的粒子从数组中删除
            allDots.splice(allDots.indexOf(dot), 1);
          });
         setTimeout(function() {
   	      animate();
         }, 1000/10);
        }
	  </script>
	</body>
</html>

例子特效2:

Code: 全选

<!DOCTYPE html>
<html>
	<body>
	
<div class="help">?</div> 

<div class="ui">
  <input class="ui-input" type="text" />
  <span class="ui-return">↵</span>
</div>

<div class="overlay">
  <div class="tabs">
    <div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div>

    <div class="tabs-panels">
      <ul class="tabs-panel commands">
        <li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info" data-demo="Hello :)">Type anything</span><span class="commands-item-action">Demo</span></li>
        <li class="commands-item"><span class="commands-item-title">Countdown</span><span class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span><span class="commands-item-action">Demo</span></li>
        <li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info" data-demo="#time">#time</span><span class="commands-item-action">Demo</span></li>
        <li class="commands-item"><span class="commands-item-title">Rectangle</span><span class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span class="commands-item-mode">width x height</span></span><span class="commands-item-action">Demo</span></li>
        <li class="commands-item"><span class="commands-item-title">Circle</span><span class="commands-item-info" data-demo="#circle 25">#circle<span class="commands-item-mode">diameter</span></span><span class="commands-item-action">Demo</span></li>

        <li class="commands-item commands-item--gap"><span class="commands-item-title">Animate</span><span class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span class="commands-item-mode">command1</span>&nbsp;|<span class="commands-item-mode">command2</span></span><span class="commands-item-action">Demo</span></li>
      </ul>

      <div class="tabs-panel ui-details">
        <div class="ui-details-content">
          <h1>Shape Shifter</h1>
          <p>
            An experiment by <a href="//www.kennethcachia.com" target="_blank">Kenneth Cachia<a/>.<br/>
            <a href="//fortawesome.github.io/Font-Awesome/#icons-new" target="_blank">Font Awesome</a> is being used to render all #icons.
          </p>

          <br/><p>Visit <a href="http://www.kennethcachia.com/shape-shifter/?a=#icon thumbs-up" target="_blank">Shape Shifter</a> to use icons.</p>
        </div>
      </div>

      <div class="tabs-panel ui-share">
        <div class="ui-share-content">
          <h1>Sharing</h1>
          <p>Simply add <em>?a=</em> to the current URL to share any static or animated text. Examples:</p>
          <p>
            <a href="http://www.kennethcachia.com/shape-shifter?a=Hello" target="_blank">www.kennethcachia.com/shape-shifter?a=Hello</a><br/>
            <a href="http://www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3" target="_blank">www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
body {
  font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #79a8ae;
  color: #666;
  font-size: 16px;
  line-height: 1.5em;
  overflow: hidden;
}

h1 {
  color: #111;
  margin: 0 0 12px 0;
  font-size: 24px;
  line-height: 1.5em;
}

p {
  margin: 0 0 10x 0;
}

a {
  color: #888;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
}

a:hover {
  border-bottom-color: #888;
}

body,
.overlay {
  -webkit-perspective: 1000;
  -webkit-perspective-origin-y: 25%;
}

.body--ready {
  /* Ideas
  background: -webkit-linear-gradient(top, #e2b986 -10%, #241c35 140%);
  background: -webkit-linear-gradient(top, #c97369 -40%, #241c35 130%);
  background: -webkit-linear-gradient(top, #fac4c4 -10%, #606386 140%);
  background: -webkit-linear-gradient(top, #519ab0 0%, #414A6D 110%);
  background: -webkit-linear-gradient(top, rgb(129, 0, 170) 0%, rgb(43, 4, 114) 110%);
  background: -webkit-linear-gradient(top, rgb(163, 235, 189) 0%, rgb(16, 93, 145) 110%);
  background: -webkit-linear-gradient(top, rgb(165, 103, 189) 0%, rgb(75, 233, 214) 120%);
  */

  background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
}

.body--ready .overlay {
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -moz-transition: -moz-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -ms-transition: -ms-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -o-transition: -o-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
  transition: transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
}


.ui {
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 300px;
  margin-left: -150px;
}

.ui-input {
  width: 100%;
  height: 50px;
  background: none;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  border: none;
  border-bottom: 2px solid white;
}

.ui-input:focus {
  outline: none;
  border: none;
  border-bottom: 2px solid white;
}

.ui-return {
  display: none;
  position: absolute;
  top: 20px;
  right: 0;
  padding: 3px 2px 0 2px;
  font-size: 10px;
  line-height: 10px;
  color: #fff;
  border: 1px solid #fff;
}

.ui--enter .ui-return {
  display: block;
}

.ui--wide {
  width: 76%;
  margin-left: 12%;
  left: 0;
}

.ui--wide .ui-return {
  right: -20px;
}

.help {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 25px;
  height: 25px;
  text-align: center;
  font-size: 13px;
  line-height: 27px;
  font-weight: bold;
  cursor: pointer;
  background: #fff;
  color: #79a8ae;
  opacity: .9;

  -webkit-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -moz-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -ms-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -o-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
}

.help:hover {
  opacity: 1;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 550px;
  height: 490px;
  margin: -260px 0 0 -275px;
  opacity: 0;

  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

.overlay--visible {
  opacity: 1;

  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
}

.ui-share,
.ui-details {
  opacity: .9;
  background: #fff;
  z-index: 2;
}

.ui-details-content,
.ui-share-content {
  padding: 100px 50px;
}

.commands {
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: pointer;
}

.commands-item {
  font-size: 12px;
  line-height: 22px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 20px;
  background: #fff;
  margin-top: 1px;
  color: #333;
  opacity: .9;

  -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -moz-transition: -moz-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -ms-transition: -ms-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -o-transition: -o-transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  transition: transform 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
}

.commands-item--gap {
  margin-top: 9px;
}

.commands-item:hover {
  opacity: 1;
}

.commands-item:hover .commands-item-action {
  background: #333;
}

.commands-item a {
  display: inline-block;
}

.commands-item-mode {
  display: inline-block;
  margin-left: 3px;
  font-style: italic;
  color: #ccc;
}

.commands-item-title {
  display: inline-block;
  width: 150px;
}

.commands-item-info {
  display: inline-block;
  width: 300px;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: normal;
  color: #aaa;
}

.commands-item-action {
  display: inline-block;
  float: right;
  margin-top: 3px;
  text-transform: uppercase;
  font-size: 10px;
  line-height: 10px;
  color: #fff;
  background: #90c9d1;
  padding: 5px 10px 4px 10px;
  border-radius: 3px;
}

.commands-item:first-child {
  margin-top: 0;
}

.twitter-share {
  position: absolute;
  top: 4px;
  right: 20px;
}


.tabs-labels {
  margin-bottom: 9px;
}

.tabs-label {
  display: inline-block;
  background: #fff;
  padding: 10px 20px;
  font-size: 12px;
  line-height: 22px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #333;
  opacity: .5;
  cursor: pointer;
  margin-right: 2px;

  -webkit-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -moz-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -ms-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -o-transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
  transition: opacity 0.1s cubic-bezier(0.694, 0.0482, 0.335, 1);
}

.tabs-label:hover {
  opacity: .9;
}

.tabs-label--active {
  opacity: .9;
}

.tabs-panel {
  display: none;
}

.tabs-panel--active {
  display: block;
}

.tab-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.touch .ui-input {
  display: none;
}
</style>


	<script>
/*
 * Shape Shifter
 * http://www.kennethcachia.com/shape-shifter
 * A canvas experiment
 */

'use strict';

var canvas;
var ctx;
var pixelRadius;
var pixelContiner;
var fontSize = 500,
    fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';

var shapeShift = {
    init: function() {
        var action = window.location.href,
            i = action.indexOf('?a=');

        shapeShift.Drawing.init('.canvas');
        shapeShift.ShapeBuilder.init();
        shapeShift.UI.init();


        if (i !== -1) {
            shapeShift.UI.simulate(decodeURI(action).substring(i + 3));
        } else {
            shapeShift.UI.simulate('#rectangle 5x5|#circle 25|Shape|Shifter|Type|to start|#icon thumbs-up|#countdown 3||');
        }

        shapeShift.Drawing.loop(function() {
            shapeShift.Shape.render();
        });
    }
};

window.addEventListener('load', function() {
    canvas = document.createElement('canvas');
    canvas.id = 'mainCanvas';
    canvas.className = 'canvas';
    ctx = canvas.getContext('2d');

    pixelRadius = 4;
    pixelContiner = pixelRadius * 2 + 1;
    document.body.insertBefore(canvas, document.body.firstChild);


    document.body.classList.add('body--ready');

    shapeShift.init();
});

shapeShift.Drawing = (function() {
    var renderFn,
        requestFrame = window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };

    return {
        init: function(el) {

            this.adjustCanvas();

            window.addEventListener('resize', function() {
                shapeShift.Drawing.adjustCanvas();
            });
        },

        loop: function(fn) {
            renderFn = !renderFn ? fn : renderFn;
            this.clearFrame();
            renderFn();
            requestFrame.call(window, this.loop.bind(this));
        },

        adjustCanvas: function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        },

        clearFrame: function() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        },

        getArea: function() {
            return { w: canvas.width, h: canvas.height };
        },

        drawCircle: function(p, c) {
            ctx.fillStyle = c.render();
            ctx.beginPath();
            ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, true);
            ctx.closePath();
            ctx.fill();
        }
    };
}());


shapeShift.Point = function(args) {
    this.x = args.x;
    this.y = args.y;
    this.r = args.r;
    this.a = args.a;
    this.h = args.h;
};


shapeShift.Color = function(r, g, b, a) {
    this.r = r;
    this.g = g;
    this.b = b;
    this.a = a;
};

shapeShift.Color.prototype = {
    render: function() {
        return 'rgba(' + this.r + ',' + this.g + ',' + this.b + ',' + this.a + ')';
    }
};


shapeShift.UI = (function() {
    var input = document.querySelector('.ui-input'),
        ui = document.querySelector('.ui'),
        help = document.querySelector('.help'),
        commands = document.querySelector('.commands'),
        overlay = document.querySelector('.overlay'),
        interval,
        isTouch = false, //('ontouchstart' in window || navigator.msMaxTouchPoints),
        currentAction,
        resizeTimer,
        time,
        maxShapeSize = 30,
        firstAction = true,
        sequence = [],
        cmd = '#';

    function formatTime(date) {
        var h = date.getHours(),
            m = date.getMinutes();

        m = m < 10 ? '0' + m : m;
        return h + ':' + m;
    }

    function getValue(value) {
        return value && value.split(' ')[1];
    }

    function getAction(value) {
        value = value && value.split(' ')[0];
        return value && value[0] === cmd && value.substring(1);
    }

    function timedAction(fn, delay, max, reverse) {
        clearInterval(interval);
        currentAction = reverse ? max : 1;
        fn(currentAction);

        if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) {
            interval = setInterval(function() {
                currentAction = reverse ? currentAction - 1 : currentAction + 1;
                fn(currentAction);

                if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {
                    clearInterval(interval);
                }
            }, delay);
        }
    }

    function reset(destroy) {
        clearInterval(interval);
        sequence = [];
        time = null;

        if (destroy) {
            shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(''));
        }
    }

    function performAction(value) {
        var action,
            current;

        overlay.classList.remove('overlay--visible');
        sequence = typeof(value) === 'object' ? value : sequence.concat(value.split('|'));
        input.value = '';
        checkInputWidth();

        timedAction(function() {
            current = sequence.shift();
            action = getAction(current);
            value = getValue(current);

            switch (action) {
                case 'countdown':
                    value = parseInt(value, 10) || 10;
                    value = value > 0 ? value : 10;

                    timedAction(function(index) {
                        if (index === 0) {
                            if (sequence.length === 0) {
                                shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(''));
                            } else {
                                performAction(sequence);
                            }
                        } else {
                            shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(index), true);
                        }
                    }, 1000, value, true);
                    break;

                case 'rectangle':
                    value = value && value.split('x');
                    value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2];

                    shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0], 10)), Math.min(maxShapeSize, parseInt(value[1], 10))));
                    break;

                case 'circle':
                    value = parseInt(value, 10) || maxShapeSize;
                    value = Math.min(value, maxShapeSize);
                    shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.circle(value));
                    break;

                case 'time':
                    var t = formatTime(new Date());

                    if (sequence.length > 0) {
                        shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(t));
                    } else {
                        timedAction(function() {
                            t = formatTime(new Date());
                            if (t !== time) {
                                time = t;
                                shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(time));
                            }
                        }, 1000);
                    }
                    break;

                case 'icon':
                    shapeShift.ShapeBuilder.imageFile('font-awesome/' + value + '.png', function(obj) {
                        shapeShift.Shape.switchShape(obj);
                    });
                    break;

                default:
                    shapeShift.Shape.switchShape(shapeShift.ShapeBuilder.letter(current[0] === cmd ? 'What?' : current));
            }
        }, 2000, sequence.length);
    }

    function checkInputWidth() {
        if (input.value.length > 18) {
            ui.classList.add('ui--wide');
        } else {
            ui.classList.remove('ui--wide');
        }

        if (firstAction && input.value.length > 0) {
            ui.classList.add('ui--enter');
        } else {
            ui.classList.remove('ui--enter');
        }
    }

    function bindEvents() {
        document.body.addEventListener('keydown', function(e) {
            input.focus();

            if (e.keyCode === 13) {
                firstAction = false;
                reset();
                performAction(input.value);
            }
        });

        window.addEventListener('resize', function() {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                shapeShift.Shape.shuffleIdle();
                reset(true);
            }, 500);
        });

        input.addEventListener('input', checkInputWidth);
        input.addEventListener('change', checkInputWidth);
        input.addEventListener('focus', checkInputWidth);

        help.addEventListener('click', function() {
            overlay.classList.toggle('overlay--visible');

            if (overlay.classList.contains('overlay--visible')) {
                reset(true);
            }
        });

        commands.addEventListener('click', function(e) {
            var el,
                info,
                demo,
                url;

            if (e.target.classList.contains('commands-item')) {
                el = e.target;
            } else {
                el = e.target.parentNode.classList.contains('commands-item') ? e.target.parentNode : e.target.parentNode.parentNode;
            }

            info = el && el.querySelector('.commands-item-info');
            demo = el && info.getAttribute('data-demo');
            url = el && info.getAttribute('data-url');

            if (info) {
                overlay.classList.remove('overlay--visible');

                if (demo) {
                    input.value = demo;

                    if (isTouch) {
                        reset();
                        performAction(input.value);
                    } else {
                        input.focus();
                    }
                } else if (url) {
                    window.location = url;
                }
            }
        });

        canvas.addEventListener('click', function() {
            overlay.classList.remove('overlay--visible');
        });
    }

    return {
        init: function() {
            bindEvents();
            input.focus();

            if (isTouch) {
                document.body.classList.add('touch');
            }

            shapeShift.UI.Tabs.init();
        },

        simulate: function(action) {
            performAction(action);
        }
    };
}());


shapeShift.UI.Tabs = (function() {
    var labels = document.querySelector('.tabs-labels'),
        triggers = document.querySelectorAll('.tabs-label'),
        panels = document.querySelectorAll('.tabs-panel');

    function activate(i) {
        triggers[i].classList.add('tabs-label--active');
        panels[i].classList.add('tabs-panel--active');
    }

    function bindEvents() {
        labels.addEventListener('click', function(e) {
            var el = e.target,
                index;

            if (el.classList.contains('tabs-label')) {
                for (var t = 0; t < triggers.length; t++) {
                    triggers[t].classList.remove('tabs-label--active');
                    panels[t].classList.remove('tabs-panel--active');

                    if (el === triggers[t]) {
                        index = t;
                    }
                }

                activate(index);
            }
        });
    }

    return {
        init: function() {
            activate(0);
            bindEvents();
        }
    };
}());


shapeShift.Dot = function(x, y) {
    this.p = new shapeShift.Point({
        x: x,
        y: y,
        r: pixelRadius,
        a: 1,
        h: 0
    });

    this.e = 0.07;
    this.s = true;

    this.c = new shapeShift.Color(255, 255, 255, this.p.a);

    this.t = this.clone();
    this.q = [];
};

shapeShift.Dot.prototype = {
    clone: function() {
        return new shapeShift.Point({
            x: this.x,
            y: this.y,
            r: this.r,
            a: this.a,
            h: this.h
        });
    },

    _draw: function() {
        this.c.a = this.p.a;
        shapeShift.Drawing.drawCircle(this.p, this.c);
    },

    _moveTowards: function(n) {
        var details = this.distanceTo(n, true),
            dx = details[0],
            dy = details[1],
            d = details[2],
            e = this.e * d;

        if (this.p.h === -1) {
            this.p.x = n.x;
            this.p.y = n.y;
            return true;
        }

        if (d > 1) {
            this.p.x -= ((dx / d) * e);
            this.p.y -= ((dy / d) * e);
        } else {
            if (this.p.h > 0) {
                this.p.h--;
            } else {
                return true;
            }
        }

        return false;
    },

    _update: function() {
        var p,
            d;

        if (this._moveTowards(this.t)) {
            p = this.q.shift();

            if (p) {
                this.t.x = p.x || this.p.x;
                this.t.y = p.y || this.p.y;
                this.t.r = p.r || this.p.r;
                this.t.a = p.a || this.p.a;
                this.p.h = p.h || 0;
            } else {
                if (this.s) {
                    this.p.x -= Math.sin(Math.random() * 3.142);
                    this.p.y -= Math.sin(Math.random() * 3.142);
                } else {
                    this.move(new shapeShift.Point({
                        x: this.p.x + (Math.random() * 50) - 25,
                        y: this.p.y + (Math.random() * 50) - 25,
                    }));
                }
            }
        }

        d = this.p.a - this.t.a;
        this.p.a = Math.max(0.1, this.p.a - (d * 0.05));
        d = this.p.r - this.t.r;
        this.p.r = Math.max(1, this.p.r - (d * 0.05));
    },

    distanceTo: function(n, details) {
        var dx = this.p.x - n.x,
            dy = this.p.y - n.y,
            d = Math.sqrt(dx * dx + dy * dy);

        return details ? [dx, dy, d] : d;
    },

    move: function(p, avoidStatic) {
        if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) {
            this.q.push(p);
        }
    },

    render: function() {
        this._update();
        this._draw();
    }
};


shapeShift.ShapeBuilder = (function() {
    function fit() {
        canvas.width = Math.floor(window.innerWidth / pixelContiner) * pixelContiner;
        canvas.height = Math.floor(window.innerHeight / pixelContiner) * pixelContiner;
        ctx.fillStyle = 'red';
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'center';
    }

    function processCanvas() {
        var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data,
            dots = [],
            x = 0,
            y = 0,
            fx = canvas.width,
            fy = canvas.height,
            w = 0,
            h = 0;

        for (var p = 0; p < pixels.length; p += (4 * pixelContiner)) {
            if (pixels[p + 3] > 0) {
                dots.push(new shapeShift.Point({
                    x: x,
                    y: y
                }));

                w = x > w ? x : w;
                h = y > h ? y : h;
                fx = x < fx ? x : fx;
                fy = y < fy ? y : fy;
            }

            x += pixelContiner;

            if (x >= canvas.width) {
                x = 0;
                y += pixelContiner;
                p += pixelContiner * 4 * canvas.width;
            }
        }

        return { dots: dots, w: w + fx, h: h + fy };
    }

    function setFontSize(s) {
        ctx.font = 'bold ' + s + 'px ' + fontFamily;
    }

    function isNumber(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

    return {
        init: function() {
            fit();
            window.addEventListener('resize', fit);
        },

        imageFile: function(url, callback) {
            var image = new Image(),
                area = shapeShift.Drawing.getArea();

            image.onload = function() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(this, 0, 0, area.h * 0.6, area.h * 0.6);
                callback(processCanvas());
            };

            image.onerror = function() {
                callback(shapeShift.ShapeBuilder.letter('What?'));
            };

            image.src = url;
        },

        circle: function(d) {
            var r = Math.max(0, d) / 2;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.arc(r * pixelContiner, r * pixelContiner, r * pixelContiner, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.closePath();

            return processCanvas();
        },

        letter: function(text) {
            var s = 0;

            setFontSize(fontSize);
            s = Math.min(fontSize,
                (canvas.width / ctx.measureText(text).width) * 0.8 * fontSize,
                (canvas.height / fontSize) * (isNumber(text) ? 1 : 0.45) * fontSize);
            setFontSize(s);

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillText(text, canvas.width / 2, canvas.height / 2);

            return processCanvas();
        },

        rectangle: function(countW, countH) {
            var dots = [],
                width = pixelContiner * countW,
                height = pixelContiner * countH;

            for (var y = 0; y < height; y += pixelContiner) {
                for (var x = 0; x < width; x += pixelContiner) {
                    dots.push(new shapeShift.Point({
                        x: x,
                        y: y,
                    }));
                }
            }

            return { dots: dots, w: width, h: height };
        }
    };
}());


shapeShift.Shape = (function() {
    var dots = [],
        width = 0,
        height = 0,
        cx = 0,
        cy = 0;

    function compensate() {
        var a = shapeShift.Drawing.getArea();

        cx = a.w / 2 - width / 2;
        cy = a.h / 2 - height / 2;
    }

    return {
        shuffleIdle: function() {
            var a = shapeShift.Drawing.getArea();

            for (var d = 0; d < dots.length; d++) {
                if (!dots[d].s) {
                    dots[d].move({
                        x: Math.random() * a.w,
                        y: Math.random() * a.h
                    });
                }
            }
        },

        switchShape: function(n, fast) {
            var size,
                a = shapeShift.Drawing.getArea(),
                d = 0,
                i = 0;

            width = n.w;
            height = n.h;

            compensate();

            if (n.dots.length > dots.length) {
                size = n.dots.length - dots.length;
                for (d = 1; d <= size; d++) {
                    dots.push(new shapeShift.Dot(a.w / 2, a.h / 2));
                }
            }

            d = 0;

            while (n.dots.length > 0) {
                i = Math.floor(Math.random() * n.dots.length);
                dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11);

                if (dots[d].s) {
                    dots[d].move(new shapeShift.Point({
                        r: Math.random() * 20 + 10,
                        a: Math.random(),
                        h: 18
                    }));
                } else {
                    dots[d].move(new shapeShift.Point({
                        r: Math.random() * pixelRadius + pixelRadius,
                        h: fast ? 18 : 30
                    }));
                }

                dots[d].s = true;
                dots[d].move(new shapeShift.Point({
                    x: n.dots[i].x + cx,
                    y: n.dots[i].y + cy,
                    a: 1,
                    r: pixelRadius,
                    h: 0
                }));

                n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1));
                d++;
            }

            for (i = d; i < dots.length; i++) {
                if (dots[i].s) {
                    dots[i].move(new shapeShift.Point({
                        r: Math.random() * 20 + 10,
                        a: Math.random(),
                        h: 20
                    }));

                    dots[i].s = false;
                    dots[i].e = 0.04;
                    dots[i].move(new shapeShift.Point({
                        x: Math.random() * a.w,
                        y: Math.random() * a.h,
                        a: 0.3, //.4
                        r: Math.random() * 4,
                        h: 0
                    }));
                }
            }
        },

        render: function() {
            for (var d = 0; d < dots.length; d++) {
                dots[d].render();
            }
        }
    };
}());
	</script>
	</body>
</html>

例子特效3:

Code: 全选

<!DOCTYPE html>
<html>
	<body>
			<canvas id=c></canvas>
<!--
ALGORITHM:

structure:
- gen( x,y,z ):
	- create node at x,y,z // blue
	- append some children to list:
		- within a certain distance to parent
		- outside a certain distance from any node
		- within a global distance
	- if no children
		- don't append any
		- set as end node // green-ish

- gen( 0,0,0 ) // red
- while list has items
	- gen( position of first item )
	- remove first item


impulse behaviour:
- pick( node ):
	- if node is end node
		- pick( original node )
	- else
		- pick( random node from node children )

- pick( original node)

-->
	<script>
var w = c.width = window.innerWidth,
		h = c.height = window.innerHeight,
		ctx = c.getContext( '2d' ),
		
		opts = {
			
			range: 180,
			baseConnections: 3,
			addedConnections: 5,
			baseSize: 5,
			minSize: 1,
			dataToConnectionSize: .4,
			sizeMultiplier: .7,
			allowedDist: 40,
			baseDist: 40,
			addedDist: 30,
			connectionAttempts: 100,
			
			dataToConnections: 1,
			baseSpeed: .04,
			addedSpeed: .05,
			baseGlowSpeed: .4,
			addedGlowSpeed: .4,
			
			rotVelX: .003,
			rotVelY: .002,
			
			repaintColor: '#111',
			connectionColor: 'hsla(200,60%,light%,alp)',
			rootColor: 'hsla(0,60%,light%,alp)',
			endColor: 'hsla(160,20%,light%,alp)',
			dataColor: 'hsla(40,80%,light%,alp)',
			
			wireframeWidth: .1,
			wireframeColor: '#88f',
			
			depth: 250,
			focalLength: 250,
			vanishPoint: {
				x: w / 2,
				y: h / 2
			}
		},
		
		squareRange = opts.range * opts.range,
		squareAllowed = opts.allowedDist * opts.allowedDist,
		mostDistant = opts.depth + opts.range,
		sinX = sinY = 0,
		cosX = cosY = 0,
		
		connections = [],
		toDevelop = [],
		data = [],
		all = [],
		tick = 0,
		totalProb = 0,
		
		animating = false,
		
		Tau = Math.PI * 2;

ctx.fillStyle = '#222';
ctx.fillRect( 0, 0, w, h );
ctx.fillStyle = '#ccc';
ctx.font = '50px Verdana';
ctx.fillText( 'Calculating Nodes', w / 2 - ctx.measureText( 'Calculating Nodes' ).width / 2, h / 2 - 15 );

window.setTimeout( init, 4 ); // to render the loading screen

function init(){
	
	connections.length = 0;
	data.length = 0;
	all.length = 0;
	toDevelop.length = 0;
	
	var connection = new Connection( 0, 0, 0, opts.baseSize );
	connection.step = Connection.rootStep;
	connections.push( connection );
	all.push( connection );
	connection.link();
	
	while( toDevelop.length > 0 ){
	
		toDevelop[ 0 ].link();
		toDevelop.shift();
	}
	
	if( !animating ){
		animating = true;
		anim();
	}
}
function Connection( x, y, z, size ){
	
	this.x = x;
	this.y = y;
	this.z = z;
	this.size = size;
	
	this.screen = {};
	
	this.links = [];
	this.probabilities = [];
	this.isEnd = false;
	
	this.glowSpeed = opts.baseGlowSpeed + opts.addedGlowSpeed * Math.random();
}
Connection.prototype.link = function(){
	
	if( this.size < opts.minSize )
		return this.isEnd = true;
	
	var links = [],
			connectionsNum = opts.baseConnections + Math.random() * opts.addedConnections |0,
			attempt = opts.connectionAttempts,
			
			alpha, beta, len,
			cosA, sinA, cosB, sinB,
			pos = {},
			passedExisting, passedBuffered;
	
	while( links.length < connectionsNum && --attempt > 0 ){
		
		alpha = Math.random() * Math.PI;
		beta = Math.random() * Tau;
		len = opts.baseDist + opts.addedDist * Math.random();
		
		cosA = Math.cos( alpha );
		sinA = Math.sin( alpha );
		cosB = Math.cos( beta );
		sinB = Math.sin( beta );
		
		pos.x = this.x + len * cosA * sinB;
		pos.y = this.y + len * sinA * sinB;
		pos.z = this.z + len *        cosB;
		
		if( pos.x*pos.x + pos.y*pos.y + pos.z*pos.z < squareRange ){
		
			passedExisting = true;
			passedBuffered = true;
			for( var i = 0; i < connections.length; ++i )
				if( squareDist( pos, connections[ i ] ) < squareAllowed )
					passedExisting = false;

			if( passedExisting )
				for( var i = 0; i < links.length; ++i )
					if( squareDist( pos, links[ i ] ) < squareAllowed )
						passedBuffered = false;

			if( passedExisting && passedBuffered )
				links.push( { x: pos.x, y: pos.y, z: pos.z } );
			
		}
		
	}
	
	if( links.length === 0 )
		this.isEnd = true;
	else {
		for( var i = 0; i < links.length; ++i ){
			
			var pos = links[ i ],
					connection = new Connection( pos.x, pos.y, pos.z, this.size * opts.sizeMultiplier );
			
			this.links[ i ] = connection;
			all.push( connection );
			connections.push( connection );
		}
		for( var i = 0; i < this.links.length; ++i )
			toDevelop.push( this.links[ i ] );
	}
}
Connection.prototype.step = function(){
	
	this.setScreen();
	this.screen.color = ( this.isEnd ? opts.endColor : opts.connectionColor ).replace( 'light', 30 + ( ( tick * this.glowSpeed ) % 30 ) ).replace( 'alp', .2 + ( 1 - this.screen.z / mostDistant ) * .8 );
	
	for( var i = 0; i < this.links.length; ++i ){
		ctx.moveTo( this.screen.x, this.screen.y );
		ctx.lineTo( this.links[ i ].screen.x, this.links[ i ].screen.y );
	}
}
Connection.rootStep = function(){
	this.setScreen();
	this.screen.color = opts.rootColor.replace( 'light', 30 + ( ( tick * this.glowSpeed ) % 30 ) ).replace( 'alp', ( 1 - this.screen.z / mostDistant ) * .8 );
	
	for( var i = 0; i < this.links.length; ++i ){
		ctx.moveTo( this.screen.x, this.screen.y );
		ctx.lineTo( this.links[ i ].screen.x, this.links[ i ].screen.y );
	}
}
Connection.prototype.draw = function(){
	ctx.fillStyle = this.screen.color;
	ctx.beginPath();
	ctx.arc( this.screen.x, this.screen.y, this.screen.scale * this.size, 0, Tau );
	ctx.fill();
}
function Data( connection ){
	
	this.glowSpeed = opts.baseGlowSpeed + opts.addedGlowSpeed * Math.random();
	this.speed = opts.baseSpeed + opts.addedSpeed * Math.random();
	
	this.screen = {};
	
	this.setConnection( connection );
}
Data.prototype.reset = function(){
	
	this.setConnection( connections[ 0 ] );
	this.ended = 2;
}
Data.prototype.step = function(){
	
	this.proportion += this.speed;
	
	if( this.proportion < 1 ){
		this.x = this.ox + this.dx * this.proportion;
		this.y = this.oy + this.dy * this.proportion;
		this.z = this.oz + this.dz * this.proportion;
		this.size = ( this.os + this.ds * this.proportion ) * opts.dataToConnectionSize;
	} else 
		this.setConnection( this.nextConnection );
	
	this.screen.lastX = this.screen.x;
	this.screen.lastY = this.screen.y;
	this.setScreen();
	this.screen.color = opts.dataColor.replace( 'light', 40 + ( ( tick * this.glowSpeed ) % 50 ) ).replace( 'alp', .2 + ( 1 - this.screen.z / mostDistant ) * .6 );
	
}
Data.prototype.draw = function(){
	
	if( this.ended )
		return --this.ended; // not sre why the thing lasts 2 frames, but it does
	
	ctx.beginPath();
	ctx.strokeStyle = this.screen.color;
	ctx.lineWidth = this.size * this.screen.scale;
	ctx.moveTo( this.screen.lastX, this.screen.lastY );
	ctx.lineTo( this.screen.x, this.screen.y );
	ctx.stroke();
}
Data.prototype.setConnection = function( connection ){
	
	if( connection.isEnd )
		this.reset();
	
	else {
		
		this.connection = connection;
		this.nextConnection = connection.links[ connection.links.length * Math.random() |0 ];
		
		this.ox = connection.x; // original coordinates
		this.oy = connection.y;
		this.oz = connection.z;
		this.os = connection.size; // base size
		
		this.nx = this.nextConnection.x; // new
		this.ny = this.nextConnection.y;
		this.nz = this.nextConnection.z;
		this.ns = this.nextConnection.size;
		
		this.dx = this.nx - this.ox; // delta
		this.dy = this.ny - this.oy;
		this.dz = this.nz - this.oz;
		this.ds = this.ns - this.os;
		
		this.proportion = 0;
	}
}
Connection.prototype.setScreen = Data.prototype.setScreen = function(){
	
	var x = this.x,
			y = this.y,
			z = this.z;
	
	// apply rotation on X axis
	var Y = y;
	y = y * cosX - z * sinX;
	z = z * cosX + Y * sinX;
	
	// rot on Y
	var Z = z;
	z = z * cosY - x * sinY;
	x = x * cosY + Z * sinY;
	
	this.screen.z = z;
	
	// translate on Z
	z += opts.depth;
	
	this.screen.scale = opts.focalLength / z;
	this.screen.x = opts.vanishPoint.x + x * this.screen.scale;
	this.screen.y = opts.vanishPoint.y + y * this.screen.scale;
	
}
function squareDist( a, b ){
	
	var x = b.x - a.x,
			y = b.y - a.y,
			z = b.z - a.z;
	
	return x*x + y*y + z*z;
}

function anim(){
	
	window.requestAnimationFrame( anim );
	
	ctx.globalCompositeOperation = 'source-over';
	ctx.fillStyle = opts.repaintColor;
	ctx.fillRect( 0, 0, w, h );
	
	++tick;
	
	var rotX = tick * opts.rotVelX,
			rotY = tick * opts.rotVelY;
	
	cosX = Math.cos( rotX );
	sinX = Math.sin( rotX );
	cosY = Math.cos( rotY );
	sinY = Math.sin( rotY );
	
	if( data.length < connections.length * opts.dataToConnections ){
		var datum = new Data( connections[ 0 ] );
		data.push( datum );
		all.push( datum );
	}
	
	ctx.globalCompositeOperation = 'lighter';
	ctx.beginPath();
	ctx.lineWidth = opts.wireframeWidth;
	ctx.strokeStyle = opts.wireframeColor;
	all.map( function( item ){ item.step(); } );
	ctx.stroke();
	ctx.globalCompositeOperation = 'source-over';
	all.sort( function( a, b ){ return b.screen.z - a.screen.z } );
	all.map( function( item ){ item.draw(); } );
	
	/*ctx.beginPath();
	ctx.strokeStyle = 'red';
	ctx.arc( opts.vanishPoint.x, opts.vanishPoint.y, opts.range * opts.focalLength / opts.depth, 0, Tau );
	ctx.stroke();*/
}

window.addEventListener( 'resize', function(){
	
	opts.vanishPoint.x = ( w = c.width = window.innerWidth ) / 2;
	opts.vanishPoint.y = ( h = c.height = window.innerHeight ) / 2;
	ctx.fillRect( 0, 0, w, h );
});
window.addEventListener( 'click', init );
	</script>
	</body>
</html>

Link:
Hide post links
Show post links


回复