Category Archives: Processing數位互動創作

Processing 數位互動創作

[Processing匯入OpneCV視覺函式庫] 臉孔追蹤小專題

作者/攝影  曾吉弘
時間  3小時
成本
  • Webcam
難度  * * * *
材料表
  • 個人電腦
  • Webcam 或筆電內建攝影鏡頭
  • Processing IDE

本文要介紹如何在 Processing 中匯入OpenCV視覺函式庫,並做到臉孔追蹤的效果。

 

這比建置完整的OpenCV環境做法簡單多了,但是功能相對也會比完整的openCV環境來得少,就看您個人的需求囉。其實 Processing 的程式碼都很簡潔,也很容易做出漂亮的介面,是阿吉老師上課很喜歡的。Processing結合Arduino也很簡單。

 

硬體

請將#1伺服機的訊號腳位接到Arduino的#9腳位,用於控制PTZ平台的水平方向移動(Pan)

請將#2伺服機的訊號腳位接到Arduino的#11腳位,用於控制PTZ平台的垂直方向移動(Tilt)。其餘分別接電接地完成即可。

View post on imgur.com

示意圖(圖片來源 adafruit 與 sparkfun.com):

View post on imgur.com

View post on imgur.com

您可由 thingiverse這樣的網站找到更多的PTZ平台設計

 

Processing設定

1.下載Processing

2.開啟 Sketch → Import Library…   Add Library:在跳出選單中下載openCV, processing video函式庫

View post on imgur.com

View post on imgur.com

View post on imgur.com

3.下載Arduino函式庫,完成之後可以在 File → Examples 看到相關範例,都可以直接玩玩看喔

 

View post on imgur.com

4.開啟範例程式:LiveCamTest,就可以直接追蹤臉孔囉,以下是我們加入Arduino相關控制碼

import gab.opencv.*;
import processing.video.*;
import java.awt.*;
import processing.serial.*;
import cc.arduino.*;

int center_x, center_y;
Arduino arduino;

Capture video;
OpenCV opencv;

void setup() {
  size(640, 480);  
  video = new Capture(this, 640/2, 480/2);
  opencv = new OpenCV(this, 640/2, 480/2);
  opencv.loadCascade(OpenCV.CASCADE_FRONTALFACE);  
  println(Arduino.list());

  arduino = new Arduino(this, Arduino.list()[0], 57600); 
  //0代表第一個COM裝置,請根據實際狀況修改
  arduino.pinMode(9, Arduino.SERVO);     //#1 servo 水平
  arduino.pinMode(11, Arduino.SERVO);   //#2 servo 垂直
  video.start();
}

void draw() {
  scale(2);
  opencv.loadImage(video);

  image(video, 0, 0 );

  noFill();
  stroke(0, 255, 0);
  strokeWeight(2);
  Rectangle[] faces = opencv.detect();   //偵測是否有臉
  println(faces.length);                            //偵測到幾張臉

  for (int i = 0; i < faces.length; i++) {    //根據臉孔數目來跑迴圈
    println(faces[i].x + "," + faces[i].y);    //顯示臉的座標
    rect(faces[i].x, faces[i].y, faces[i].width, faces[i].height); //畫長方形把臉框出來
    center_x = faces[i].x + (faces[i].width/2);   //起始點x + 0.5*寬
    center_y = faces[i].y + (faces[i].height /2);  //起始點y + 0.5*高
    print(center_x); 
    print(", "); 
    println(center_y);
    ellipse(center_x, center_y, 10, 10);
    arduino.servoWrite(9, int(map(center_x, 100, 270, 0, 180)));  
    //本組數值是center_x 於畫面之左右極值,需依照實際情況調整
    arduino.servoWrite(11, int(map(center_y, 80, 250, 0, 180)));  
    //本組數值是center_y 於畫面的上下極值,需依照實際情況調整
  }
  delay(100);
}

void captureEvent(Capture c) {
  c.read();
}

執行

 

由console的訊息可以看到以下訊息:

 

OpenCV for Processing 0.5.4 by Greg Borenstein http://gregborenstein.com

Using Java OpenCV 2.4.5.0

Load cascade from: C:/Users/user/Documents/Processing/libraries/opencv_processing/library/cascade-files/haarcascade_frontalface_alt.xml

Cascade loaded: haarcascade_frontalface_alt.xml

 

代表在此的臉孔追蹤還是用到了Haar分類演算法,點選連結可以看到關於本分類法的數理基礎。

 

