香草'誌 II

增强现实（Augmented Reality，简称AR），是近年来国外众多知名大学和研究机构的研究热点之一。

这种技术是透过计算机图形处理和可视化技术，将虚拟的信息应用到真实世界，真实的环境和虚拟的物体实时地叠加到了同一个画面或空间同时存在。产生强大的视觉冲击，创造一种神秘，新奇的用户体验。增强现实互动提供了在一般情况下，不同于人类可以感知的信息。它不仅展现了真实世界的信息,而且将虚拟的信息同时显示出来，两种信息虚实结合、实时交互、并有三维立体的优势。

增强现实互动技术对于网络广告而言，能够带来更多新奇的应用和价值。他能创造不同于传统的用户操作经验。竟如一般网络广告或者网站界面，使用者仅仅是透过简单的输入、点击来完成操作，获取一些文字或者多媒体信息。然而透过运用一些新的webcam互动，使用者可以用自己的肢体动作，在一种轻松活泼的娱乐环境中，透过触碰，试装，等等操作与产品或者品牌更近距离的接触，获得更真实的体验。

最近一些国外的网络活动或者甚至是一些RIA购物网站已经开始尝试使用增强现实互动来吸引消费者的眼球，(图1)是变形金刚2的一个叫《WE ARE AUTOBOTS》的网络活动，采用webcam人脸识别技术，将虚拟的机器人头型投射在使用者的脸部，让使用者身临其境，体验当变形金刚的感觉。

（图1）http://www.weareautobots.com/ww/index.php

下面一个案例是Zugara公司借助一个叫做“webcam social shopper”（网络摄像头在线社交导购）的工具，让你借助摄像头、互联网，试穿服装，实时展现穿着效果，同时可以通过SNS网站比如Facebook、Twitter等与朋友交流，让你的网络购物体验如同现实生活中一样。

在这个购物网站案例，充分展现增强现实互动技术的优势，提供了传统购物网站无法匹敌的友善、真实的购物体验，同时对商家而言，也增加了销售量。

（图2）http://www.zugara.com/

AR或许是未来的互动方式的趋势，随着PC和传感器的发展，应该会有更超酷，超亲和力的互动技术萌生吧:)

Frocessing使用字型的方法和Processing稍微有些不同，
Processing使用PFont类来处理文字和加载字型，提供loadFont(font_filename)方法来加载Processing特定的字型文件，*.vlw格式。

vlw是Processing自带一个把系统字型转换成Processing统一的，矢量的字型档格式，可以参考下图，

在Frocessing里面 同样移植了这一个特性，并创建了一个叫PFontLoader的类，负责加载和处理vlw档，功能和PFont的loadFont完全一样。

首先，你要用Processing 文字创建器生成一个vlw文件，然后就可以使用loadFont使用啦:

size(550,400);

//frocessing 移植了PFont的loadFont，
//并用一个叫PFontLoader的subclass来处理
//加载外部字型文件
var fontA = loadFont("04b08-32.vlw");

function draw() {
    background(0);
   
    //设置文字填色为灰阶255
    fill(255);   
   
    //设置文字对齐方式
    textAlign(CENTER);
   
    //设置文字字型是04b08，字型大小是32   
    textFont(fontA, 32);
   
    //在场景中心绘制 Hello World
    text("Hello World",width/2, height/2);
}

范例下载：http://spinning.drivehq.com/frocessing/lesson_03/lesson_03_loadfont.rar

不过，大多数朋友应该不会有Processing，所以frocessing狠人性的提供了一些小工具，比如提供了一个FontUtil的类，可以将five3D提供的矢量字型类转换成frocessing FFont所用的byteArray。下面来看下实际使用。

import five3D.typography.HelveticaBold;

import frocessing.text.FontUtil;
import frocessing.text.FFont;

//初始化five3d的HelveticaBold字型
HelveticaBold.initialize();

//用FontUtil把five3D的字型转换成FFont的格式
var ffontData = FontUtil.convertFive3DTypo(HelveticaBold);

//用ffont bytearray 创建FFont字型实例
var ffontA = new FFont(ffontData)

size(550,400);

function draw() {
    background(0);
   
    //设置文字填色为灰阶255
    fill(255);   
   
    //设置文字对齐方式
    textAlign(CENTER);
   
    //设置文字字型是04b08，字型大小是32   
    textFont(ffontA, 32);
   
    //在场景中心绘制 Hello World
    text("Hello World",width/2, height/2);
}

