[Processing]Opencv動態臉部追蹤

win7安裝Opencv for Processing(64bit)

1、安裝 runtime components for Microsoft Visual C++ 2010

http://www.microsoft.com/en-us/download/details.aspx?id=5555(x86)
http://www.microsoft.com/en-us/download/details.aspx?id=14632(x64)

2、下載Opencv，解壓縮 ex: C:\Opencv\

http://sourceforge.net/projects/opencvlibrary/files/opencv-win/2.3.1/OpenCV-2.3.1-win-superpack.exe/download

3、把dll的路徑加入到window7之中

可以使用RapidEE，在PATH路徑下加入:

C:\opencv\build\x64\vc10\bin\

C:\opencv\build\x64\vc10\lib\

C:\opencv\build\common\tbb\intel64\vc10\

P.S.如果你的系統是win7 32bit的版本的話,路徑x64的部分要改成x86,例如上面的第一條路徑就要改成

C:\opencv\build\x86\vc10\bin\ 這樣

而且要新增加一條路徑是

C:\opencv\build\common\tbb\ia32\vc10\

4、下載JavacvPro的library，解壓縮至/Mode/java/libraries

http://www.mon-club-elec.fr/mes_downloads/javacvPro-0.3.zip

http://sourceforge.net/projects/gsvideo/files/opencv/javacvPro-0.5-macosx64.zip/download

5、下載最新版本的JavaCV library，解壓縮到 {path-to-Processing}/Mode/java/libraries

新增一個資料夾叫做library在javacv-bin這個資料夾裡面,並且把剛剛資料夾裡所有的檔案都放進去把javacv-bin這個資料夾的名字改成javacv

http://javacv.googlecode.com/files/javacv-bin-20120329.zip

6、下載最新的Javacpp library ，解壓縮到:{path-to-Processing}/Mode/java/libraries

新增一個資料夾叫做library在javacpp-bin這個資料夾裡面,並且把剛剛資料夾裡所有的檔案都放進去把javacpp-bin這個資料夾的名字改成javacpp

Reference:

http://shengpo.logdown.com/posts/69934-processing-opencv-2-on-windows

FaceDetect

https://drive.google.com/file/d/0B3iLa8F71LQwWTljT3UxejlYZ1k/view?usp=sharing

[kinect]安裝Kinect for Processing 大絕招

1、安裝包:ZigSOpenNI2、SimpleOpenNI丟Processing3、安裝Kinect SDK 1.7

2、以Processing 2.1.2版本測試

• Download

[Web]JS表單篇

• 圖片送出按鈕

<a href="javascript:form1.submit();">    <img src="img.jpg"</a>

• 重設按鈕

<a href="javascript:form1.reset();">    <img src="img.jpg"</a>

• 允許/禁止 訪問表單

document.form1.disabled = true / false;

讀取表單所有名稱

form1.elements.lengthform1.elements[i].name

• 驗證是否輸入是否為數字

var num = "0123456789"var str = form.id.value;for(i=0;i<str.length;i++){    if(num.indexOf(str.charAt(i))== -1)}

• 使用鍵盤快速選取欄位

<form>    <label for="Namebox" accessKey="N"><u>N</u>ame:</label>    <input type="text" id="Namebox"></form>

• 文字欄位取得focus

<input type="text" id="txID">form.txID.focus();

• 選取文字欄位中的文字

form.ID.focus();form.ID.select();

• 改變文字欄位中的顏色

<input type="text" value="HERE" onMouseOver = "this.style.color = 'red' ">

• 改變文字欄位中的背景顏色

<input type="text" value="HERE" onMouseOver = "this.style.background= 'red' ">

• 改變文字欄位中的1邊框顏色

<input type="text" value="HERE" onMouseOver = "this.style.borderColor= 'red' ">

• 文字欄位自動調整大小

onKeyPress = "autoWidth()"str = form.ID.value;if(str.length !=0){    form.ID.size = str.length;}

• 改變文字欄位中的對齊方式

form.Id.style.textAlign = left/center/right;

• 製作Google搜尋表單

<form id="fm1_Id" action="http://www.google.com/search"> <input name="q" id="searchWord" > <br> <input type="submit" value="搜尋"></form>

• 檢驗一組按鈕的選擇狀態

<form id="form1"><input name="sex" type="radio" checked>男<input name="sex" type="radio" >女</form>
form1.sex[0].checked  form1.sex[1].checked  

• 核取方塊狀態

form1.id[i].checked

• 帶標籤的核取方塊

<input type="checkbox" id="ch1"><label for="ch1" > 標籤 </label>

• 取得下拉選單中選取的值

<form id="form1"><select id="sel1" onChange="get()"><option value="第一項">第一項</option><option value="第二項">第二項</option><option value="第三項">第三項</option></form>
form1.sel1.value

• 取得下拉選單的索引值

form1.sel1.selectedIndex

