2018-03-23

Maker Movement 紀錄片


在「智慧生活與創新設計」課堂中,我提到台灣年輕團隊Muris繆思媒體所製作拍攝的 Maker 紀錄片《自造世代》,對自造者運動做了詳盡而通盤的報導與追蹤。以下提供相關連結(有數位下載版可購買):
自造者運動並不是近年才發起的新風潮,而是一種回歸人類先天能力的宣言,找回我們動手解決問題、打造事物的原動力和能力。其他國家或地區相關的資訊有:

HOME MADE -- 丹麥自造者運動(紀錄片)

Maker Faire Bay Area 全球最大的灣區自造者嘉年華活動
Make Magazine 自造者雜誌(有眾多出版品)

2018-03-19

Processing入門與自學指引


Processing是專為互動視覺、創意應用所設計的程式語言,有易於上手的編輯環境、多元函式庫(外掛功能)、豐富的學習資源。語言是基於 Java,但語法結構更為簡單。我們直接用範例來看:

size(500, 500);
line(0, 0, 500, 500);
rect(0, 450, 50, 50);
rect(450, 0, 50, 50);


意思是定義一個 500x500 的畫布,並劃一條從 (0, 0) 到 (500, 500) 的對角線,並在右上角、左下角分別畫 50x50 的正方形。若程式中沒有宣告顏色,預設的顏色是:線條 --> 黑色、填滿 --> 白色、底色 --> 淺灰。可用 fill() 改填滿顏色,用 stroke() 改線條或框線顏色。顏色要先指定再繪圖才有作用。

size(500, 500);
stroke(255, 0, 0); //指定紅色線條。
line(0, 0, 500, 500);
stroke(255, 255, 0); //指定黃色線條。
fill(0, 255, 0); //指定填滿綠色。
rect(0, 450, 50, 50);
fill(0, 0, 255); //指定填滿藍色。
rect(450, 0, 50, 50);


顏色格式有好幾種,較常用的是 R, G, B 三原色,數值範圍分別是 0...255,黑色是 (0, 0, 0),白色是 (255, 255, 255),黃色是 (255, 255, 0)。完整格式可參考手冊。

如果要重複動作,除了將指令複製貼上之外,還有比較聰明的方法:迴圈。若要從上而下繪製間隔為 10 的水平線,可以這麼寫:

size(500, 500);
for (int i = 0; i < 500; i = i + 10) {
  line(0, i, 500, i);
}


迴圈中的變數 i 稱為索引變數或控制變數,用來控制迴圈的執行次數和判斷結束與否。上述 for 迴圈的宣告格式是 (初始敘述; 繼續條件; 繼續前動作),可以這麼解讀:迴圈開始前,定義變數 i 並歸零,當 i 小於 500 時繼續迴圈,每次進入迴圈之前 i 累加 10。

然而為了要繪製動態圖形或進行互動,光靠上面的簡單結構很難做到,於是便需要一個類似動畫的基本架構:前置宣告、舞台設定、重複繪製(像是動畫師畫賽璐珞片一樣)。若將上面例子放到正規架構中,就會是這樣:

// 舞台設定,只會在draw()之前執行一次。
void setup() {
  size(500, 500);
}

// 重複繪圖,不斷自動重複執行。
void draw() {
  for (int i = 0; i < 500; i = i + 10) {
    strokeWeight(i/50); //額外加上的,根據 i 值改變筆劃粗細。
    line(0, i, 500, i);
  }
}

這段程式碼在邏輯上是正確的,不過實際上卻在做虛工,因為 draw() 重畫的內容其實都一樣,沒有重複的必要,除非每次執行 draw() 都會有些許的變更。

至於互動要怎麼做呢?我們先用最最最簡單的互動,將滑鼠的即時座標 (mouseX, mouseY) 融入程式中。例如,在滑鼠位置畫一個任意顏色的方塊。

void setup() {
  size(500, 500);
  rectMode(CENTER); //改變矩形繪圖方式,以矩形中心為準。
}

void draw() {
  fill(random(255), random(255), random(255)); //運用亂數函數產生任意顏色。
  rect(mouseX, mouseY, 50, 50);
}


好了,以上不算正式的程式設計簡介,太簡略了點,該是時候去上自嗨哥 Dan 的課了。Dan Shiffman 是既熱情又非常厲害的 Processing 專家,在 YouTube 上有一系列的入門課程,由簡入繁、設計得非常好,每段課程都很短,適合一面看一面練習。