范例下载：http://spinning.drivehq.com/frocessing/lesson_03/lesson_03_convert_font.rar

focessing绘制的字型不单单是2D的，而且可以绘制3D的字型。
那我们就来参考Processing的一个小范例来看下frocessing是如何实现，网址是这里，先花1分钟看下那个效果http://processing.org/learning/3d/kinetictype.html

frocessing部分，我使用了嵌入five3d 的HelveticaBold字型的方式，除此之外和Processing版本都一模一样。

import five3D.typography.HelveticaBold;

import frocessing.text.FontUtil;
import frocessing.text.FFont;

//初始化five3d的HelveticaBold字型
HelveticaBold.initialize();

//用FontUtil把five3D的字型转换成FFont的格式
var ffontData = FontUtil.convertFive3DTypo(HelveticaBold);

//用ffont bytearray 创建FFont字型实例
var ffontA = new FFont(ffontData)

//设置字型
textFont(ffontA, 1);

//设置文字着色
fill(255);

//设置场景大小
size(640, 360);

////////////////////////////////////////////////////////////////////////////////////////////////////////////

var ln;
var lns = new Array();

var words:Array = ["sometimes it's like", "the lines of text", "are so happy", "that they want to dance",
"or leave the page or jump", "can you blame them?", "living on the page like that",
"waiting to be read..."];

// Array of line objects
lns = new Array(8);

// Creating the line objects
for (var i = 0; i < 8; i++) {
    // For every line in the array, create a Line object to animate
    // i * 70 is the spacing
    ln = new Line(this,words[i], 0, i * 70);
    lns[i] = ln;
}

var angle = 0;

function draw() {
    
    background(0);

    translate(-200, -50, -450);
    rotateY(0.3);

    // Now animate every line object & draw it...
    for (var i = 0; i < 8; i++) {
        var m = millis();
        var f1 = sin((i + 1.0) * (angle) * TWO_PI);
        var f2 = sin((8.0 - i) * (angle) * TWO_PI);
        var line = lns[i];
        pushMatrix();
        translate(0.0, line.yPosition, 0.0);
        for (var j = 0; j < line.myLetters.length; j++) {
            if (j != 0) {
                translate(textWidth(line.myLetters[j - 1].myChar) * 75, 0.0, 0.0);
            }
            rotateY(f1 * 0.005 * f2);
            pushMatrix();
            scale(75.0);
            text(line.myLetters[j].myChar, 0.0, 0.0);
            popMatrix();
        }
        popMatrix();
    }
    
    angle+=.005;
}

范例预览：http://spinning.drivehq.com/rec/preview.html?url=lesson_03_kineticType.swf&width=640&height=360
范例下载：http://spinning.drivehq.com/frocessing/lesson_03/lesson_03_kineticType.rar

Processing里面有一个狠好用的pushMatrix，popMatrix组合，功能是把当前变换矩阵到矩阵堆栈，pushMatrix()函数保存当前坐标系统到栈,使用popMatrix()函数来恢复到前一个坐标系统状态。 pushMatrix和popMatrix可以在2D环境中保持rotate()，scale()和translate()状态，在3D环境中 还有rotateX(),rotateY(),rotateZ()。

Transform部分的具体函数使用可参考Procesing语法：
applyMatrix()
popMatrix()
printMatrix()
pushMatrix()
resetMatrix()
rotate()
rotateX()
rotateY()
rotateZ()
scale()
translate()

在3D环境中，Processing具有简单的camera控制方法，用来设置调整Camera的镜头来影响画面的投射状态，

Camera控制部分的具体函数使用可参考Processing语法:
beginCamera()
camera()
endCamera()
frustum()
ortho()
perspective()
printCamera()
printProjection()

以上函数frocessing都有完整移植 :) 先来看下pushMatrx＋popMatrix简单好用的小范例，画一个10×10的正方形矩阵，并随着mouse互动，会绕X轴，Y轴旋转。

size(550,400);