執行畫面如下,可以看到畫面會把偵測到的臉孔標出來,也會在console中顯示偵測到的臉孔張數與座標

View post on imgur.com

View post on imgur.com

相關文章:

 

 

 

 

 

 

[程式教學] Arduino 101結合 Processing 互動滾球遊戲

本文章要告訴您如何結合 Processing IDE 與 Arduino 101 開發板來設計一個滾球遊戲。藉由 Arduino 101 開發板上的加速度計與陀螺儀感測器來感測板子於空間中的傾斜、位移與轉動的狀態,藉此控制球在畫面上的四處移動,就好像零食乖乖附贈的小玩具一樣。

作者/攝影曾吉弘
時間  2小時
成本  ❊ Arduino101開發板  $1,575  (購買連結)
難度 * * * * * *
材料表❊個人電腦 (作業系統可用 Windows, Mac OSX 與 Linux,本範例使用 Windows 7)

❊Processing IDE  (2.0 or 3.0 皆可,本範例使用 2.2.1)

❊Arduino IDE 1.6.x 版以上

Arduino 101開發板

 

本範例是阿吉老師於海洋大學機械系學期課程的課堂小挑戰,修改 Arduino官網的範例來製作一個滾球遊戲,藉由搖擺 Arduino 101 開發板來控制 Processing 畫面上的球移動,這運用到了Arduino 101的加速度計與陀螺儀感測器,並理解如何透過序列通訊讓 Arduino 與 Processing (您的PC) 彼此溝通,後續要改成藍牙也是沒有問題的。

這類型的遊戲通稱為 labyrinth,玩法都差不多就是控制球走到終點,iOS 或 Android 都有非常多可以下載,您可以多載幾個來玩並把一些可怕的功能加入本範例中。

Continue reading

[Processing] 簡易七彩畫筆

Processing 一直是我在上課時很喜歡的內容之一,原因很簡單,因為它效果強大,程式碼又簡潔,還可以結合 Arduino、Kinect 來做各種實體互動。可以補強 Arduino 在資料呈現上的不足。

CAVEDU 研究室的 Processing 介紹

CAVEDU 的 Processing 教學放在本文末 (Slideshare平台),歡迎分享~

來看看這個可愛的小範例吧,在滑鼠座標處畫圓。圓的顏色會隨機變換,這樣就是一隻色彩繽紛的數位畫筆囉!

001


void setup() {
  size(600, 600);
}

void draw() {
  //background(255);
  noStroke();
  line(300, 300, mouseX, mouseY);
  int r = int(random(255));
  int g = int(random(255));
  int b = int(random(255));
  fill(r, g, b);
  ellipse(mouseX, mouseY, 30,30);
  delay(10);
}
Processing 七彩畫筆

 

[Processing] 5 x 5 小球隨機顏色閃爍

Processing 在控制顏色與形狀上有相當好的效果,PC 端執行的好處是很容易整合各種 PC connected 裝置,例如搖桿、Kinect、Webcam 與 Arduino 等等,輸入訊號不再只限於鍵盤滑鼠而有更豐富的呈現。

本範例的每一個小球都會獨立隨機改變顏色,使用兩層 for 迴圈就可以控制每一行每一列要有多少顆球。您可以一口氣擴大到更多的數目,數大就是美嘛!

請參考先前的文章:

[Processing] ASWD 移動方塊   與  Processing 隨機五小圓

螢幕快照 2015-05-13 上午12.58.57

程式碼如下:

int r, g, b;
int x = 20;
int y = 20;
int t;
int k = 0;
int i = 0;
void setup() {
  size(300, 300);
  smooth();
  background(255);
  noStroke();
}
void draw()
{
  for (k = (int)random(5); k < 5; k++)
  {
    for (i = (int)random(5); i < 5; i++)
    {
      r = (int)random(255);
      g = (int)random(255);
      b = (int)random(255);
      fill(r, g, b);
      ellipse(x, y, 25, 25);
      x += 30;
    }
    x = 20;
    y += 30;
  }
  x = 20;
  y = 20;
  t = (int)random(100, 1000);
  delay(t);
}

[Processing] ASWD 移動方塊

最近 Processing 應用在教學上小有心得,繼續介紹如何使用鍵盤的 ASWD 鍵來控制小方塊的上下左右移動。在早期用鍵盤來玩射擊遊戲的年代(啊,暴露年齡),就是用這四個鍵控制飛機,以及其他發射飛彈或特殊功能按鍵。執行畫面如下,只有移動功能,您可以加入按下 space 鍵來發射飛彈這個功能喔

