38
摸的到的雲 Arduino 實作可觸繪圖界面 雁子(yanyiyi)

[SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

  • Upload
    yan-liu

  • View
    2.496

  • Download
    3

Embed Size (px)

DESCRIPTION

[SITCON2014] Short Talk 可觸的繪圖界面實作 - 摸的到的雲 用Arduino 和 Processing 連結創造一個在繪圖時的輔助工具。

Citation preview

Page 1: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

摸的到的雲Arduino 實作可觸繪圖界面

雁子(yanyiyi)

Page 2: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

雁子元智資訊傳播學系網路傳播組 大學部(但其實不寫網站的組...)數位媒體設計組 碩士班

參與過的專案 RO私服接觸到Open 的世界。

Page 3: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

這絕對是最軟的議程

Page 4: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

我是在用硬體..

但絕對不是拆炸彈........

Page 5: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

你,多久沒有認真看「真正」的雲How long have you seriously look at the clouds upon the sky?

Page 6: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

我總是希望有一天可以摸到雲after the illusion , I always wish to TOUCH the cloud

Page 7: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

我不要10年後的雲都只會是這個樣子I do not want after 10 years pass by,

the cloud in anybodys mind look like this

老實說... 我這個作品一個初衷是想要反諷很多人、業主滿腦子只有

「雲端」這兩個字 --然後本系系主任花了150w的經費買了被廠商說是雲端教學系統的 iSCSI ... 卻沒有一台系上支援--

Page 8: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

設計目標:

在數位時代靠著「觸覺」去製造數位時代的「雲」。

Page 9: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

不是這個數位時代拉(COSCUP行銷組長Muka別殺我,

我還在雲的夢這期要刊數位時代的廣告還沒有想好)

Page 10: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

關於「雲」

Aeduguy (2005)

雲的理論

Cirrus卷雲Stratus層雲

Cumulo-Cirro-Stratus積卷層雲

這一切的開始就是一個人走路不好好走路一直看天空...

Page 11: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

Damisch (1972) 基督神聖16世紀風景畫

>真實

隨風向排列、雲層堆積、

堆積後擴張、越長越厚

Page 12: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

燒燬∼∼∼

燒燬∼∼∼

燒燬∼∼∼

Page 13: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

《芥子園畫傳》「畫雲純用色清,望若堆起,

實無墨痕為上。若畫青山綠山水即工細竣法,欲其相稱,當以淡漠勾出,

淡清染之。」

關於「畫雲」

Page 14: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

關於「畫雲」

大小圓弧交替

Page 15: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

「棉花」可以產生的互動

拉、捏、攤平、托高

Page 16: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

「棉花」對應積雲的特色

拉捏

攤平托高

隨風向排列、雲層堆積、

堆積後擴張、越長越厚

Page 17: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

呈現的技法

色:色清堆積法(透明度累積)型:卡通畫雲

Page 18: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

製做方式:

棉花、Arduino Mega、光敏感測器Cds一個可以裝棉花的容器

呈現方式:

實體的小裝置,可以讓使用者來玩使用者用棉花做出自己的雲後會在電腦上顯示。

Page 19: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

製雲機the CLOULD generator

Edit the CLOUD by TOUCHing the CLOUD

Upload the data to Generate your CLOUD in digital format

Page 20: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

示意圖

Page 21: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

關於「畫雲」漫畫畫法

決定主形體後的堆積大小邊

Page 22: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

原感應 相鄰平均1/3 大小

相鄰平均1/2 大小

Page 23: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲
Page 24: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

MIT 動態商標(... 我原本還在想他們該不會是...螢幕截圖吧...

Page 25: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲
Page 26: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

存出PDF

import processing.pdf.*;

Page 27: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

存出PDF開始記錄

beginRecord(PDF, "frame-####.pdf");

Page 28: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

存出PDF結束

endRecord();

Page 29: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

noStroke();

endRecord();

beginRecord(PDF, "frame-####.pdf");

Page 30: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

boolean sketchFullScreen() { return true;}

void draw(){size(displayWidth, displayHeight);}

Page 31: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

成品圖

Page 32: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲
Page 33: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲
Page 34: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲
Page 35: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲
Page 36: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

不是用M的

油漬來變色拉

Page 37: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

待解決問題-1.清除初始化2.不同環境光的微調3.顏色

Page 38: [SITCON] Short Talk - 可觸的繪圖界面實作 - 摸的到的雲

Q&A我有講到程式喔∼

我不是來亂的有請大家高抬貴手