function draw() {
    background(0);
   
    //设置绘制模式 是无描线，填色#ff0000
    noStroke();
    fill(255,0,0);
   
    //开始设置全局的transform matrix
    pushMatrix();
   
    //移动到场景中心
    translate(width/2,height/2,0);
   
    //设置Y轴旋转
    rotateY((mouseX-width/2)/180*PI);   
   
    //设置X轴旋转
    rotateX((mouseY-height/2)/180*PI);   
   
    //开始画100个小正方形
    for (var i=0; i<10; i++) {
        for (var j=0; j<10; j++) {
           
            //设置每一个小正方形的坐标
            pushMatrix();
            translate(i*12-60,j*12-60,0);
            drawWall();
            popMatrix();

        }
    }
    popMatrix();
}

function drawWall() {
    beginShape();
    vertex3d(0, 0,0);
    vertex3d(10, 0,0);
    vertex3d(10, 10,0);
    vertex3d(0, 10,0);
    endShape();
}

再来看一下简单控制camera的范例：

size(640, 360);
fill(204);

function draw() {
    background(0);

    // 设置camera的高度
    camera(30.0, mouseY, 220.0, // eyeX, eyeY, eyeZ
      0.0, 0.0, 0.0, // centerX, centerY, centerZ
      0.0, 1.0, 0.0); // upX, upY, upZ

    noStroke();

    //画一个90×90×90的立方体
    box(90);

    stroke(255);

    //绘制x，y，z轴向法线
    line3d(-100, 0, 0, 100, 0, 0);
    line3d(0, -100, 0, 0, 100, 0);
    line3d(0, 0, -100, 0, 0, 100);
}

更多的就自己研究咯~

在我看到很多Processing大师的作品，比如很多realtime的光影变换互动，基本都是对HSB模式的应用。这也是为什么第二篇教程要写关于HSB 色彩模式。在我们用习惯了RGB模式之后，让我们来看看HSB模式在互动上独特的效果优势。

首先要介绍一下HSB，HSB表色系统表示颜色的方法是将任一颜色用三个变量来表示，H表示色度，即该色为红，绿还是紫色等，它是人眼对不同波长光波的反应，也是颜色最基本的内容；S表示饱和度，是指颜色中含有多少灰成分；B是亮度，表示颜色的亮与暗。在同一种色度的物质，程序上对不同的光线强弱的表达，只需要简单设置B就可以轻松的实现，比如一些丝带，毛发光效，等等。

那就来看看HSB在frocessing里面的一些实现。

Processing里面提供了一个方法叫colorMode 用来设置fill，stroke，或者color等函数所使用的颜色的模式，具体可以点击http://processing.org/reference/colorMode_.html
同样，frocessing也移植了这一个特性。在frocessing 应用中同样可以使用colorMode来设置颜色系统，如他的范例：

运行结果如下图所示

那这和光影有什么关系呢？

比如类似这种光影的变化，参考toxi大师的原话来说，

// setting color mode here
colorMode(HSB, 360);

…

// check if line’s angle is currently on the bright or dark side
// the light direction is set to 340 degrees
// the closer the line’s angle is to the light’s, the brighter its colour
if (angle>70 && angle<250){
   stroke(hue, sat,bri+angle*1.5,20);
}else {
   // find distance to light and normalize to use as impact factor
   var f=Math.abs(340-(angle<90 ? angle+360 : angle))/90;
   // base colour on factor
   // colour desaturates and brightens towards the light
   parent.stroke(hue, sat*(0.5+f/2),bri+angle*(2-f),20+(1-f)*20);
}
// draw longer lines
line(x1,y1, x2, y2);

透过计算光线与线条夹角得到B，然后用HSB模式把光影效果体现出来。
Processing版本可以参考这里：http://toxi.co.uk/p5/remixed/hair/

Frocessing版本可以PM我，我网盘暂时爆炸 Orz

在你想知道什么是frocessing和为什么有frocessing之前,请先花简单1分钟的时间看一下
(1)frocessing的老祖宗:http://vanillaloveyou.spaces.live.com/blog/cns!9EEAD40C443BB757!363.entry
(2)frocessing的介绍:http://vanillaloveyou.spaces.live.com/blog/cns!9EEAD40C443BB757!445.entry

其实基于processing简单的语法和人性化的设计初衷，移植到AS3版的frocessing自然是优势重重。frocessing beta完整的移植的processing 2D的功能，还有processing 3D的部分功能，除了光影部分，还有一些绘制细节上的差异（以后会说）之外。

