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:
    // instead of setInterval(render, 16) ....

    (function animloop(){
      render();
      requestAnimFrame(animloop, element);
    })();

参考： requestAnimationFrame for smart animating

Things的备份

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

Things的数据保存在  <your home folder>/Library/Application Support/Cultured Code/Things/database.xml

用google storage来备份那是相当方便了。。附上things的备份还原faq

gsutil [-d][-D] [-h header]… [command args...]

1. -d [option] http请求详细信息
2. -h [option] http头，设置Content-Type等，具体参照http协议。

cp [-a canned_acl] [-R] [-t] [-z extensions] uri… dst_uri –用于上传/下载文件

• -a    acl有4个选项，分别为[public-read]、[public-read-write]、[authenticated-read]、[bucket-owner-read]、 [bucket-owner-full-control]
• -R   把该目录及其子目录所有文件都上传到gs
• -z     gzip方式压缩(主要用于html、txt、css等文件)

public-read表示权限为任何人可读(默认不可读)。public-read-write 可读可写，其他的也不用说了吧？演示：

gsutil cp -a public-read demo.html   gs://buckets    –将demo.html上传，并权限为所有人可读.

gsutil cp -a public-read-write demo.html     gs://buckets     —同理

gsutil cp -a public-read -R ./images  gs://buckets   –把当前的images目录及其子目录下所有文件上传，并权限为所有认可读。

下载和上传没什么两样，就是本都目录和gs目录调换一下就行了。

cp  gs://buckets/img.jpg   file://dir cp参数也支持用正则表达式，如
gsutil cp gs://mybucket/[a-f]*.doc localdir

注意：cp命令不能以gsutil cp img.jpg   gs://bucket/img/img.jpg  这样的方式上传，即不能直接上传到bucket的某个文件夹。要实现这个功能，必须在本地创建一个和服务器一样的文件夹，再进行上传，如bucket有 个img的文件夹，你就在本地创建一个img，然后按以下方式更新文件

gsutil cp ./img/img.jpg  gs://bucket/img/img.jpg

一定要以上面的方式，最后的img.jpg可以任意改名，但一定要有。cp命令可以用-a参数。

如果你在上传的时候忘记用-a参数设置权限，之后可以用setacl 命令来修改，具体为

setacl acl_name uri… 如

setacl  public-read gs://bluckets/img.jpg

其他基本的可以用 gsutil –help 来查看帮助

在开发中，有时会碰到一些很重的交互，比如一个带焦点的对话框，在对话框中有内容的搜索、筛选、选择等等。这时候常用的浮动层模拟对话框就显得不那么适用了，尝试用一下showModalDialog。showModalDialog本是ie4+时候的用法，Firefox在3.0开始支持。MDC里面有说明和简单的示例。

用法如下：

参数说明：
sURL
必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
dialogHeight 对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
dialogWidth: 对话框宽度。
dialogLeft: 距离桌面左的距离。
dialogTop: 离桌面上的距离。
center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

可以在传vArguments的时候传父页面的window对象进去，这样在子页面也能调用父页面的全局方法，例如关闭时刷新父页面的指定区域。vReturnValue是子页面返回值。

具体使用时传入了父页面的window，结果f5刷新的时候发现被刷掉了，还是老老实实拼了url传过去，处理完成之后用vReturnValue回传结果。

鼠标在桌面上的二维运动反映为光标在屏幕上的二维运动。当所处理的对象是一个二维形体时，鼠标的二维运动可以一一映射到二维形体上，从而方便地实现几乎所有需要的操作。但是当交互所关注的对象是一个三维物体时，二维屏幕与三维形体之间的矛盾就曝露出来了，ArcBall算法可以解决此矛盾。ArcBall是一种允许用户使用鼠标调整方位的三维交互技术。ArcBall的设计不平常在于，在考虑数学基础的同时，将操作反馈很好地结合起来，解决了鼠标调整空间方位的难题。和其他的一些技术相比，在通用的旋转控制器方面，ArcBall更容易使用，也更容易操作，且具有更强的功能。使用ArcBall作为鼠标三维交互控制器，其最大的特点是能很容易计算旋转轴和旋转角度。除外，能把窗口的二维空间转化为三维单位球空间，能让模型沿着Z轴或者其他轴进行平移等等。
ArcBall主要实现了，用户通过在窗口中拖动鼠标来旋转观察目标。可以想象成一个单位半球位于窗口中心，该单位半球的圆心为原点，当X*X+Y*Y<1时，Z=sqrt(1-X*X-Y*Y)，X*X+Y*Y>=1时，Z=0。鼠标按下时产生起始点，松开时产生结束点，这两点可经过相关算法转化为半球空间上的两点，设这两点与圆心所构成的角度为the弧度。当此两点都落在半球时（Z>0），则其旋转轴与这两点和圆心所构成的平面垂直，其旋转的角度为2倍the弧度；当鼠标的起始点和结束点都落在半球外时（Z=0），则其旋转轴为Z轴，旋转角度为同样为2倍the弧度。
由此根据ArcBall的原理，我们可以知道ArcBall是由最初的窗口空间转换为单位球空间，然后再由单位球空间转换为模型空间（变换矩阵）。窗口空间到单位球空间的转换是把窗口两点的坐标单位化为球面上的两点转换为半球面上的两点，算法如下：

单位球空间到模型空间转换可以计算出旋转轴和旋转角度，从而得到变换矩阵。该转换可以通过四元数来实现。一个联合的四元数q=[v, w]=[x, y, z, w]由两个部分组成，一个是数量w，它等于cosθ/2，其中θ是旋转的角度，一个是向量v，它等于沿着旋转轴的向量的sinθ/2倍。两个四元数运算的结果就是它们旋转组合的结果，这样旋转组合操作就可以采用四元数叉乘来表示。ArcBall获取转换四元数的计算公式如下：

[q.x, q.y, q.z] = V3_Cross[p0, p1];
q.w = V3_Dot[p0, p1];
TM = QuatToMatrix(q);

其中q表示四元数，p0和p1表示旋转的起始点和结束点（可以通过转换一获得）；V3_Cross表示向量的叉积，它记录了旋转的轴的方向；V3_Dot表示向量的点积，它记录了旋转的角度；TM表示旋转矩阵，QuatToMatrix把四元数转换为矩阵。