顯示具有 互動 / Interaction 標籤的文章。 顯示所有文章
顯示具有 互動 / Interaction 標籤的文章。 顯示所有文章

2009-03-12

Mar.12 Pretty Loader - 無限讀取鬼打牆



[ Pretty Loader ]

前幾天在歐拔藍的Blog上看到一個有趣的網站,是紐約一間知名的設計公司big spaceship為了紀念總是一閃即逝的Loading畫面,特地做的。概念很簡單,使用者可以上傳自己設計的Loader去load下一個上傳者的loader,很饒舌吧!不過卻很有趣呢!就好像鬼打牆一般,一個接著一個看下去好不過癮,除了可以欣賞別人的創意,放空發呆時也很好用喔。

所以,
他們也很貼心的做了一個螢幕保護程式版(不過我Download下來執行了卻沒有效果,該不會跟Vista 64bit衝到?有成功的人告訴我一下好哩~)

2008-06-26

Jun.26「原始位移」滑鼠墊 - for Emotional LED

LED_mouse

[ 動機 ]

我們都是現代人,習慣了只需要資訊運動的交流,在空間裡真的移動的是滑鼠,甚至連走到家門外都不需要就可以知道路口發生的事情。現代人類對於移動的敏銳逐漸模糊,如果連這幾寸的滑鼠位移都查覺不出來是否可以算某種退化?

於是這一個我給他取名為「 原始位移 - The Original Displacement 」的滑鼠墊原型就浮現出來了。


IMG_0015

[ 產品 ]

是的,他是一個包覆著麻布的滑鼠墊,裡面有三個顏色的塊狀LED,當你將滑鼠移動過去,相對應位置的LED便會緩緩亮起再緩緩暗下,就像呼吸一般,提醒著你正在移動的事實。麻布在某種意義上是相對於現代感的冰冷光滑,如同撫摸草地的原始觸感讓每一吋的移動量都反應到手上。

IMG_0010

[ 過程 ]

當初在發想idea時,其實還有一個是對應鍵盤的互動裝置,一樣是有LED的呼吸,Sensor則是放在鍵盤護手腕的地方,不同的是滑鼠墊的位移是塊狀,手在鍵盤的位移則接近線狀。最後決定先實作滑鼠墊,在機構上比較好將Arduino版包在一體(其實是時間上比較趕了,來不及焊電路板用得好看一點XD),程式部份特別感謝hoba支援,讓最後呼吸效果和感應狀況可以呈現出來,還好內部醜陋的包裝在麻布下完全看不出來,整體外觀還有某種古色古香和科技混搭的感覺,雖然在發表的時候因為沒睡精神狀況不好,胡言亂語,不過當他很完美的隱身在展示電腦旁邊感覺還是很有意思的(我自己笑說是客家文物展其實XD)。

DSC00003
DSC01236

2008-03-31

Sketch Using Framework of Choreography of Interaction

Dynamic Quality:指應將所謂設計的品質在一個動態的過程中去整體地考量

Physical Involvement:指人與實體存在的相互關係,例:手磨擦桌子時,除環狀地運動手及手臂以外,觸覺與壓力的改變、桌子的搖晃也應考慮進去

Expressed Meaning:指動作本具有以及表達出的意義,例:鞠躬此一動作同時具有謙恭、緩慢、施力的要求與意義


在Introducing Choreography of Interaction中Sieskte用了以上的架構協助將抽象轉化為實體的設計。

總括性的來看這三個環節,若是以圖像的語言來說,似乎也可以對應到「點線面」的概念。Expressed Meaning對應到「點」,因為著力在動作本身自體的意義表達、Dynamic Quality對應到「線」,是一個動態從開始到結束的一個線性關係、Physical Involvement則必須將整體與互動相關聯的要素都包含進去,故對應到「面」。

藉由以上的架構,下面就來做一個小小的練習實驗

。

以聽音樂mp3的習慣來說,透過兩個小小的耳機,可以讓生活在都市的人們透過音樂將外在的混亂隔絕起來,自成一個屬於自己的虛擬空間,但也因此加深人與人的疏離感,戴上耳機似乎也像掛上了「請勿打擾」的牌子一樣,即使是無意的。如何可以改善人與人的互動關係,又能讓聽音樂不再屬於個人行為且能與想分享的人分享?