这篇入门主要会讲如何使用frocessing class制作第一个小互动。

(开始咯)

新建一个Flash Document，Actionscript Version 3.0
并设置Document class为：frocessing.display.F5MovieClip2D

（图1）

这里的F5MovieClip2D，是类似Processing里面的 size方法设置绘制模式的一种手段。
Processing里面的Java2D和P2D模式，对应与frocessing里面的 F5MovieClip2D。
相对应的，P3D模式对应于frocessing的F5MovieClip3D。具体使用之后的教程会详细讲到。

当然，你也可以使用Linkage的方式，如图二，设置一个movieclip的Base class。

（图2）

接下来，你的Flash已经继承了frocessing的class了，你可以完全随意的使用frocessing里面的功能。

（图3）

function draw，对应于 Processing的 void draw
是一个EnterFrame会执行的function，Processing主要的一些程序段会写在这个功能模块里面，在frocessing内核侦听到ADD_TO_STAGE事件之后，自动会addEventListener ENTER_FRAME 来执行draw，具体可以check他的source，我不在这里细究。

frocessing里面同样移植了size(width:int,height:int) 但是基本没有功能。Processing里面的size是用来设置Java 应用程序窗体的大小，Flash 基本使用IDE的场景大小设定，无需再使用size，同样的frocessing没有移植frameRate功能，也是同样的道理。

同样用于初始化的setup在frocessing里面虽然有保留，但是基本没有功能，完全可以直接在代码上撰写初始化

（图4）

基本上就那样，那么一件最简单鼠标跟踪的互动好了

import flash.geom.Point;

//老套的参数设置
var spring:Number = 0.1;
var friction:Number = 0.8;

var vx:Number = 0;
var vy:Number = 0;

var pnt:Point = new Point();

function draw(){
    //设置场景为黑色
    background(0);
   
    //设置绘制模式是没有描边，填色灰阶255
    noStroke();
    fill(255);
   
    //老套的写法
    var ax:Number = (mouseX - pnt.x) * spring;
    vx += ax;
    vx *= friction;
   
    var ay:Number = (mouseY - pnt.y) * spring;
    vy += ay;
    vy *= friction;
   
    pnt.x += vx;
    pnt.y += vy;
   
    //画一个圆
    ellipse(pnt.x , pnt.y, 55, 55);
   
}

就是这么简单~ 这篇教程还看不出frocessing强大的地方，就等我慢慢来写咯

范例原始码下载:http://spinning.drivehq.com/frocessing/lesson_00/lesson_00_hello_world.rar

ps. 由于最近网盘一直流量爆满，所以下载不到，可以PM我。

最近用five3d做的一个小案子，本来想很简单，没有打算用away3d，所以在处理3d ui的时候，遇到了一些小波折。
总体来说five3d还是比较类似CS4 3D的做法，简单，不过他引擎本身一些Z-Order上和Clipping的一些缺陷，让显示效果变的不是狠优。总体来说也算是第一个全3D UI的案子，虽然后来被改的乱七八糟，Tweener＋3D还是狠简单，好用。

检视地址：http://chanelmetiersdart.ellechina.com/

 
最近AR铺天盖地，这虽然是10年前的技术，但是自从被Flash化之后，突然一下子冒了出来。
不过简单的AR，还不够增强现实，我加入了物理引擎的模拟，希望在互动过程中创造更棒的乐趣 :)

这个video只是非常非常简单的演示，AR＋物理对我来说还有很多细节要去学习和实验，但我爱这个组合 ~

检视地址：http://b02211134.deviantart.com/gallery/#Sanya-2009

本来还想自己写collada for processing的，不过maya export的fbx和dae档好似都不是很正常，所以后来干脆白痴的把每祯export成了vrml2，然后在3d max修整一下再export成obj。一个48祯的动画，我只做了17祯就手软了，一则电脑开太多软体，二则岁月不饶人，我应该请个民工来打打杂了。

3D直接用processing的OPENGL模式绘制，一个frame的obj有16m，加上内建的光影效果，和显卡的圆滑抗拒齿处理，效果真的很好呢。
30fps，可惜CPU吃满，内存也吃很多，还没有阴影和ray trace。感觉3D 即时真的是一条慢慢长路啊。

老了，囧rz