• 取得選單中的多個值

<select id="sel1" multiple>form.id[i].selected  // 看看有沒有被選到form.id[i].value

• 在新視窗中開啓網頁

open（）取代window.loction（）open(http://www.google.com);

• 取得檔案位置(含路徑)

<form id="form2" enctype="multipart/form-data" ><input type="file" id="file">  <input type="button" onClick="get()" value="FileName"></form>
form2.id.value

• 取得檔案名稱（不含路徑）

取得檔案路徑後，用split()將路徑以“\”切割，再存入陣列中，最後取出陣列的最後一項在JavaScript中插入一個反斜線必須用雙斜線表示。var fName  = form2.id.value;var fileName = new Array();fileName = fName.split("\\");fileName[fileName.length-1]

• 取得選取檔案的副檔名

取得檔案路徑後，用split()將路徑以“.”切割，再存入陣列中，最後取出陣列的最後一項
fileName = fName.split(".");

• 將選取的檔案圖片顯示出來

先判斷是不是圖檔
extname.toUpperCase() =="JPG"pic.src = fileName;  //完整路徑

• 取得選取圖片的檔案大小

先建立圖片物件，並為圖片物件指定來源，再使用物件屬性取得size
img = new Image();
img.src = fileName;
size = img.fileSize / 1024 ;  //將圖片大小轉成KB

• 取得選取圖片的寬高

img.widthimg.height

• 選取圖片作為網頁背景

document.body.backgronund = imgURL;

[Web]JS網頁事件篇

• 進入、離開網頁顯示訊息

<body onLoad="alert('歡贏')" onUnload="alert('謝謝')">

• 單擊、雙擊滑鼠事件

<input type="button" onClick="alert('單擊')"><input type="button" onDbClick="alert('雙擊')">

• 取得滑鼠的按鍵

function getButton(){    switch(event.button)    {        case 0 : alert("左鍵");break;        case 1 : alert("右鍵");break;        case 2 : alert("中鍵");break;    }}document.onmousedown  =  getButton;   //監聽器

• 滑鼠按下事件

<body onmousedown="alert('點擊')">

• 絕對禁止按滑鼠右鍵

<body onContextMenu="alert('NO') ;  return false" >

•  滑鼠控制文字滾動

<marquee direction="up" onMouseOver="this.stop()"onMosueOut="this.start()">

• 取得滑鼠座標

function getMouse(){    event.x;    event.y;}document.onmousemove = getMouse;

• 交換式圖片按鈕

<img src="img1" onMouseOver = " this.src = ' img2 ' " onMouseOut = " this.src = ' img1 ' " >

• 顯示或隱藏圖片

picID.style.visibility = 'visible'picID.style.visibility = 'hidden'

• 取得按鍵ASCII編碼

function getkeyCode(){    asc = event.keyCode;    key = String.fromCharCode(asc);}document.onkeydown = getkeyCode;  // 可以取得所有按鍵，但無法分辨大小寫document.onkeypress = getkeyCode;  //可分辨大小寫

• 前往某網頁

window.loaction.href =  "www.google.com";

• 將按下的按鍵顯示在網頁上

asc = event.keyCode;key = String.fromCharCode(asc);str += key;txt.innerHTML = str;document.onkeypress = showkey;

• 顯示不同滑鼠樣式

<div onMouseOver = "this.style.cursor='hand'">手形指標</div>

• 使用外部滑鼠樣式

靜態指標:this.style.cursor='url(img.cur)'動態指標:this.style.cursor='url(img.ani)'

• 登入密碼驗證

看網頁原始碼就破解

var password = prompt("請輸入密碼","");

• 取得頁面所有超連結地址

陣列 = document.all.tags("A");

[Web]JS實用範例辭典-視窗篇

視窗篇

• 警告對話方塊

alert("HI你好");

• 確認對話方塊

ret = confirm("可以加你朋友嗎");  //ret回傳值(true/false)

• 顯示網頁對話方塊

可以顯示一個對話方塊，此對話方塊是另一個網頁的內容

features = "dialogWidth:300px;dialogHeight:200px;status=no";  // 設定對話方塊CSS 

showModalDialog("dialog.html",window,features);

• 以頂層模式顯示網頁對話方塊

不同於showModalDialog的地方是，顯示對話方塊後還可以同時操作原本後面的網頁視窗 

features = "dialogWidth:300px;dialogHeight:300px;status-no"; 

showModelessDialog(dialog.html,window,features); 

• 取得瀏覽器視窗大小

var width = document.body.clientWidth;
var height = document.body.clientHeight + 125;  //瀏覽器網址，工具列...

• 取得螢幕大小

var width = screen.width;
var height = screen.height;

• 不能改變大小的視窗

一但改變視窗大小就觸發<body> onResize事件
<body onResize="window.resize(400,300)">

• 指定瀏覽器視窗位置

window.moveTo(200,100);  //(距離螢幕左邊的距離，距離螢幕頂部的距離)

• 震動的視窗

window.top.moveBy(0,i);    //相對移動

• 視窗縮小效果(IE)

resizeTo(width,height);
moveTo( (screen.height-height)/2 , (screen.width-width)/2 );

• 視窗自動捲動

window.scrollBy(1,0);  // 0 , 正 , 負  值的六種組合方向
<body onLoad="setInterval('window.scrollBy(0,1)',50)">

• 去掉視窗捲軸

定義body的CSS
body{overflow:scroll;overflow-x:hidden;overflow-y:hidden;}

• 讓捲軸從左邊出現

<body dir="rtl">

• 改變捲軸的樣式CSS

body
{
    scrollbar-face-color : # ffd0d0  //捲軸表單顏色
    scrollbar-highlight-color : ffffff   //高光顏色
}

• 視窗失焦事件

body
{onBlur="alert('out of focus')"}

• 彈出新網頁視窗

window.open("newPage.html");

• 彈出無屬性列網頁視窗

window.open("newPage.html","","top=100,left=300,width=300,height=200");

• 彈出視窗狀態

window.open("newPage.html',"","HERE");
fullscreen=yes  //全螢幕
menubar=yes   //功能表
toolbar=yes    //標準按鈕列，下一頁
location=yes  //網址
status=yes     //底下狀態列
scrollbar = yes  //有捲軸
resize=yes  //允許調整視窗

• 關閉視窗

self.close()
window.close()

• 在主視窗關閉彈出視窗

p = window.open('newPage.html');
p.close();

• 在彈出視窗關閉主視窗

opener.close();

• 將主視窗的資料輸出到彈出視窗

var p = window.open("receive.html","","width=300,height=200,top=300,left=800");
var msg = textID.value;
p.document.write("<p>" + msg + "</p>");

• 自動關閉視窗

setTimeout(self.close(),5000);

setTimeout(myfunction,5000);  //不可myfunction()

• Reference

JavaScript實用範例辭典-孫俊平

[unity]tag Detect

• 大綱

現在有一場景，上面有很多遊戲物件，當滑鼠點擊畫面時，我們可以得到以下資訊:1、點擊位置的座標(screenspace、worldspace)2、是否點擊到物件3、點擊到哪個物件

• 說明

場景中有很多物件，要做當滑鼠點擊物件時，知道是點到哪個物件。先將遊戲物件標籤，以供程式判斷；gameobject.tag

使用到Input.GetMouseButtonDown來觸發，接下來是將點擊到的位置由Screenspace轉成遊戲世界的World space

• var ray = Camera.main.ScreenPointToRay(Input.mousePosition); 

將由攝影機投射出光線，包含著位置與方向資訊。

• Physics.Raycast(ray,hit);

如果攝影機射出的光線，有碰擊到遊戲物件(collider)，回返回true，然後hit會得到光線與collider在哪個位置被碰到的物件資訊。

• point = hit.point; (哪個位置)  
• object = hit.transform.gameObject;(哪個物件)

• Code : 

#pragma strict 

var Ball : GameObject; 

var object: GameObject; 

var point: Vector3; 

function Start () { 

} 

function Update () { 

if(Input.GetMouseButtonDown(0)) 

{ 

//Instantiate(Ball,Input.mousePosition,transform.rotation); 

//print(Input.mousePosition); 

var hit: RaycastHit; 

        var ray = Camera.main.ScreenPointToRay(Input.mousePosition); 

if (Physics.Raycast(ray, hit)) 

{ 

point = hit.point; 

            object = hit.transform.gameObject; 

            //print(object.tag); 

            print(point); 

            Instantiate(Ball,point,transform.rotation); 

} 

else 

{ 

print("SHIT"); 

} 

} 

} 

• Reference

Unity Document

[unity]Input

在Unity 中使用input 物件來偵測滑鼠，鍵盤事件。
偵測情況基本上有三種:1、GetKey : 當按下時會持續作用2、GetKeyDown : 當按下那一刻才會作用3，GetKeyUp : 當按下後放開那一刻才會作用

Example:

• 偵測滑鼠左中右鍵

if(Input.GetMouseButton(0))

Debug.Log("Pressed left click.");

if(Input.GetMouseButton(1))

Debug.Log("Pressed right click.");

if(Input.GetMouseButton(2))

Debug.Log("Pressed middle click.");

• 三種不同的方式偵測是否按下"A"

if(Input.GetKey(KeyCode.A))    // print continue when press key 

{

print("A");

}

if(Input.GetKeyDown(KeyCode.A))   // print once when press key

{

print("press A");

}

if(Input.GetKeyUp(KeyCode.A))   // print once when release key

{

print("press A");

}

• 按下任意鍵

if(Input.anyKeyDown)

{

print("anyKey");

}

Refernce:

• Unity KeyCode API
• CG 學習網