先從「點」- Expressed Meaning來思考。

聽mp3需要帶著耳機,也就是說耳機有隔離的意義存在,但我們不能因此而改用喇叭外放,因為在公共空間仍然要尊重其他人的私人領域。若是無法改變它的基本屬性,那或許增加一個可以接收外面環境資訊的sensor等等方式也是一個可以思考的方向?

再從「線」 - Dynamic Quality來看。

通常聽著mp3的環境除了在私人空間以外,多半都是在路上、捷運公車上、或者是咖啡廳等公共空間,人與人的互動關係大不了就只是擁擠的時候擦肩而過。不過也有很多時候是面面相覷各自聽著自己的音樂或做自己的事,眼睛會不知道該放在哪裡(比如搭公車捷運等等),事實上有時候會有想要與陌生人互動或攀談的想法,但多半卡在沒有一個好的連結可以開頭。假設大多數都市人都有聽mp3的習慣,與其各自聽各自的音樂,何不分享出來?

(到這兒已經有一些初步想法)

概念有點類似最近廣告打很兇的「音樂讓你說」一樣,但不是那麼唐突的互動(廣告那種比較像是高調的宣告一樣),每一臺mp3都透過RFID或藍牙等無線通訊的方式溝通,內建混音功能(可以把不同的歌曲tempo自然的融合在一起),當人與人之間靠近,對方在聽的音樂會透過你的耳機,與你正在聽的音樂混合出新的曲子,透過這種方式在外面聽音樂便不再只可以是個人的行為,而是有某種溝通的功能存在。甚至可以將距離的因素加入,若是想更清楚聽到對方在聽什麼音樂,勢必需要更靠近那個人,而且有趣的是若喜歡的音樂類型是很類似的,在混音時也會比較融洽自然,反之或許會是某種噪音也不一定,這種對應關係正好可以用來篩選與自己氣味相投的人,然後靠近,增加互動的機會(都這樣了能不從音樂聊起嗎?)

最後用「面」- Physical Involvement來審視這個概念。

為了避免某些狀況是不想互動的(例如想休息),在功能上可以增加讓主人選擇是否開放互動的功能,若是今天心情好想要與人互動,便可以隨時打開互動功能,此時不只你聽得到別人的音樂,別人也聽得到你的音樂,是一個和P2P一樣的分享概念。若是處在一個人潮壅塞的環境中要如何才不會吵雜且反而無法進一步互動?或許增加方向性是可行的做法(只有正前方的mp3會與你互動),也許再讓產品可以自動判別要哪幾台的音樂互動(例如最接近的三、五台)或是自動判定音樂類型篩選(比如你現在正在聽rock,它會自動搜尋在你身旁也在聽rock的人)等等

總結

以上過程是一個從無到有一個流程想出來的sketch,運用Framework of Choreography of Interaction粗略的實作了一次,事實上這些流程我認為應該是要再不斷的重複run過(目前只是草率的跑過一次流程),對於產品或概念設計都會有更完整個全方位思考。Interaction Design是來自人性的基本需求而成形的領域,透過剛才的方式所想到的靈感還不是完整的,但是自己想像起來應該會是還滿有趣的實體互動(想想看在捷運上大家不在大眼瞪小眼,大家會靠過來靠過去轉過來轉過去尋找match的音樂和人,然後互動交談,似乎是很好玩的)

如有誤解錯誤或解釋不清楚的地方請不吝指教,謝謝:)

2008-03-18

Mar.18 Anduino+processing 受驚嚇的圓之章

又到了週二Arduino實驗時間,沒想到這個小小心得的專欄(?什麼時候的事了)竟然變成教學用途,彥齊和鹿子竟然還說,就算其他文章都不要po也沒關係(不重要!?),至少要把每次上課的心得整理成教學。好吧其實我發現最近算很有毅力的在整理生活心得,就算不說這種其他文章不知道該哭或該笑的話還是會po上來的,呵呵。

今天延續上星期已經讀到可變電阻的測試,把原本out put出去給LED做明暗變化的參數,丟進processing裡,利用processing比較強大的繪圖功能做一個可以互動的圓。

首先要先用Arduino program把以下程式碼upload到板子上,這部份直接從官網copy下來就可以了。主要是要將讀取到的類比和數位訊號變化值可以持續的送出去,後面我們要用processing來接。


