Loading document…
Opening in Pages for Mac...
Your browser isn’t fully supported.
For the best Pages for iCloud experience, use a supported browser.
Learn More
Cancel
Continue
美
感
程式設計
前言
關於
設計
1.
準備開始吧
2.
變數
幾何
3.
無窮迴圈
4.
數據採集
5.
自動
生產器
6.
物件
抽象
化
7.
語音程式
碼
8.
查詢
（酷兒）
數據
9.
演
算
法過程
10.
機器
反
學習
後記：反復出現的想像
參考書目
計畫
清單
展示
櫥窗
致謝
下載
範例
程式碼
Git
存儲庫
購買
紙本書
下載為
pdf
參考書目
1
美感
程式設計
：軟體研究手冊
Aesthetic Programming: A Handbook of Software Studies
By Winnie Soon
（孫詠怡）
and Geoff Cox
這本書從程式設計內部探索
其
技術
與
文化想像。
因為
軟體程式日益增長的重要性
，
需要一種
新的文化思維和課程，
讓演
算法
過程
、數據處理和抽象
化
的政治
及
美學
能
更好
地被
理解與解
釋
，這
是
本書
遵循
的
原則
。另外，這本書
特別
感興趣的是
技術主
體
所涉及
的，例如：與
階
級
、
資本主義、性別
、
性
、
種族
、
殖民主義遺產
之間，
相對未被承認的權力關係。這不僅與
再現
政治
（
politics of representation
）
有關，也與非
再現（
nonrepresentation
）
有關：在二
元
邏輯、層
級
結構、屬性命名
等
方面，程式碼如何隱含
著
權力差異
？還有
電腦計算
又是
如何
加強和延續特定的世界觀
？
使用
p5.js
介紹
及示意＊美感
程式設計＊的反思性實踐，
讓學寫
程式做為理解和質疑現有
科技物
及範
本
的一種方式，
也
探索
為
更廣泛的生態
－
社會
－科技
系
統
重新編撰程式
的潛力
。
本書遵循這種方法做為一個
可開放
修改
及編撰不同版本
的
電腦
計算
物
。
Web
https://www.aesthetic-programming.net
Repository
https://gitlab.com/aesthetic-programming/book
Published by Open Humanities Press 2020
https://openhumanitiespress.org/
ISBN (print)
978-1-78542-094-
8
ISBN (PDF)
978-1-78542-093-1
2
目錄
前言
–
這是一本什麼樣的書？
What kind of book is this?
13
–
為什麼美感程式設計？
Why aesthetic
programming? 14
–
那麼軟體研究什麼？
And software studies? 16
–
開放式出版
Open publishing 17
–
內容編排方式
Flow of contents 18
–
書本物
The book object 21
–
筆記
Notes 22
關於設計
Design notes
–
書籍排版
Book layout 25
–
字體採用
Fonts 25
1.
準備開始吧
Getting started
–
設置（）
setup() 29
–
開始（）
start() 30
–
工作環境
Working environment 31
– p5.js 32
–
編輯器
Code editor 33
–
我的第一個程式
My fi rst program 35
–
課堂練習
Exercise in class 36
–
在網頁控制台讀取「
Hello World
」
Reading the web console “Hello World” 37
–
閱讀參考說明
Reading the reference guide 39
– Git 42
–
儘管（）
While() 44
–
迷你習作：執行檔及閱讀欓
MiniX: RunMe and
ReadMe 46
–
必讀
Required reading 47
–
延伸閱讀
Further reading 47
–
筆記
Notes 48
2.
變數幾何
Variable geometry
–
設置（）
setup() 53
–
開始（）
start() 55
–
原始碼
Source code 56
–
座標
Coordinates 58
–
課堂練習
Exercise in class 58
–
變數
Variables 60
–
為何使用變數？
Why use variables? 62
–
其他函式
Other functions 63
–
條件結構
Conditional structures 63
–
關係運算子
Relational operators 64
–
基本算術運算子
Basic arithmetic operators 65
–
隨堂討論
Discussion in class 66
–
儘管（）
While() 66
–
迷你習作：幾何表情符號
MiniX: Geometric emoji
68
–
必讀
Required reading 69
–
延伸閱讀
Further reading 69
–
筆記
Notes 70
3.
無窮迴圈
Infi nite loops
–
設置（）
setup() 73
–
開始（）
start() 74
–
課堂練習（解碼）
Exercise in class (Decode) 75
–
原始碼
Source code 77
–
函式
Function 78
–
課堂練習
Exercise in class 79
–
轉化
Transform 79
– push() and pop() 81
–
課堂練習
Exercises in class 83
–
星號繪畫
Asterisk Painting 83
–
原始碼
Source code 84
–
課堂練習
Exercise in class 86
–
陣列
Arrays 87
–
條件語句
Conditional statements 89
–
迴圈
Loops 89
–
儘管（）
While() 92
–
迷你習作：設計一個跳動者
MiniX: Designing a
throbber 93
–
必讀
Required reading 94
–
延伸閱讀
Further reading 95
–
筆記
Notes 96
4.
數據採集
Data capture
–
設置（）
setup() 99
–
開始（）
start() 100
–
課堂練習（解碼）
Exercise in class (Decode) 101
–
原始碼
Source code 101
–
文件物件模型的元素：建立按鈕、賦予造型
DOM
elements: creating and styling a button 103
–
採集鼠標
Mouse capture 104
–
採集鍵盤
Keyboard capture 105
–
採集聲音
Audio capture 106
–
採集影像／臉部
Video/Face capture 107
–
課堂練習
Exercise in class 110
–
採集的概念
The concept of capture 111
–
網頁分析與熱圖
Web analytics and
heatmap 111
–
表格元素
Form elements 112
–
讚的度量衡
Metrics of likes 113
–
語音與聲響數據
Voice and audio data
114
3
–
健康追蹤器
Health tracker 115
–
儘管（）
While() 115
–
迷你習作：採集一切
MiniX: Capture All 117
–
必讀
Required reading 118
–
延伸閱讀
Further reading 118
–
筆記
Notes 119
5.
自動生產器
Auto-generator
–
設置（）
setup() 123
–
開始（）
start() 126
–
課堂練習（
10 PRINT
）
Exercise in class (10
PRINT) 127
–
蘭頓螞蟻
Langton’s Ant 128
–
原始碼
Source code (Langton’s Ant) 131
–
閱讀
蘭頓螞蟻
Reading Langton’s Ant 133
–
二維陣列與巢狀
for
迴圈
Two-dimensional arrays &
nested for-loops 134
–
課堂練習
Exercise in class 135
–
儘管
While() 136
–
迷你習作：生產器程式
MiniX: A generative
program 139
–
必讀
Required reading 140
–
延伸閱讀
Further reading 140
–
筆記
Notes 141
6.
物件抽象化
Object abstraction
–
設置（）
setup() 145
–
開始（）
start() 146
–
課堂習作（解碼）
Exercise in class (Decode) 148
–
原始碼
Source code 149
–
階級
Class 153
–
物件
Objects 154
–
創建物件－階級
Class-Object creation 158
–
課堂習作
Exercise in class 158
–
延伸筆記
Further notes 159
–
儘管（）
While() 160
–
迷你習作：物件遊戲
MiniX: Games with objects
162
–
必讀
Required reading 163
–
延伸閱讀
Further reading 163
–
筆記
Notes 164
7.
語音程式碼
Vocable code
–
設置（）
setup() 167
–
開始（）
start() 168
–
課堂練習（解碼）
Exercise in class (Decode) 169
–
質地
Textuality 171
–
屬性
Type 172
–
條件結構
Conditional structure 173
–
JavaScript
物件標註
JSON 175
–
原始碼
Source code 178
–
課堂練習
Exercise in class 180
–
儘管（）
While() 181
–
迷你練習：
E-lit
MiniX: E-lit 184
–
必讀
Required reading 185
–
延伸閱讀
Further reading 185
–
筆記
Notes 186
8.
查詢（酷兒）數據
Que(e)ry data
–
設置（）
setup() 189
–
開始（）
start() 190
–
課堂練習
Exercise in class 190
–
影像處理：取得、載入、顯示
Image processing:
fetching, loading and display 191
–
原始碼
Source code 193
–
練習：進入網頁應用程式介面（一步一步來）
Exercise: accessing web APIs (step by step) 194
–
應用程式介面
APIs 196
–
查詢（酷兒）數據
Que(e)rying data 197
–
課堂練習
Exercise in class 200
–
載入像素（）
LoadPixels() 201
–
不同種類的蟲
Different types of bugs 204
–
儘管（）
While() 205
–
迷你習作：和應用程式介面一起工作（團體）
MiniX: Working with APIs (in a group) 207
–
必讀
Required reading 208
–
延伸閱讀
Further reading 208
–
筆記
Notes 209
9.
演算法過程
Algorithmic procedures
–
設置（）
setup() 213
–
開始（）
start() 214
–
隨堂討論
Discussion in class 214
–
流程圖
Flowcharts 215
–
課堂練習
Exercise in class 217
–
練習一
Exercise 1 217
–
練習二
Exercise 2 217
–
流程圖做為一個藝術媒介
Flowcharts as an
artistic medium 218
–
儘管（）
While() 220
–
迷你練習：流程圖
MiniX: Flowcharts 222
–
必讀
Required reading 223
–
延伸閱讀
Further reading 223
–
筆記
Notes 224
10.
機器反學習
Machine unlearning
–
設置（）
setup() 229
–
開始（）
start() 231
–
介於輸入與輸出之間
Between input and output
231
–
課堂練習
Exercise in class 232
–
學習演算法
Learning algorithms 233
–
ml5.js
函數庫
ml5.js library 237
–
原始碼
Source code 238
4
–
閱讀章節自動生產器
Reading Auto
Chapter Generator 241
–
課堂練習
Exercise in class 243
–
儘管（）
While() 243
–
迷你練習
MiniX: fi nal project 246
–
必讀
Required reading 248
–
延伸閱讀
Further reading 248
–
筆記
Notes 249
後記：反復出現的想像
Afterword: Recurrent
imaginaries
–
設置（）
setup() 261
–
開始（）
start() 262
–
環磷酰胺
Cyposate 262
–
原始碼
Source code 263
–
p5
陷阱
p5.trapgares 263
–
風格（）
Style() 263
–
臉部文字
Facial literale 264
–
已加載；這部分
Loaded; the section 264
–
純程式碼
NaveCode 264
–
推送和宣示
push and statement 265
–
課堂練習
Exercise in class 266
–
學習
Learning 266
–
翻譯然後填充響應值區域
Translate then fi lled
respond value areas 267
–
結構體
structure 267
–
大馬三
Omazo 268
–
打開
Open 269
–
儘管（）
While() 269
–
迷你練習：幾何圓盤介導的
MiniX: Geometric
disclmmediated mobinal 270
–
必讀
Required reading 272
–
延伸閱讀
Further reading 272
–
筆記
Notes 273
參考書目
Biliography
計畫列表
List of Projects
致謝
Acknowledgments
版權頁標記
Colophon
5
前言
Preface
##
這是一本什麼樣的書？
正如
書本
副標
寫的
，這本書
希望
成為一本手冊，但不
像傳統技術手冊一樣教導一套既定的操
作
。
[^
1
_instuctions]
閱讀
這本書的方式
不
僅
是學
寫程式語言
，也不
只
是
針對寫程式的實踐
提供批判性的意見
，而是
提供了一些
更
混亂但同時
我們會說是
更
「
有用
」
的東西：一本關於
寫作、編碼和思考之間更複雜和更深層次糾纏關係的書。
[^
2
_useful]
大多數程式設計書籍的主要目的是教讀者如何學習程式語言以成為一名優秀的（或更好的）
程式設計師，
強調
最先進的技術，以及解釋和然後被設計用於與技術相關或創意產業。很少
有程式設計書籍將程式設計的文化和美學維度做為批判性思考和行動的一種手段。
3
涉及計
算技術的新興跨學科領域
——
例如軟體研究、平台研究和數字人文科學
——
在一定程度上融
合了程式設計的實踐。程式設計進入研究對象，但在將程式設計置於批判性視角方面提供的
實際細節很少，特別是對於那些學習非技術或非科學學科的人。本書試圖解決現有文獻與
對
“
計算思維
”4
日益增長的興趣之間的差距，以將程式設計擴展到計算機科學或軟體工程
（甚至數字人文學科，最終會帶來另一組限制）的範圍之外。我們認為我們的方法在這方面
不同於其他書籍，也不同於其他理論書籍，在這些書籍中，原始碼成為程式設計師思維的說
明或隱藏操作層的過於簡單的類比（如果沒有完全忽略的話）
.
雖然本著軟體研究的精神
5
廣泛運作，但本書提供了一種應用的、公開的基於實踐的方法來
理解程式設計的重要性
——
閱讀、寫作和思考軟體
——
做為我們這個時代的關鍵工具，以認
可方式我們的經驗越來越程式化。它被提供為最廣泛意義上的深度學習
“
工具
”——
一本為那
6
些不習慣程式設計的人準備的手冊
——
它允許程式設計師在技術上變得更加熟練時發展他們
的概念技能。
重申這一點，我們的目的是讓讀者獲得關鍵的程式設計技能，以便閱讀、編寫和思考程式碼
（我們稍後將回到讀寫問題）。我們認為進一步探索程式碼的技術和概念方面的交叉點很重
要，以便深入反思計算文化的普遍性及其社會和政治影響
——
從人機語言的語言到對象的抽
象、數據化例如，自動化機器智能的最新發展。換句話說，這本書包含了程式碼的技術方面
和形式質量，並開闢了程式碼的想像，包括承認程式設計實踐的物質條件、程式碼本身的非
人類代理，以及它在更廣泛的範圍內的內在關係。生態。
除了學習程式設計，我們的目標是彌合計算文化、美學和文化研究理論之間的差距。做為其
中的一部分，我們對未被充分承認的權力關係特別感興趣，例如與階級、性別和性行為相關
的不平等和不公正，以及種族和殖民主義的持久遺產。
6
這不僅與我們自己的主體地位和文
化背景（有關這方面的更多信息，請參閱我們的傳記）和再現政治（主體與主體表示之間的
競爭空間），以及權力差異如何隱含在程式碼中二元邏輯、層次結構、屬性命名、可訪問性
以及更廣泛的社會不平等如何通過非代表性計算進一步加強和延續。簡而言之，該手冊介紹
並展示了一種獨特的方法，用於在我們解釋和執行它時我們稱之為
“
審美程式設計
”
的反思性
實踐，以及它如何構成我們做為主體。
– Why aesthetic programming? 14
為
何美感程式設計
？
7
本書遵循的論點是，計算文化不僅是一個用來提高解決問題和分析技能的時尚話題，或者是
一種了解更多計算過程發生的事情的方式，而且是一種參與程式設計以提出問題的方法。現
有的技術範式，並進一步改變技術系統。因此，我們認為程式設計是一種動態的文化實踐和
現象，一種思考和做世界的方式，以及一種理解構成我們生活現實的一些複雜程式的手段，
以便對這些現實採取行動。
在我們看來，
“
審美程式設計
”
這個詞有用地描述了這種方法。我們聲稱在這方面具有一定的
獨特性，但當然審美程式設計與近年來相關文獻中引入的其他短語如
“
創造性編碼
”
和
“
探索
性程式設計
”
相近，以強調計算機程式設計超越實用和功能，其中文化生產，或使用程式設
計實踐的批判性思維，可以從藝術和人文學科的廣闊視角發展。
7
應該解釋的是，
“
審美程
式設計
”
這個標題實際上來自於一門本科課程。丹麥奧爾胡斯大學的數字設計學位課程，自
2013
年以來一直與軟體研究課程並行教授。
綜合起來，按照設計，這些課程提供了使用軟
體的思維方式，以了解更廣泛的政治和美學現象。
8
我們遵循的原
則是，軟體日益增長的重
要性需要一種新的文化思維，
nd
課程，該課程可以解釋並從內部更好地理解算法程式、數
據處理和抽象建模的政治和美學。本書的結構主要來自教授這些課程的經驗，我們要感謝所
有學生和老師在此過程中所做的寶貴貢獻和重要反饋。
9
延續
對美學的討論，
應該要澄清我們所指的不是
美的概念
，就如它通常的被誤解的
（又名
資產階級美學），而是政治
性的
美學：是
把那些把自己獻給感知－
製造經驗和身體
覺察的東
西（
political aesthetics: to what presents itself to sense-making experience and bodily
perception
）
（
引用賈克
・
洪席耶［
Jacques Rancière
］
的《美學政治》
(The Politics of
8
Aesthetics
，
做
為一個關鍵參考
）
。
10
我們如何在這種政治意義上感知世界不是固定的，而
是不斷變化的，就像軟體本身一樣，受更廣泛的條件和生態的約束。
政治美學可以追溯到法蘭克福學派的批判理論，特別是西奧多
·
阿多諾和沃爾特
·
本雅明的思
想，這些思想強化了文化生產
——
現在自然包括程式設計
——
必須在社會背景下看待的概
念。這樣理解，程式設計就變成了一種理解物質條件和社會矛盾的
“
力場
”
，正如對藝術的解
釋曾經
“
做為一種程式碼語言來處理社會中發生的過程。
”11 -
引用本傑明關於技術可複制性
的文章已成為打破一些藝術生產神話的試金石，包括拆除
“
光環
”
（藝術品真實性和原創性的
標誌）的審美體驗。
12
同樣值得記住的是，阿多諾和本雅明不同意這種光環破壞的後果是
著名的：雖然本雅明表達了這種轉變的積極方面，並將光環的破壞視為一種政治解放，但阿
多諾表達了標準化和偽個性化隨之而來的消極觀點。似乎這兩種趨勢都隨著計算文化而加
速，因此持續需要尖銳的批評，而且一種也基於
“
內在批評
”
的路線，這是固有的，因為它在
其對象內運作，在內部運作中
13
然而，這些舊的（白人、男性）參考文獻在多大程度上能
夠解決計算操作的複雜性，並解決大多數人使用計算機或思考的方式，這仍然是個問題。他
們。這與美學程式設計正在成為什麼有關，也與它現在或曾經是什麼有關，以及為什麼我們
仍然從這些參考文獻出發，同時也意識到它們本身存在問題，並且需要替代方案。
如果一切都在變化中，就像看起來一樣，那麼我們也需要對我們接受的方法保持敏感，因為
它們基於西方的知識生產傳統和進步觀念，根植於歐洲殖民主義和榨取實踐。
14
我們發現
Anna Lowenhaupf Tsing
的工作在這方面很有用，因為它提供了一種女權主義的觀點，其中
不確定性被更認真地對待以反映生活條件的不穩定。
15
我們的歷史和技術理論不僅與此相
關，而且批判性實踐和其他非人類想像。正如
Tsing
所說，其他生態基於
“
組合
”
的想法開闢
9
了多方向、跨時間和跨尺度、更加開放和不確定的思維方式。
16
我們不像她那樣從蘑菇中
尋找靈感，而是技術本身的內在和相關性。更準確地說，我們一直在研究基本的程式設計概
念，例如幾何和對象抽象；循環和時間性；數據和數據化；變數、功能及其命名，以及數據
捕獲、處理和自動化，做為進一步審美反思的起點，技術功能由此為進一步理解文化現象的
構建和運作方式奠定了基礎。
從這個意義上說，審美程式設計被認為是一種構建事物和創造世界的實踐，但也產生了利用
計算機科學、藝術和文化理論的內在批判。從另一個方向來看，這與
Philip Agre
的
“
批判性
技術實踐
”
的概念很接近，它將形式技術邏輯和話語文化意義結合在一起。
17
換句話說，這
種方法需要對程式設計的實際理解和知識，以支持批判性理解技術文化系統，以兩個領域的
專業知識水平為基礎（例如
Wendy Hui Kyong Chun
或
Yuk Hui
，他們具有跨學科專業知識
18
）。這種實用的
“
知道
”
也指向
“
做思考
”
的實踐，
19
採用多種程式設計方式來探索寫作、
編碼和思考之間的關係，以想像、創造和提出
“
替代方案
”
。
20 By
以這些方式參與美學程式
設計，我們的目標是進一步
“
奇怪
”
關鍵和技術實踐的交叉點，正如我們在本書中提到的許多
例子（參見
“
項目列表
”
，並以我們對
Winnie Soon
作品的引用為例）全文），並進一步討論
在技術學科中相對未被承認的權力關係。我們希望鼓勵越來越多的人以這種方式來挑戰領域
和實踐的分離。
– And software studies? 16
和軟體研究？
10