Processing 隨機五小圓

螢幕快照 2015-05-09 上午12.52.26

int xPos=200, yPos=200;
void setup() {
  size(400, 400);
  smooth();
}

void draw() {
  background(204); 
  if (keyPressed) {
    if (key == 'w') {
      yPos -= 5;
    }
    if (key == 's') {
      yPos += 5;
    }
    if (key == 'a') {
      xPos -= 5;
    }
    if (key == 'd') {
      xPos += 5;
    }
  }
  rect(xPos-25, yPos-25, 50, 50); 
  delay(100);
}

Processing 隨機五小圓

Processing 是個好用又功能強大的數位互動介面開發工具,可以用相當精簡的程式碼做出炫麗奪目的色彩效果。請參考 CAVEDU 研究室的 Processing 相關內容。除了可以單機執行之外,還能結合 Android、Kinect 與 Arduino 達到更有趣的互動呈現

以下是簡單的範例練習,每次執行時都會利用 for 迴圈產生五顆小球,每次小球的顏色RGB值都會隨機決定。

想想看,如何利用 for 迴圈做到 5 x 2排總共10顆的效果?

未命名

int r,g,b;

int x = 20;
size(300,300);
smooth();
background(255);
noStroke();
for(int i=0;i<5;i++){
  r = (int)random(255);
  g = (int)random(255);
  b = (int)random(255);
  fill(r,g,b);
  ellipse(x,20,25,25);
  x += 30;
}
五顆隨機顏色小球

141022起每周三晚上 Processing專題計劃 @MakerBar Taipei

Makerbar Taipei 與CAVEDU教育團隊今年開了幾個梯次的Arduino習作計劃,讓大家可以透過簡單的入門教學,體驗Arduino的趣味,現在我們要帶大家認識Processing並且教導如何與Arduino結合應用!

Processing 讓使用者能用相對簡單的程式指令就能繪製各種圖形,並以視覺化方式來回應您的操作,每個人都能善用 Processing 來發揮與生俱來的創造力。Processing 與 Arduino 嵌入式開發板有高度的整合性,您可輕鬆將 Arduino 所擷取的實體狀態透過 Processing 繪製的畫面來呈現。對於想要切入數位互動創作的朋友來說,使用Processing 是絕佳的切入點。

報名網址請按我    已過使用 Processing 的教學內容

課程時間

10/22 – 11/5 (三) 19:00 – 21:00,共計6小時課程。

課程費用

2500元(含材料:LED燈、按鈕、類比按鈕)

課程內容

10/22  

Processing介紹

下載Processing IDE

控制顏色、形狀與數量

使用鍵盤、滑鼠來進行各類互動

10/29   

Processing 搭配Arduino#1

Arduino IDE與驅動程式安裝:

1.       在Processing介面來控制Arduino周邊 – LED

2.       用Arduino按鈕來控制畫面上元件

11/5

Processing 搭配Arduino#2

飛機小遊戲:

隨機物件

搖桿移動並搭配按鈕來發射飛彈

碰撞偵測與音效

講師介紹

CAVEDU教育團隊

注意事項

本課程需要自備電腦、Arduino相容板與麵包板(現場有提供原廠Arduino UNO販售800元/片)

140222 Processing Android 數位互動研習

這次的研習主題是使用 Processing 這個數位互動開發介面,並將作品轉換到 Android手機上來執行。

當然換個角度來說,您可以使用 Processing 就能開發 Android app,很簡單就能取用 Android 手機上的各項資源:Wifi,照相機,各種感測器等等。願意的話當然也能上架 Google Play囉。

不過說真的,Processing + Android環境建置有點小麻煩,單純執行 Processing 則沒有任何問題。如果要結合 Android SDK 時就會有一些大小關節要打通。Open source 有時候會碰到這種問題。環境建置請參考:CAVEDU 實驗室 Processing 分部

如果您對於這系列課程有興趣的話,歡迎留下您的 email 來索取投影片與相關教學資源。

研習結束大合照,有老師專程從花蓮來參加我們兩天的研習,非常感謝。

2014-02-22 16.47.13

上課一景

2014-02-22 10.58.13

簡易時鐘範例,自動抓取系統時間。 

2014-02-22 10.58.21

面部辨視也ok,我們可在程式中設定預設的面部大小(像素面積)與數量上限,避免過於靈敏辨識到一些奇怪的東西(好可怕)

2014-02-22 15.13.57

140222 Processing 互動媒體結合 Android智慧型手機研習營

報名頁面請按我