建議按章節來看,應該可以一路衝到第5章 Conditions 了,歡迎大家在 Dan 哥的加持下繼續往前衝。學習過程若發生問題或需要釋疑,歡迎隨時透過臉書訊息、email 提出問題。

當然,Processing 官網也有豐富的學習資源,包括精采案例、學習範例、自學課程、書籍、網路連結等,。

再提醒一次,這次練習只需要基本幾何繪圖函數、基本條件式或迴圈、以及滑鼠座標 (mouseX, mouseY) 來創作,當然願意自我挑戰的同學請不要客氣。

教材一:Processing - Basics


2018-03-16

Processing臉部表情辨識

Kyle McDonald 所寫的 FaceOSC,這是架構在 OpenFrameworks 的一個小工具,將臉部表情當作 OSC 控制器,這邊有一篇 DigiLog 的介紹

Smile detection in Processing by Bryan Chung 鍾緯正.

2018-03-15

Tools and Researches for Islamic Arts


以下是一些與伊斯蘭藝術、圖案相關的數位工具、文獻。

Digital Tools

Web sites
Papers

2018-03-12

Tinkercad 入門

對 3D 建模和 3D 列印新手來說,Tinkercad 是易學易用的入門建模工具。底下是一些教學影片的匯集。
If you are new to 3D modeling or 3D printing, Tinkercad would be your best entry level 3D modeler. Here are some of the tutorials.
  • Tinkercad 3D 建模軟體按部就班入門(How to: Use Tinkercad 3D Design Software 101)
  • 零基礎初學者 Tinkercad 教學(Getting Started in Tinkercad: A Tutorial for Complete Beginners)
  • 建一個相機雲台底座,超實用!(兩段影片)

  • 用 Tinkercad 做齒輪!

取得分享連結

作品預設為不公開(private),要取得分享連結,首先打開作品的設定視窗,將分享狀態改為公開(public)。



然後在作品視窗中,就可以看到分享網址了。

挑戰難度!

雖說 Tinkercad 主要是給 3D 建模初學者或興趣玩家,而且都以基本幾何形為基礎,難道 Tinkercad 不能做自由曲面模型嗎?
Tinkercad is for 3D beginners and hobbyists. But can we model complex objects in Tinkercad?
  • 製作有機形體:用曲線和曲面工具製作龍蝦(Tinkercad Tutorial - Organic Shapes: Jeff shows how to model a lobster by using some flexible shape generators.)

還想學更多 Tinerkcad 基礎或進階建模技巧的朋友,請上 YouTube 搜尋 Tinkercad 即可找到一堆教學和示範。不過,如果複雜度較高,建議還是改用進階工具,例如 SketchUp Free 或 SketchUp Make。

2018-02-20

轉換 ClarisWorks 或 AppleWorks 歷史文件

2018 的今天,Mac 上的 ClarisWorks 和 AppleWorks 消失已久,更遑論讀取他們的文件。正好手邊有一小批 ClarisWorks 檔案亟需讀取、轉檔,花了點時間研究可行辦法。

懷念 ClarisWorks 的老骨頭們,可以讀讀這篇 A Brief History of ClarisWorks

當然,最忠於原味的方法,就是找到一部舊電腦、裝上舊系統、安裝 ClarisWorks 或 AppleWorks,然後打開檔案、另存新檔。

不過上述方法實在太過勞師動眾,另外有兩個折衷的辦法。

方法一是安裝 LibreOffice(前往官網下載),它支援開啟 ClarisWorks 文件(歡呼!),而且能保留原來格式,非常好用!但是,但是,它不支援中文。

方法二可以找回中文資料,且需要一些小技巧,而且無法保留格式,但能找回本文也算是萬幸了。

首先,下載並安裝 Tex-Edit Plus(官網和下載點在此)。這個小軟體支援 Mac OS 10.4 到 10.12(在 10.13.3 測試 OK),它可以很暴力的把任何檔案用純文字模式開啟。

安裝完成後,執行 Tex-Edit Plus,按著 Option 並點選 File 選單,此時 Open... 變成 Open Any as Text... 暴力開啟模式,然後選擇要轉檔的 ClarisWorks 文件。

打開 .cwk 文件後,會發現都是亂碼,沒關係,不要做任何編輯動作!直接將檔案轉存為純文字檔,選擇 File > Save As...,然後 File type 選 SimpleText,檔案命名時,副檔名改用 .html,不要用 .txt,例如:舊資料.html。