/*
Sensor Reader
Language: Wiring/Arduino
Reads two analog inputs and two digital inputs
and outputs their values.
Connections:
analog sensors on analog input pins 0 and 1
switches on digital I/O pins 2 and 3
*/

int leftSensor = 0; // analog input for the left arm
int rightSensor = 1; // analog input for tht right arm
int resetButton = 2; // digital input for the reset button
int serveButton = 3; // digital input for the serve button

int leftValue = 0; // reading from the left arm
int rightValue = 0; // reading from the right arm
int reset = 0; // reading from the reset button
int serve = 0; // reading from the serve button

void setup() {
// configure the serial connection:
Serial.begin(9600);
// configure the digital inputs:
pinMode(resetButton, INPUT);
pinMode(serveButton, INPUT);
}

void loop() {
// read the analog sensors:
leftValue = analogRead(leftSensor);
rightValue = analogRead(rightSensor);

// read the digital sensors:
reset = digitalRead(resetButton);
serve = digitalRead(serveButton);

// print the results:
Serial.print(leftValue, DEC);
Serial.print(",");
Serial.print(rightValue, DEC);
Serial.print(",");
Serial.print(reset, DEC);
Serial.print(",");
// print the last sensor value with a println() so that
// each set of four readings prints on a line by itself:
Serial.println(serve, DEC);
delay(10);
}



傳好之後記得將Arduino program關掉或是把com3(或是看哪個埠)換掉,否則等等開啟processing的時候序列埠會被它佔用住就抓不到數據了。開啟processing後可以從官網copy這段程式碼再去修改,下面是今天梁老師試出來的程式碼,紅字是加寫進去或修改的部份,藍色字是說明。

/*
Serial String Reader
Language: Processing
Reads in a string of characters from a serial port until
it gets a linefeed (ASCII 10). Then splits the string into
sections separated by commas. Then converts the sections to ints,
and prints them out.
*/

import processing.serial.*; // import the Processing serial library

int linefeed = 10; // Linefeed in ASCII
Serial myPort; // The serial port
int r = 0;
int [] sensors; //要把原本下面的int Sensor[] = 那段殺掉換成這行,因為這邊是用全域函數來宣告後面draw才不會出問題(大概是這樣還在理解)

void setup() {
size(400, 400); //這裡以下是繪圖的一些語法,這行是定義程式要開多大解析度
smooth(); //這還不知道XD
background(0); //這段是背景顏色,0的話就是黑色
noStroke(); //了解中...

//frameRate(10);
// List all the available serial ports
println(Serial.list());

// I know that the first port in the serial list on my mac
// is always my Arduino module, so I open Serial.list()[0].
// Change the 0 to the appropriate number of the serial port
// that your microcontroller is attached to.
myPort = new Serial(this, Serial.list()[2], 9600); //中括號裡的數字要看連接的是哪一個序列埠決定,但要注意的是第一個是從0開始算,所以如果是com3的話就要填2才抓得到訊號

// read bytes into a buffer until you get a linefeed (ASCII 10):
myPort.bufferUntil(linefeed);

}

void draw() {
// twiddle your thumbs
background(0); //繪圖的部份再宣告一次背景顏色
fill(226); //要填滿色塊

ellipse(width/2, height/2, r, r);
//因為這邊是畫圓,所以用橢圓形,只要長短半徑一樣就是正圓了,括號裡代表的分別是(圓心X,圓心y,直徑,直徑),如果要一直畫在中心只要把解析度長寬除以2就可以


}


// serialEvent method is run automatically by the Processing applet
// whenever the buffer reaches the byte value set in the bufferUntil()
// method in the setup():

void serialEvent(Serial myPort) {
// read the serial buffer:
String myString = myPort.readStringUntil(linefeed);

// if you got any bytes other than the linefeed:
if (myString != null) {

myString = trim(myString);

// split the string at the commas
// and convert the sections into integers:
sensors = int(split(myString, ','));

// print out the values you got:
for (int sensorNum = 0; sensorNum < sensors.length; sensorNum++) {
print("Sensor " + sensorNum + ": " + sensors[sensorNum] + "\t");
}
// add a linefeed after all the sensor values are printed:
println();
r = (int)sensors[1];//這個部份應該是bug,原本這段應該寫在draw裡面也是可以的,但是今天卡在這邊一直無法解決,最後梁老師把這段放在最後結束前先給它強制宣告就成功了,這裡是宣告接收到的sensor值變成 r 再代入圓的半徑
}

}