Processing 讓使用者能用相對簡單的程式指令就能繪製各種圖形,並以視覺化方式來回應您的操作。每個人都能善用 Processing 來發揮與生俱來的創造力。再者,Processing 與 Android 裝置有高度的整合性,您可輕鬆將Processing 程式安裝到 Android 手機或平板電板上執行,或匯出成為 Eclispe 專案。對於想要在 Android 裝置上開發互動專題的朋友來說,使用Processing 是絕佳的切入點。誠摯的邀請您參加本次的研習活動。

主辦單位:CAVE教育團隊、翰尼斯企業有限公司

協辦單位:台灣發展研究院 智能機器人研究所、《Make》國際中文版、普特企業有限公司

時間 : 103年2月22日星期六 09:30~17:00

地點 : 翰尼斯企業有限公司 台北市中正區中華路二段165號1樓

備註: 請自行攜帶筆記型電腦,以便實際操作

收費:3,000元。名額有限,請儘早報名

匯款方式:
銀行名稱 :華南商業銀行 雙園分行
戶名 :翰尼斯企業有限公司
銀行代號 :008
帳號 :122-10-015315-3

超級好禮相贈:
1. 《 Processing 入門:互動式圖形實作介紹》書籍乙本

aNMcrHsI4wGvzpX3kfYeYw

活動議程:

9:30 CAVE教育團隊簡介

9:50 Processing 環境安裝
設定 Android SDK 資料夾 與Android 裝置驅動程式

介紹Processing IDE 與程式基礎架構
第一支Processing 程式 – 繪製幾何圖形

10:30 結合鍵盤與滑鼠動作
按下不同的按鍵畫出各種圖形與線條
滑鼠點擊與拖拉 – 小畫家
12:00 中餐

13:00 將Processing 專案執行於手機
如何下載外部函式庫
觸碰互動小球範例

14:00 取得手機的硬體狀態
相機
加速度、姿態感測器
取得座標

15:00 手機的2D / 3D(OpenGL )繪圖

16:00 手機與PC 之間的 Wifi 連線 / 手機之間的 Wifi 連線

16:50 結語、賦歸

 

注意:主辦單位保留修改與解釋活動之所有權利。

服務電話:02-23062900
service@cavedu.com

Processing / Kinect / openNI 初體驗

