islighting

前段时间的成果，伙同产品、设计一起加工出来的demo

webgl，canvas，svg，各种前端技术能用上的，都用上了

音乐 Tydi –  The Camera Doesnt Lie But You Do (Original Mix)

线上地址 -< 点此，用chrome观看

没有什么能够比在熟悉的语言环境中做所有事更爽的了。nodejs的出现，给了前端众更广阔的发展空间，花点心思，就能从前到后完整的构建一个应用。而对于我来言，初衷其实很简单，在服务器端用最低的成本拥有和文件系统直接打交道的能力。

StarGate最初的功能是要同步腾讯微博/新浪微博，实现到一半时想法有变，大概因为最近视觉信息的内容看了不少，手痒想实践一把。同步的功能后面会陆续添加，以及发微博的时间/节点/传播途径等等，想法很多，逐步实现。

作为一个视觉控，自然在表现上会想要雕琢一番，正好前段时间研究的webgl可以派上用场。表现层使用了three.js，three.js是一个轻量级的webgl框架，有多种渲染引擎，webgl，canvas，svg。前段时间很火的webgl mv 3 black heart就使用了three做为骨架来构建场景。

在后端，数据库使用了天生和nodejs很搭的mongodb，用mongoose + express搭建后端应用，再用socket.io传输数据，这样，一个应用就跑起来了。。。

附上视频：

浏览器上的动画，通常都是用定时器完成，每隔一段时间改变一下元素属性。但是定时器太古板，不管是否当前标签，都会吃掉部分cpu资源。所幸现代浏览器对开发者友好，将这些脏活抗了去，还做了优化。现在，我们要做的只是调用API，就能减少动画过程中的repaint、reflow，减少cpu占用。

废话不多说，直接上代码

// shim layer with setTimeout fallback
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              window.oRequestAnimationFrame      ||
              window.msRequestAnimationFrame     ||
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

    // usage:
    //

…

Things的备份

Things是我一直在Mac上使用的GTD软件，相当好用。不过可惜的是，它不支持多台Mac的同步，所以只好自己来搞一个简单的同步+备份。当然云端同步的功能开发者貌似也是在开发中，也许不久之后就能用上。

在开发中，有时会碰到一些很重的交互，比如一个带焦点的对话框，在对话框中有内容的搜索、筛选、选择等等。这时候常用的浮动层模拟对话框就显得不那么适用了，尝试用一下showModalDialog。

鼠标在桌面上的二维运动反映为光标在屏幕上的二维运动。当所处理的对象是一个二维形体时，鼠标的二维运动可以一一映射到二维形体上，从而方便地实现几乎所有需要的操作。但是当交互所关注的对象是一个三维物体时，二维屏幕与三维形体之间的矛盾就曝露出来了，ArcBall算法可以解决此矛盾。

最近看的书，大概都是跟信息视觉化和互动有关。书看的多了，却越来越感觉到自己所知之渺小。从原来的圈子跳出来，这世界会有另外一番景象。

传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在标签里面进行添加:

这些文件用这种方式会同步加载到当前这个页面。

现在用动态的方式载入JavaScript/Css文件：

* 用 DOM createElement 方法创建一个 “script” 或者 ”link” 元素
* 设置相应的属性
* 使用 appendChild 方法, 把创建的元素插入到 head 标签的末尾