然後,回到桌面,將剛剛轉存的純文字檔用瀏覽器開啟,應該就會看到中文內文了。如果中文內文沒有顯示,試著手動把編碼改為 BIG-5 試試。文件中出現的亂碼多數是格式控制碼,可忽略,僅需擷取純文字部分的內文,資料能救多少算多少。

注意:Chrome 無法手動變更頁面編碼,建議用 Safari 或 Mozilla Firefox。如果離不開 Chrome,可用這個外掛 Set Character Encoding

2018-02-17

Design Informatics Lab 閱讀書單 & 參考資料

本文件更新記錄

  • 2018.02.17初稿

主題關鍵詞

  • Design Informatics 設計資訊學
  • HCI; Human-Computer Interaction 人機互動
  • CHI; Computer-Human Interaction 人機互動
  • Human-Machine Interface 人機介面
  • UI; User Interface 使用者介面
  • Interaction Design 互動設計
  • Information Design 資訊設計
  • Information Architecture 資訊建築;資訊架構
  • AI; Artificial Intelligence 人工智慧;人工智能
  • Machine Learning 機器學習
  • Design Thinking 設計思考
  • Cognitive Science 認知科學
  • Cognitive Psychology 認知心理學
  • Smart Cities 智慧城市;智能城市
  • Smart Citizens 智慧公民;智慧市民
  • Civil Science 公民科學
  • Civil Engagement 公民參與
  • Smart Machine 智慧機器;智慧機械
  • IoT; Internet of Things 物聯網
  • Cloud Computing 雲端運算
  • Fog Computing 霧運算
  • Edge Computing 邊界運算;邊緣運算
  • Material Computation 材料運算
  • Robotics 機器人學
  • Drone 無人載具(不一定是飛行器,可以是陸地或水中載具)
  • UAV; Unmanned Aerial Vehicle 無人飛行載具
  • UAS; Unmanned Aircraft System 無人飛航系統
  • Systemic Design 系統性設計
  • Systematic Design 系統化設計

設計思考 & 認知科學

  • 諾曼大師(Donald A. Norman)系列書籍
    • The Design of Everyday Things (1988, 2002) [中譯] 設計的心理學:人性化的產品設計如何改變世界,遠流
    • Things that Make Us Smart (1993)
    • The Invisible Computer (1998)
    • Emotional Design (2004) [中譯] 情感@設計:為什麼有些設計讓你一眼就愛上,遠流
    • The Design of Future Things (2007) [中譯] 設計未來生活-善體人意的機器,還是不受控制的麻煩,遠流
    • Living with Complexity (2011)
  • 書籍
    • On Intelligence: How a New Understanding of the Brain will Lead to the Creation of Truly Intelligence Machines. Jeff Hawkins & Sandra Blakeslee. [中譯] 創智慧:理解人腦運作、打造智慧機器,遠流
    • The Logic of Architecture : Design, Computation, and Cognition, William J. Mitchell, MIT Press. [中譯] 建築的設計思考:設計、運算與認知,藝達康
  • Salingaros 教授課程與文章
  • 臉書社團:

人機互動 & 互動設計

  • 書籍
    • Where the Action Is: The Foundations of Embodied Interaction, Paul Dorish, The MIT Press
    • Interactive Architecture, Michael Fox and Miles Kemp, Princeton Architectural Press.
    • Designing Interactions, Bill Moggridge, The MIT Press. [中譯] 關鍵設計報告:改變過去影響未來的互動設計法則,麥浩斯出版(可當做電腦科技史來讀。可惜中譯品質欠佳,讀英文版比較好,並請多利用官方提供的網路互動版。)
  • Interaction Design Foundation 互動設計基金會
  • 人機互動臉書社團 Human-Computer Interaction
  • User Interface 使用者介面關鍵詞

智慧城市 & 未來趨勢

  • 書籍
    • City of bits: space, place and the infobahn. William J. Mitchell. The MIT Press. [中譯] 位元城市,天下文化
    • Smart Cities: Big Data, Civic Hackers, and the Quest for a New Utopia. Anthony M. Townsend. [中譯] 城市的未來,應該要是什麼樣子?公民世代,用智慧科技搭建明天的樣貌,張美惠譯,臉譜出版

Maker Movement 紀錄片