本篇教學整理自3D視覺專題製作:Kinect、Processing、Arduino及MakerBot一書,告訴您如何建立 openNI 這個 Kinect 函式庫,並在 Processing 環境中來進行開發。按照書中說明,本平台於Windows / MAC OSX 與 Linux 都可以架設,但我們只在 Windows 上操作,請依照下列步驟完成環境建置:(或參考OpenNI 的官方安裝說明


1. 下載 SimpleOpenNI 的 Windows打包檔, https://code.google.com/p/simple-openni/,並選擇 Windows 32位元版本。下載後請解壓縮,其中有四個檔案,請依序安裝完成

    a. 安裝 OpenNI 的安裝檔(例如 openni-win32-1.5.4.–dev.msi),一路安裝完成。

    b. 安裝 NITE middleware 的安裝檔(例如 nite-win32-1.5.4.0-dev.msi),一路安裝完成。如果要求金鑰時,請輸入0KOIk2JeIBY

    d.安裝 SensorKinect 驅動程式(例如 SensorKinect092-Bin-Win32-v5.1.2.1.msi),一路安裝完成。如果您是使用 Asus Xtion Pro也是用這個驅動程式即可。您應該會在 Windows 的裝置管理員中看到 Kinect 被辨識為Primesense 裝置的 Kinect4Windows Audio 與 Kinect4Windows Camera(下圖左)。如果是使用微軟官方的 Kinect SDK 則會被辨識為獨立的 Microsoft Kinect裝置(下圖右)。
 

           

    注意!OpenNI 1.x 版無法與微軟官方的 Kinect SDK相容,請將其移除。但如果您想要使用 OpenNI 2.0版(大改版!)的話,則需要安裝 Kinect for Windows SDK,換言之您就無法在 MAC OSX 或 Linux 下來使用 OpenNI 2.0版了。
   
2. 下載Processing IDE,目前最新版本為 Processing 2.0,下載後解壓縮即可執行 Processing.exe。

3. 安裝 OpenNI for Processing 函式庫。請下載 SimpleOpenNI 在 Google code 下載清單中的 SimpleOpenNI-0.27.zip,下載之後解壓縮,並將其中的 SimpleOpenNI 資料夾(內有 documentation、examples與 library三個資料夾)放到 Processing 的sketch location(預設位置是在<我的文件>/Processing/libraries)。如順利載入,則可在 Processing 的 Files/ Examples… 選單的最下方看到 SimpleOpenNi資料夾,這時您就可以自由來玩玩看各個範例了!

                    


4. 您的第一隻Processing / Kinect 程式:

import SimpleOpenNI.*;
SimpleOpenNI kinect;

void setup(){
    size(640*2, 480);
    kinect = new SimpleOpenNI(this);
    kinect.enableDepth();
    kinect.enableRGB();
}

void draw(){
    kinect.update();

    image(kinect.depthImage(), 0, 0);
    image(kinect.rgbImage(), 640, 0);
}


執行畫面:

左側為深度圖,右側為一般的圖檔,皆為動態顯示。


130507 國北教大數資系 Processing/Arduino 互動專題課程

很快地,國北教大數資系 Processing/Arduino 互動專題課程來到第三周啦,今天是要在 Processing 中取得 Arduino 的可變電阻狀態,藉此控制畫面上的方塊左右移動。

推薦 Cooper Maa 的專業 Arduino 與程式設計開發部落格:http://coopermaa2nd.blogspot.tw/2011/03/firmata-processing-arduino.html

數資系的同學在程設的基礎都不錯,上課進度相當好,氣氛也還不錯呢。畢竟互動的課程,也要把師生互動算進去唷!

大家一起來剝線

回家作業,大家要加油唷!

下次要換把 Arduino 感測器值透過藍牙送到 Android 手機上囉!

一玩Processing就愛不釋手

還記得之前有發過一篇用Gadgeteer做一個畫筆程式的文章嗎?

今天在練習Processing的時候,隨心所欲的翻翻File>Examples裡的有趣範例,赫然發現一個令我大吃一驚的程式:”CountinuousLines”!

程式碼如下:

void setup() {
  size(640, 360);
  background(102);
}

void draw() {
  stroke(255);
  if (mousePressed == true) {
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}
Processing 根據滑鼠游標畫線

 


不用懷疑,真的只有這樣!當下覺得晴天霹靂,以互動性高及程式簡單的Gadgeteer竟然輸了,其實應該說是C#輸了,Gadgeteer畢竟是靠實體互動取勝,而且還要控制模組!

點選Processing中的Help>Reference就有超級詳盡的程式教學,每一個教學都有完整範例可以快速複製貼上,馬上看程式的執行效果。


而且還有很可愛的程式,看起來很療癒吧~  裡面的圓形都是動態的Processing有興趣的話,請點我下載資料

 這邊也有教學投影片,上述的資料就是配合這份投影片來使用  



在Processing 中新增函式庫很方便

「回顧」[Processing][Android] 如何讓您的Processing安裝到 Android手機?

[Processing 初體驗 – 結合Android手機]

在 Arduino 中如果要新增函式庫,您需要將所要新增的函式庫手動放到 /libraries 資料夾下,有點麻煩…

在Processing 中就不用這樣了,只要依照下列步驟操作即可:

1. 在 Sketch–>Import Library 中選擇「Add Library…」

2. 會跳出 Library Manager 視窗,您可從中看到所有可下載的函式庫

3. 直接點選或輸入您要想搜尋的關鍵字,例如opencv (視覺辨識函式庫)。找到之後直接按「install」即可

4. 安裝完畢之後您就可在Processing -> Examples 下看到 OpenCV的範例了,直接點選就可開啟使用唷

[好書推薦]Prototyping Lab「邊做邊學」,Arduino的運用實例

CAVE大推薦的Arduino實用書出版了! 由日本Arduino資深玩家小林茂先生的Arduino連載集結成冊, 由許郁文先生所翻譯。 是一本非常完整的Arduino範例書。

特點: 所有範例都有Arduino, Processing與 ASP的範例程式。 8個chapter共38個範例, 一次滿足最多玩家的需求, 歡迎現在就和我們訂購。

http://www.books.com.tw/exep/prod/booksfile.php?item=0010550967

作者:小林茂   譯者:許郁文

出版社:馥林文化

出版日期:2012年07月16日


第Ⅰ部:簡介
第1章 開始打造「原型」
第2章 建構開發環境
第3章 電子線路的基礎知識與最初的一步
第4章 Arduino 實驗教學

第II部:運用實例
第5章 輸入
第6章 輸出
第7章 資料處理
第8章 進階實例

附錄
附錄A 問題處理
附錄B 參考資訊