如果順利的話應該可以控制可變電阻(或光敏電阻等等),然後畫面中的圓大小也會跟著變化,例如今天做的實驗是利用光敏電阻控制,所以當我用手遮住光線的時候,光變暗,圓就會變小,手拿開圓就會再變大(我在Arduino program那邊寫了一個delay(10),也就是每百分之一秒就會傳送一次訊號,這讓變化看起來比較流暢),看起來就很像一個膽小受驚嚇的圓一樣,很有趣。依著這個方式,其實已經可以延伸出許多變化,再來就是去思考怎麼去創造有意思的互動關係而已 : )

後記,梁老師雖然今天說我很巧每次都玩出很有趣的東西,不過很想說....都不是我在用的啊!程式的部份幾乎都是靠梁老師才玩得出來的,而且我很不專心都只是亂玩些有的沒的,呵。

2008-03-11

Mar.12 Arduino-可變電阻測試



才隔一個星期沒碰這玩意兒就有點陌生了,上次買的一些小零件也一直沒有拿出來玩,雖然梁老師在上頭仔細的講解怎麼串電阻幾歐姆電壓多少program怎麼寫才能讀進數據,不過沒有基礎只好在下面自己玩看看。首先既然都買了可變電阻和光敏電阻,當然想先來試看看能不能控制LED明暗,一開始只想直接串接起來不過看來是失敗的,後來在參考對面高手的解說之後才搞懂,把電阻數據讀進電腦裡後再輸出給LED就成功了,小小的成就感(還是很鳥..)

串起來就是下圖那樣,用光敏電阻可以感應光線,所以手移過去變暗燈也會變暗,移開就會變亮(也可以用程式反過來,若是接可變電阻就可以轉轉轉來調(跟抬燈原理是一樣的)。上次也買了一個蜂鳴器,替換掉LED以後就可以調大小聲。彥齊和鹿子看出有趣了,雖然我們還是對這程式很懵懂(我自覺有點慚愧...囧),想一下要怎麼做一個實際又夢幻的互動裝置吧 : ) -----還很遙遠的感覺...

附上今天寫(修改)的program:
int potPin = 0; // 宣告類比腳位輸入的PIN腳
int val = 0; // 宣告變數Val = 0
int ledPin = 9;

void setup() {
Serial.begin(9600); //設定SerialPort的速度9600 = 9600bit/s
}

void loop() {
val = analogRead(potPin); // 用analogRead()這個函式讀取特定腳位的數值到變數val
Serial.println(val); //印出數值在Serial.Monitor
delay(10); //延遲讀入的時間為10ms
analogWrite(ledPin, val/4);
}





p.s 今天第一次在台科遇到阿志,很奇妙半年感覺很不像學長學弟的fu,也許我們都很少待在研究室吧(阿志是完全沒有),呵

2008-03-03

Arduino 初試

這學期選了一堂實體空間互動的課,翻成白話的話也就是先學電路板
大家合購從國外各買一塊Arduino的板子..小小一塊就要一張小朋友好棒

玩電腦那麼久但是一直對電路和程式沒有太深的研究
剛剛想起來把板子拿出來插上去試了一下
有很多資料都是國外網站英文的,眼睛有點花
中文的推薦一下Arduino樂園
裡面有滿詳細的入門介紹,對英文爛的初學者來說應該很有幫助(就是我)

首先先把板子拿出來(廢言)
再找一條USB扁頭對梯型方頭的usb線跟電腦接起來
(有教學把他改成小頭usb座的)
接著下載驅動程式和主程式
但是這邊要注意!網站上提供的連結是Arduino 0007版本,用這個主程式跟我們買的板子會有無法傳輸的問題
去官網下載目前最新的Arduino 0010版
就可以順利把程式upload到板子上去了
其他步驟大至上照著網站上的說明去做就可以了

再來就是程式和外接其他電路的問題而已..
基本上流程應該是一樣的

不過到這裡
我還不是很清楚星期二上課前要去光華商場買什麼零件才是...
可以先玩玩板子上的燈號就好了嗎?