---
tags: Old Version
---

:::info
Ch.1: Getting started (https://gitlab.com/aesthetic-programming/book/-/tree/master/source/1-GettingStarted)
:::

# Ch.1: 入門（Getting Started）


## 設置（）setup()

將程式設計納入各級教育和跨學科學程有逐漸普及的趨勢。然而，在藝術和人文學科方面或許因學生職業抱負和學習程式設計關聯性不明確，仍少見這樣的訓練內容。這個問題延伸涉及課程規劃中所包含或排除哪些項目，為什麼會如此的原因，以及在不同研究科目之間，哪些知識和技能被列為必備基礎，哪些則否。這些篩選加強了特定形式的特權（與階級、性別、種族有關）。如從更廣的文化層面來談，傳統分野「高文化」為受過大學教育（富裕、白人）的人的領域，而「低文化」則是未受過大學教育（工人階級）的普通人的領域。無論是高文化還是低文化，程式設計跨越了這樣的階級鴻溝做為一種獨特和專業的實踐[^1967] ，植根於獲得在工作和娛樂中應用於現實世界的技能。然而儘管程式設計可以被廣泛運用，要能從生產層面掌握其操作仍舊是個問題。

比方說，傳統上適用於閱讀和寫作技能的識讀能力（literacy，或譯作素養），或許能在此進一步涵蓋了程式碼的閱讀和編寫。事實上，寫程式通常被稱作「今日的素養」，並被概稱為「我們必須學會掌握」的二十一世紀技能。[^STEM] 了解一些基本的程式設計技術可以說不僅能提高未來的就業能力，還可以更好地理解事物（程式碼）是如何被「編寫」和「解讀」的。[^Hall] 安妮特・維（Annette Vee）2017 年出版的 *《編碼素養》（Coding Literacy）* 進一步呼應文化研究的基礎在於擴展日常文化識讀力的概念，是一種將關注力從科技技術轉移到更廣泛的社會關係的嘗試。如她所述，「根據從識讀能力的歷史、社會和概念脈絡來看待程式設計有助於我們了解電腦程式設計做為一種重要的溝通現象，而不僅僅是另一種新技能或科技。」[^Vee]

那麼，以識讀能力為框架的程式設計有什麼樣的涵義，並適用於誰？儘管安妮特・維的書不是一本程式設計書，也沒有談到該如何設計程式，但它將寫作與程式設計之間的平行歷史編織在一起，比較和追溯了識讀能力從更廣層面上來看究竟涉及了什麼意義，還有如何理解運算的興起和程式碼與程式設計的重要性，與周遭衍生的文化討論。事實上，在電子文學、數位人文和軟體研究領域並行討論書寫和編碼、文本和程式碼之間的關係已漸普遍。[^Cayley]（這種平行也是我們將在第七章「語音程式碼」更詳細發展的東西。）它適用於所有人。我們期盼閱讀和使用本書來促進編碼素養的擴展，從安妮特・維關於編碼素養的論點中獲得靈感，不再只是「為了理解而閱讀」，而且是「為了技術思想而閱讀，也為復雜結構和想法而書寫。」[^Vee2] 它不僅僅是一種新的識讀方式，也是一種新的思維方式和理解其他編碼的方式。這種論述認為識讀能力不僅有助於個人獲得技能，並且具有潛在、廣泛的文化和社會影響，有助於使程式設計脫離學科專業的局限，並打開其批判和美學潛力。

2016 年，詩人和學者尼克・蒙特福特 (Nick Montfort) 出版了《藝術與人文探索性程式設計》，以容易上手的方法來談程式設計。在附錄中，他概述了三個關鍵原因來回應「為何設計程式？」[^Montfort]： 使我們能夠引入不同的方法和觀點來提出新問題，從而以新的方式思考；讓我們更好地了解文化和媒體系統，讓我們之後可以學習去開發更好的文化系統，或是如何更妥善地去分析這些系統文化；藉由創建、設計和探索程式設計來幫助改善社會。總之，我們同意蒙特福特的觀點，將以程式設計視為打開不同工作方法的一種手段，並做為我們思考的基礎，思索程式設計實踐的另一種形式和政治想像。

這個入門章節介紹了一些想法和練習（可以說是 `setup()`），並反思為什麼需要學習程式設計。希望這有助於保持在後續章節中的學習動力。此外，因為我們認為讀者不一定想成為專業程式設計師，所以我們強調程式設計是一種以不同方式思考的手段（正如我們在前言中試圖概述的那樣）。這也適用於我們在此過程中從其他人那裡學到的東西，挑戰了我們的先入之見，特別是通過與很少或沒有程式設計經驗的學生一起工作的經驗。學習編碼可以是愉快和有益的，但也很煩人和令人沮喪，尤其是在涉及復雜的語法和結構時。熟悉精確的、無情的運算邏輯和程式需要時間，但希望學習程式設計的重要性現在已經確立。選擇很簡單：「設計程式或被程式設計」。[^Rushkoff]

## 開始（）start()

*圖1.1： p5.js 網頁介面*

在整本書中，我們將使用 JavaScript 做為主要的程式設計語言，主要專注 p5.js 及其相關函式庫。p5.js 是一個以網頁為基礎的函式庫，[^library] 它利用了 JavaScript 開源框架，讓人可以讀取在網頁上使用程式碼創建的專案，並且更容易通過網路分享，例如 p5.js Web Editor 、Open Processing 和 Git 伺服器平台，無需額外安裝。可以在瀏覽器中使用 URL 網址來執行 JavaScript 基礎架構的專案。

JavaScript 由 Brendan Eich 於 1995 年開發，最初是為了在 Netscape 瀏覽器中運行程式。[^Severance] 一些人可能會混淆 JavaScript 和 Java，但基本上它們是兩個不同的系統。 JavaScript 是一種輕量級程式設計語言，通常用於視覺動畫和網頁互動程式，最初是為了增進使用者端的界面體驗並補充 Java。實際上，任何「高級程式語言」（即更接近人類語言但更遠離機器可讀的語言）都需要翻譯成本地的機器指令/程式碼，以便電腦運行和執行。這個翻譯過程通常是通過解釋器或編譯器來完成的。 JavaScript 的設計是一種解釋型語言，在現代瀏覽器中，通常使用解釋器和即時編譯器在運行時翻譯原始碼。[^Clark] 這使得啟動程式碼運行過程速度更快，但當應用程式較複雜且互動時間長時，需要更長的時間，因為會產生額外的運算負荷。[^Moon] 另一方面，Java 是一種經過編譯的複雜程式語言，於 1996 年由 Sun Microsystems 首次公開發布，這意味著原始碼通常是在集成開發環境 (IDE) 中編寫的。[^IDE] 需要優化並編譯成靜態位元碼供 Java 虛擬機 (JVM) 進行處理。[^JVM] 許多電腦與手機程式由 Java 寫成，從 Android 小型應用程式到 Minecraft 等遊戲，[^Minecraft] 而 JavaScript 主要適用於以網頁為基礎的小應用程式，例如網站和機器人。對於這樣的程式設計入門書，我們需要一些相對簡單但也能夠成熟發展能力的東西，也稱作「低地板和高天花板」，[^Papert] 從這個角度來說， JavaScript 是一個好工具。

本書將使用藝術家 Lauren McCarthy 在 2014 年創建，以 JavaScript 為基礎開發的 p5.js，函式庫，除了從實用的角度介紹該工具以外，也以我們所謂的「美感程式設計」角度來進行探索。如欲更準確了解其譜系，Casey Reas 和 Ben Fry 在 2001 年開發了具有影響力的開源專案 Processing，[^Processing] 這是一個以 Java 為基礎在桌機上運作的環境，受到視覺藝術家和設計師的親睞。然而，McCarthy 觀察到，各種創造性開源軟體大多由白人男性開發，在這種環境中缺乏多樣性，而程式設計仍然是一個非常男性主導的領域。[^laczko] McCarthy 開始探索 Processing 在網頁上或許可以有的樣子。重要的是，p5.js 的核心思想不僅是將 Processing 部署為基於網頁的運作平台，而是更是認真對待軟體開發和交流的多樣性和包容性問題。正如 McCarthy 所說，「思考社區外展和多樣性不是 p5.js 的次要目標，而是構成整個平台的基礎。」[^McCarthy] 在短短幾年內，p5.js 貢獻者發展了社區宣言，將界面翻譯成多種主流語言，如西班牙語和簡體中文，[^Chinese] 做為 p5.js 啟動計畫一部分的主頁系列，採訪並呈現了多位亞洲的女性和非順性別程式設計師，[^Jin] 為視障者添加了高對比模式和語音反饋系統，[^UX] 並為聽力障礙者開發了一系列名為「手語程式設計師」的創意表達研討會，[^Choi] 等等。正如 p5.js 所示範的，軟體不僅僅是一種工具，也和人與政治有關。[^chun]

## 工作環境

您將需要一個編輯器來編寫和記錄程式碼。我們將使用 [Atom](https://atom.io/)，[^Atom] 一個免費和開源的文字和原始碼編輯器，可跨不同平台編寫程式碼。我們選擇可下載的程式碼編輯器而不是網頁編輯器，因為我們將程式碼視為不僅僅是一個軟體，它還與電腦和操作系統的配置、各種瀏覽器以及數據文件的行為方式、文件夾路徑的組織等有關係。

此外，我們使用 [Gitlab](https://about.gitlab.com/) 做為我們的程式碼和文字存儲庫，至少在本書中是這樣。我們也將 Gitlab 用於教學目的，學生每周可以在這裡上傳他們的 ReadMe 和 RunMe 文件，用於促進同儕反饋及學習，以及閱讀和分享程式碼和相關思考。我們發現這是獨立和集體工作的有效方式，並根據自由和開源軟體開發的最佳原則共享材料，學生使用 Readme 文件來解釋技術方面以及開展批判性討論。

## p5.js

1. 首先進入 p5.js[^p5js] 的[下載頁面](https://p5js.org/download/)，以壓縮的「p5.zip」格式點擊並儲存檔案，獲得運行程式碼所需的完整 p5.js 函式庫。

2. 解壓縮檔案以提取其中所有的文件。這將自動創立一個名為「p5」的新文件夾。

3. 下一部分對正在進行的開發過程至關重要，因為您必須以某種方式確定工作文件夾的位置。如果您不知道，可以考慮使用「桌面」做為文件夾。 （「整理文件夾」是一個來在你的設備上組織文件的概念，類似在書架上組織文件、檔案夾、書籍。日益精簡的 UX 設計意味著人們愈來愈不喜歡尋找和定位文件，例如照片的路徑及目錄，而是習慣將所有內容都放在手機的前幾頁或是桌面上。）

4. 如果您將解壓縮後的文件夾「p5」放在自定義目錄中，那麼您應該看到文件夾中的文件列表如下。您應該看到兩個 p5.js 函式庫，一個綜合文件 (p5.js) 和一個迷你版本 (p5.min.js)。

5. 點擊文件夾「empty-example」，你會看到你需要啟動的文件列表：

> index.html
> ：初始設定的超文本標記語言 (HTML)，它將首先被網頁瀏覽器選定。HTML 是一種用於定義網頁結構的基本技術，可以自行客製來包含文字、鏈接、圖像、多媒體、表格和其他元素。

> sketch.js
> ：編寫 JavaScript 的關鍵工作文件。「素描」一詞的使用方式與視覺藝術中的使用方式類似，換句話說，它是一種不太正式的去製定、捕捉想法以及嘗試構圖的方式。

> p5.js
> ：p5.js 核心庫。

> p5.sound.js
> ：p5.js 聲音函式庫[^sound] 用於網絡音效功能，包括播放、接收音訊輸入、音訊分析和合成等功能。

*圖 1.2：p5 資料夾層級*

*圖 1.3：p5 資料夾層級*

## 編輯器

本書使用 Atom 做為程式碼編輯器。它支持跨平台編輯，可以在 Mac OS、Windows 和 Linux 上運行。

1. 從主頁下載 Atom 軟體：https://atom.io/

2. 將剛剛解壓縮的「p5」文件夾拖入Atom。您應該能夠看到項目的左側窗格。嘗試導航到「empty-example」文件夾下的「index.html」文件，雙擊該文件，原始碼應顯示在右側窗格中。見下圖：

> 
*圖 1.4: Atom 的檔案結構*

「index.html」通常是網絡瀏覽器顯示的初始設定頁面。你可以自行定義頁面的標題和其他樣式，但本章的重點將是探索函式庫和執行您的第一個程式。由於 p5.js 是一個函式庫，第 8-10 行指示如何使用標籤 `<script>` 和 `</script>` 來運用 JavaScript 檔案與函式庫。

這份程式碼目前使用相對路徑，這是一個有用的概念，我們需要它來了解函式庫是如何運作、定位檔案，以及未來將來如何運用新的函式庫與檔案。 JavaScript 函式庫只是簡單的文件，我們必須將這些文件合併到 HTML 中，以便讓程式導入和讀取它們。這意味著當我們使用 p5 語法時，程式可以識別該語法和相應的函式。對於此特定示例，請務必注意 JavaScript 函式庫和 HTML 文件位於同一目錄中。如果我們將函式庫移動到其他地方，我們將需要更新路徑。

3. 接下來，您需要安裝一個名為「atom-live-server」[^liveserver] 的擴充，它對於網頁伺服器的設置很有幫助，您可以因此更新程式碼並立即在瀏覽器中查看結果，而無需刷新它。您可以先在 Atom 選單上的「Packages」查看它是否在那裡。如果沒有，則轉到「Edit > Preferences > '+ Install'，」然後輸入「atom-live-server」。點擊藍色的安裝按鈕，您應該可以在 Packages 選單中再次找到它。

*圖 1.5：安裝 atom-live-server*

4. 如果您想自定義面板的背景顏色等主題，可以到「Preferences > Themes」進行設定。

## 我的第一個程式

初始設定的 sketch.js 是一份工作文件。它只包含兩個函式。 （一個 JavaScript 函式是設計用於執行任務的程式碼區塊。）

function setup(){
// 將設置程式碼放在這裡
}
function draw(){
// 把繪圖程式碼放在這裡 
}

`function setup()`
→ 此函式中的程式碼只會被草圖工作文件「運行一次」。這通常用於設置畫布大小以定義基本草圖設置。

`function draw()`
→ 從視覺藝術的繪畫實踐汲取靈感，此函式中的程式碼將不斷循環，這意味著每一次影格（frame）運行都會調用`function draw()`。初始設定速率為每秒 60 幀/次影格，這在事物處於運動狀態或不斷被採集時特別有用（我們將在第三章「無窮迴圈」中繼續討論）。

從上面的範例程式碼中，註釋符號以「//」表示，指的是為人類而不是電腦編寫的文字。這意味著電腦在執行程式碼時會自動忽略這些註釋。你可以將其視為對特定程式碼區塊如何運作的解釋文字。在整本書中，你會看到`//` 表示單行註釋，而 `/*..................*/` 表示多行程式碼註釋，帶有起始符號「/*」和結尾符號「*/」。

讓我們嘗試將這些輸入草圖，以繪製一個帶有些微灰黑色閃爍背景的畫布，然後草圖將進一步繪製位於左上角某處的橢圓。 （仔細檢查拼寫和標點符號，如大括號和分號，分別表示函式的範圍和結尾。程式碼的詳細意涵將在下方解釋。）

function setup（）{
    // 將設置程式碼放在這裡 
    createCanvas(640, 480);
    print（“hello world”);
}
function draw（）{
    // 把繪圖程式碼放在這裡
    background(random(50));
    ellipse(55, 55, 55, 55);
}

要運行程式碼，您需要在 Atom 選單上選取「Packages > atom-live-server > Start Server」。彈出視窗後，點擊「empty-example」文件夾；它應該顯示如下內容：

*圖 1.6：我的第一個程式*

## 課堂練習

本練習旨在讓您熟悉工作環境、路徑和本地目錄，以便了解在網頁瀏覽器中運行草圖需要加載 JavaScript 函式庫的確切路徑。您也可以隨意創建自己的文件夾名稱並重命名文件 Sketch.js。也可以嘗試通過更改數字和參數來了解程式碼的運作原理，但這將在本書後面更詳細地解釋。

*圖 1.7：我的第一個程式 1.1*

1. **暫停伺服器。** 從「Packages > atom-live-server > Stop」來停止 atom-live-server。
2. **重新命名資料夾。** 嘗試將文件夾「empty-example」重命名為「myFirstSketch」（為了幫助電腦更好地處理，不要使用任何空格）。在後續章節和下面的練習中，你將創立自己的文件夾。
3. **架構 p5 函式庫。**
- 嘗試在「myFirstSketch」下創立一個名為「libraries」的文件夾。
- 將兩個 p5 庫拖到新創建的文件夾中：「libraries」。
- 更改 index.html 中兩個js函式庫的相對路徑
4. **HTML。** 更改 HTML 文件中的標題（第 6 行）
5. **再次執行。** 你能否再次運行該程式（「Atom > Packages > atom-live-server > Start Server」），並在網頁瀏覽器中看到與圖 1.7 幾乎相同的視窗？

### 在網頁控制台讀取「Hello World」

正如您現在可能意識到的那樣，本書並沒有遵循大多數程式設計書籍的習慣從「Hello World」程式開始，在螢幕上顯示或印出「Hello World」。在 p5.js 中，`print()` 是印的函式，[^print] 但在網頁瀏覽器設置中，這使得 `print()` 函式在「控制台區域」印出。這個區域不供用戶端使用，而是供程式設計師或開發人員查看是否有任何錯誤訊息、記錄到控制台並檢查程式碼是否以預期方式執行的區域。

在範例程式碼中（見圖 1.6），第四行印出「hello world」。但是要查看文字，您需要打開網頁控制台區域，該區域的位置取決於您使用的瀏覽器。試著打開選單來搜索它。例如，在 Firefox 中，它位於「工具 > Web 開發人員 > Web 控制台」下（或按鍵盤快捷鍵： Linux/Windows 按 `Ctrl + Shift + K`，或在 Mac 按 `Option + Command + K`）。

*圖 1.8：網頁控制台區*

在圖 1.8 的底部，網頁控制台區域顯示被強調的「hello world」字詞。這代表了草圖運作正常，並且能夠讀取印的函式。隨著深入本書，你會更了解網頁控制台區域的重要性，因為它還會顯示錯誤訊息，例如，如果語法上的錯誤（我們將在第八章「查詢（酷兒）數據」中討論）。在這種情況下，瀏覽器會提供一些如何為程式碼除錯的好建議。[^console] 圖 1.9 顯示網頁控制台區域能夠指出哪個文件（sketch.js），哪行程式碼（第 8 行）有問題（背景的語法是故意拼錯的），甚至建議你如何糾正它。

*圖 1.9：語法錯誤範例*

Hello World 程式在運算方面有著悠久的歷史，通常用於向初學者介紹程式設計語言，並確保一切正常運行。讀者可以從字面上理解 `print("hello world")` ，因為它用「自然」語言編寫。同時，電腦準確執行你告訴它做的事，通過「指令」印出文字，立即給出了一個成果，這可以是很另人滿足的。當程式設計師開始控制程式碼及其在世界上有意義的表達時，即時反饋「產生了一種力量感」。[^Chun2]

程式設計師學習用一種新語言表達自己，就好像第一次說話一樣，因此看似天真的話語，向世界宣布自己。Geoff Cox 和 Duncan Shingleton 的[*hallo welt! (hello world!)*](http://www.anti-thesis.net/hello-world-60/)計畫，[^Hello]就在這種交流行為中發揮作用，循環使用不同程式設計語言編寫的一百多個 Hello World 程式以及一些人類語言，將它們組合成一個即時的、多語言的、機器驅動的語言混亂（如在*巴別塔中*）。[^Babel]

## 閱讀參考說明

在進一步說明範例程式碼之前，本書將說明如何經由閱讀參考指南來獨立學習，以便你可以自行探索。在範例程式碼中，你可以在 `print()` 旁邊看到一些函式：包括 `createCanvas()`、`background()`、`random()`、`ellipse()`。

簡言之，上面的範例程式碼所做的是初始化確切的畫布大小（`createCanvas(640,480);`），將寬度設置為 640 像素，將高度設置為 480 像素，以提供整體繪圖區域（請參閱範例程式碼的第 3 行）。這就是為什麼背景僅覆蓋畫布區域而其餘區域保持（初始設定）白色背景的原因。草圖將在給定時間選擇一種隨機顏色（從灰色到黑色）做為背景顏色，覆蓋整個畫布（`background(random(50);`）。最後一部分是在某個位置畫一個一定大小的橢圓（`ellipse(55,55,55,55);`）。在 `function draw()` 中定位它，程式將不斷重複執行程式碼。透過背景色的閃爍，重複在程式碼範例中變得明顯。

*圖 1.10：參考指南範例—— ellipse()*

要了解每個 p5.js 內建函式的參數，例如像 `ellipse()` 這樣的函式中有多少個參數，我們可以轉到 p5.js 網站的[參考頁面](https://p5js.org/reference/) 。參考頁面列出了大部分可用的 p5.js 內建函式，一旦習慣了它們的呈現方式，學習和編寫這些語法將變得更加容易和快速。

讓我們一起閱讀圖 1.10 中的參考資料——[`ellipse()`](https://p5js.org/reference/#/p5/ellipse)。[^ellipse] 參考頁面通常以範例和插圖開始，您可以單擊「編輯」按鈕修改程式碼，即時更改參數，結果能立即顯示在螢幕上。描述的部分則解釋了函式語法的運作原理，這對不了解函式中每個參數含義的初學者特別有用。語法區演示了該如何精確編寫函式內建的每個參數，比方來說，在 `ellipse(x, y, w, [h])` 的例子中，它解釋了如何使用第一個參數 x 和第二個參數 y ，並根據 x 和 y 坐標設置橢圓的位置。畫布使用像素單位進行劃分，[0,0] 坐標是由畫布的左上角為初始點。參數 w 和 h 指的是橢圓的寬度和高度，您也可以將其視為定義橢圓的直徑或設置大小。方括號 [h] 是一個選擇性的參數，如果橢圓的寬度和高度相同，則可忽略不定義。

*圖 1.11：將橢圓形設置視覺化*

我們想在這裡説的是，從參考指南開始很重要，然後探索其他語法和功能，例如矩形和多邊形等形狀。範例程式碼中還有一些我們沒有詳細解釋的語法，所以你可以在 p5.js 網站的參考資料中找到相應的資料，自己探索一下。但預告一下，我們將在下一章中繼續探索顏色的函式，而在下下章則會聚焦在 `random()` 函式。

## Git

我們使用 Git 來編寫本書和教學。 Git 是 Linux 操作系統中使用的 Linux Kernel 架構的創造者 Linus Torvalds 於 2005 年開發的開源軟體管理系統。它用於跟踪任何文件的更改，促進分佈式網絡中的版本控制變化。它對於大規模協作的程式設計特別有用，在這種情況下，個人使用自己的機器通過複製（分岔 forking）、拆分（分支 branching）和組合（合併 merging）來處理軟體的不同部分。Git 使用分佈式模型，其中每個貢獻者都維護並擁有主存儲庫的副本。

GitLab 是一個開源的、以網路為基礎的 Git 存儲庫平台，存放軟體開發人員貢獻的軟體庫和原始碼。 GitLab 也是一個社交平台，人們可以在這裡發表評論、關注其他軟體開發流程、將整個程式分岔到自己的存儲庫中等等。本書的所有內容，包括 readme 文件、原始碼和函式庫，均根據知識共享的執照（creative commons license）存儲在 GitLab 平台上，賦予其他人共享、使用和構建此作品的權利。我們想像這只是本書的第一次迭代，我們希望看到整本書的許多重新挪用和分岔，以便人們可以使用現有的框架進行修改，例如添加新的章節、範例和練習，以及更有關的內容和參考資料，促進程式設計和思維之間的互動。

簡單起見，我們使用 GitLab 的網絡界面進行寫作和教學，讓學生交付每週作業所需的 RunMe [^runme] 和 ReadMe [^readme] 文件。我們也使用 GitLab 進行同儕反饋，以便學生閱讀和學習彼此的創作。

*圖 1.12: 用 GitLab 網頁介面建立一個新的專案*

1. 進入[Gitlab.com](Gitlab.com)，於選單點擊「Register」註冊賬號。
2. 創建一個新的專案：進入「Projects > New Project」（請見圖 1.12）。
3. 提供專案名稱和描述，如果你希望其他人無需任何身份驗證即可訪問此專案，請點擊「公開」（Public）。
4. 此時，你也可以勾選確認框來初始化存儲庫中的 readme 文件。
5. 然後您的存儲庫中將會自動創立一個文件夾。
6. 要上傳文件或創立目錄，只需點選存儲庫項目名稱下的「+」號（見圖 1.13）。 GitLab 允許自行定義提交的訊息（如此便可從一般性和溝通的角度來追蹤修改紀錄），我們可以在點選「提交更改」（Commit changes）按鈕之前輸入提交訊息（commit message）。

*圖 1.13：用 GitLab 網頁介面管理資料夾／路徑*

如果你需要其他功能，GitLab Web IDE 編輯器有一些可以使用的進階功能（位於右上角，請見圖 1.13 和 1.14）：預覽 Markdown 文件、刪除或重命名文件/資料夾。

*圖 1.14: The GitLab Web IDE*

## While()

上面簡單介紹過，Git 是一個分佈式版本控制系統，用於在軟體開發過程中跟踪原始碼的變化。它的目的在於協調程式設計師之間的工作，但也可用於跟踪任何文件集的更改，包括本書各章的工作流程。它是一個存儲庫，包括完整的更改歷史和版本跟踪功能。「Git」具有完整的工作流程管理功能，但它的名稱所帶有的調侃之意以及圍繞它是否是為縮寫的猜測，在某種程度上削弱了其嚴肅性。據稱，Torvalds 將其開發為 Linux 的內容追踪器，以常見的冒犯性英國俚語「愚蠢的老 git」來嘲笑自己。同樣，它也被稱為「愚蠢的內容追蹤器」，但實際上並非如此，因為它是一個快速、可擴展且有效的分佈式修訂控制系統。[^Git] 為清楚起見，git 拼寫為「git」（用於命令）和「Git」（用於產品），而不是「Git」（用於人），因為它不是縮寫詞，而是意圖表達了它能做的事：一個不試著裝聰明但也不愚蠢的工具。此外，製作多個版本的能力是一種特別強調的社會行為，在公共領域一同思想、勞動（就像 p5.js 社區[^p5Community] ）的信念，受到 GNU General Public License 的法律保護，確保用戶可以自由運用、學習、共享和修改他們的軟體。[^GNUGPL]

就像關於「Git」和「git」的爭論一樣，在程式設計和日常生活中，詞語的使用、它的意義和在世界上能做的事變得非常重要。另一個關於軟體的袪殖民化的例子，是在程式設計中使用術語「主」和「僕」（在一段依賴關係中一個程序對另一個程序施加控制），這被認為是「一個破碎的比喻」和「一個壓迫性的比喻」 Ron Eglash 和互聯網工程任務組 (The Internet Engineering Task Force, IETF) 都分別有所表示。[^term] 在日常人際互動中，語言的另一個例子是代名詞的政治，以及如何使用「她」、「他」或「他們」來指稱人或性別化物件、給予主詞特定的定位，因為語言往往是「男－人造的」。[^Spender] 這顯示出運用語言倫理的重要性，因為語言是具有影響力的，如朱迪思・巴特勒（Judith Butler）以及其他人所明確表示；在 *《受激的言說》* 中，巴特勒呈現言語如何具有「傷害性」。[^Butler] 我們將在第七章中回到語言和程式設計之間的類比，現在僅說明詞語具有社會和政治影響力便已足夠，這可延伸到運算對象和函式的命名。[^Cox] 無論它們是否可以直接執行仍然具有效力。

本章的第一部分觸及了這種語言政治，經由閱讀、寫作和「程式設計」的能力，我們或許可以把它們稱之為「擴大的識讀能力」，進而對詞語的含義、行為在更廣泛文化領域的關係有了更深刻的一種理解。識讀能力對為何需要新的閱讀和寫作類型來解釋和衡量重大的文化和技術變遷至關重要，包括進用性的問題。舉一個更清楚的例子，我們可以回顧文化研究領域的開端，以及理查德・霍加特 (Richard Hoggart) 的《讀寫何用》（1957 年出版）將工人階級（或大眾）文化納入所謂以前只保留給精英的「文化」的一部分，從而讓識概念獲得了擴展。[^Hoggart] 顯然，識讀能力是一個不斷變化的概念，隨著不同的文化而變化，也以口語和寫作之間不斷變化的關係為基礎，Walter J. Ong 也在《口語和識讀能力》探討過，他認為透過電子時代社群媒體依賴以各種方式寫作的「第二口語性」使得我們的理解力更加銳利。[^Ong] 例如，程式設計的書面文字展示了我們的語言如何通過新形式得到進一步增強，以及寫作如何成為一種行動的形式而不僅僅是思維的指稱。

在這本書中，我們將人類語言和運算語言的語彙及行動交織在一起，認識到它們本身並非同值性的。我們在本書中使用 JavaScript 語法就是一個特定的例子——對於學習程式設計基礎和基本概念非常有用——但也允許使用「輔助參數」進行實驗。在這裡，我們的意思是調整正規參數以使其更容易理解，通過語義的模糊性為其他創造性表達提供機會。例如，考慮使用「階級」（class）來描物件導向程式設計中的一個或多個物件，以及基於經濟和社會地位的社會分層。一個很好的例子是 Harwood 的程式碼作品《階級函式庫》（Class Library），它融合了程式碼和書寫文字，強調使用程式碼的物質條件和階級團結行動的可能性。[^Graham] 你可以在參考資料部分查找該術語以釐清技術原理。[^class]

將程式設計或編碼做為當代生活的必要技能這一論點似乎是無可爭辯的，許多線上教學及 Codecademy.org 和 Code.org 等網站的發起，這些範例都與運算的素養和思維相關。正如本章開頭所介紹的，Vee 的 *《編碼素養》* 也探討了這些連結，論證了識讀能力的概念如何強化了使用和為電腦編寫的重要性、靈活性和力量。[^Vee3] 一個重要的方面是，這不僅有助於我們更好地理解程式設計與社會、科技和文化之間的動態關係，而且還擴展了我們對於識讀能力的概念，還有它與排擠政治的關聯（如同其他非標準的識讀能力）。此外，程式設計與其他形式的寫作一樣運演了各式的行動，它也將自己呈現為一種重新思考政治的方式：不僅僅是寫作、說話、爭論或街頭抗爭，而且也展現了修改技術流程的能力，有鑑於權力和控制的方式現在常構建在基礎建設的層級，透過修改技術流程，執行的行動或許能有別於以往。[^Kelty]

你的第一個程式是接合這些想法的第一步，來跑一些程式碼吧。由於這並不意味著，也不可能只是一個技術練習，因此我們要求你有意識地把關鍵和實務的操作層面放進 ReadMe 和 RunMe 裡面。本書是一本研究手冊，做為這個初始任務以及後續任務的指南：運行一些程式碼，並用它思考。

## 迷你習作：編寫及解讀

製作 RunMe 和 ReadMe。

**目標**

* 學習基本設置，包括使用程式碼編輯器寫程式碼、使用網頁瀏覽器運行程式碼、獨立學習程式碼語法、創建一個 ReadMe 檔案等。
* 從概念上開始思考程式設計。

**更多靈感**

* *Daily Sketch in Processing* by Saskia Freeke，https://twitter.com/sasj_nl （可以在此觀看她的演講 https://youtube.com/watch?v=nBtGpEZ0-EQ ）； *All the Daily Things* by Saskia Freeke（2018），https://vimeo.com/309138645 。
* Zach Lieberman 的 Instagram 頁面，https://instagram.com/zach.lieberman/ 。
* “OpenProcessing 的基礎知識”，https://openprocessing.org/browse/?q=basics&time=anytime&type=all# 。
* 「使用 Processing 和 p5.js 進行創造性編碼」https://fb.com/groups/creativecodingp5/ 。

**任務編碼 (RunMe)**

1. 從 p5.js 參考資料 https://p5js.org/reference/ 學習至少一個語法範例。 （當然，知道不止一個總是好的。保持好奇！）
2. 熟悉參考架構：範例、描述、各種語法和參數（這些知識將為您提供自學新語法必不可少的終身技能）。
3. 使用、閱讀、修改（甚至組合）範例程式碼（最基本程度的是更改參數數字），並生成一個新的草圖做為 RunMe。

**在你的解讀（ReadMe）檔案中可以思考的問題**

* 你製造了什麼？
* 如何描述你第一次獨立撰寫程式的體驗（與思考、閱讀、複製、修改、編寫程式碼等等）？
* 編碼過程與一般文字的閱讀和寫作有何不同或相似之處？
* 程式碼和程式設計對你有什麼樣的意義，下列提供的閱讀資料如何幫助你進一步反思這些概念？

## 必讀

* Lauren McCarthy, "Learning While Making p5.js," OPENVIS Conference (2015) https://youtube.com/watch?v=1k3X4DLDHdc 。
* "p5.js | get started," https://p5js.org/get-started/ 。
* Daniel Shiffman，"1.1: Code! Programming with p5.js" (2018), https://youtube.com/watch?v=yPWkPOfnGsw 。
* Annette Vee，「每個人的程式設計大眾識讀能力的遺產」（Coding for Everyone and the Legacy of Mass Literacy），在 *《編碼素養：電腦程式設計如何改變寫作》Coding Literacy: How Computer Programming Is Changing Writing* (Cambridge, MA: MIT Press, 2017), 43-93.。

## 延伸閱讀

* 全喜卿（Wendy Hui Kyong Chun）, “On Software, or the Persistence of Visual Knowledge”, Grey Room 18, January (2005): 26-51，https://doi.org/10.1162/1526381043320741 。
* Brian Lennon, "JavaScript Affogato: Programming a Culture of Improvised Expertise," *Configurations* 26, no. 1, Winter (2018): 47-72.。
* Nick Montfort, “Appendix A: Why Program?” Exploratory Programming For the Arts and Humanities (Cambridge, Mass.: MIT Press, 2016), 267-277。

## 註釋

[^1967]: 1960 年代無論性別和教育背景在程式設計領域的就業機會龐大，由於入門門檻低，不需要程式設計經驗或大學教育文憑，公司通常提供在職培訓。根據《Cosmopolitan》雜誌 1967 年 4 月號 Lois Mandel 的「電腦女孩」報導，許多女性在電腦歷史早期進入了程式設計領域並爬上了「運算階梯」。然而，儘管電腦程式設計「剛起步時的性別界線是模糊的，後來卻逐漸地、有意識地轉變為一門高階的、科學的和男性化的學科」，根據 Nathan Ensmenger 的論述「製造程式設計的雄邁性」，收錄於 Thomas J. Misa 等人編輯的 *《性別編碼：為什麼女性離開運算領域，》（Gender Codes: Why Women are Leaving Computing）*。（Hoboken, NJ: John Wiley, 2010），115-141。

[^STEM]: 擁有程式設計技能已成為全球教育和商業的必備條件。例如，請參見 https://ec.eur opa.eu/digital-single-market/en/coding-21st-season-skill 和 https://news.micro soft.com/apac/features/coding-way-brighter-future-2018-beyond/ 。程式設計在專業學科之外的開放，即所謂的「STEM」學科，為我們所指涉的「美感程式設計」創造了條件。

[^Hall]: Stuart Hall 在「編碼/解碼」（Encoding/Decoding）表示人們可以在解碼訊息中扮演積極的角色，收錄於 Stuart Hall 等人編輯的 *《文化、媒體、語言》（Culture, Media, Language）* （London: Hutchison, 1980），128-38。

[^Vee]: Annette Vee *《編碼素養：電腦程式設計如何改變寫作》（Coding Literacy: How computer programing is changing writing）*（Cambridge, MA: MIT Press, 2017）4頁。 除了編碼的素養，我們還可以觀察主流媒體、政策制定和學術話語中的其他類型素養，例如程序、數據和數位識讀能力。請參見 Ian Bogost，「程式性素養：以程式設計、系統和遊戲解決問題」（Procedural Literacy: Problem Solving with Programming, Systems, & Play）, *The Journal of Media Literacy* 52, no. 1-2 (2015); Michael Mateas，「程序素養：教育新媒體從業者」（Procedural Literacy: Educating the New Media Practitioner） *On the Horizon. Special issue. Future of Games, Simulations and Interactive Media in Learning Contexts* 13, no.1 (2005)； Annette N. Markham，「將數據素養帶到街頭：公共領域的批判性教學法」（Taking Data Literacy to the Streets: Critical Pedagogy in the Public Sphere） *Qualitative Inquiry* (August 2019). doi:10.1177/1077800419859024； Teressa Umali，「獨家：促進菲律賓教育系統中的數位素養」，*OpenGov Asia*，https://www.opengovasia.com/promoting-digital-literacy-in-the-philippine-education-system/ 。

[^Cayley]: John Cayley，「除非程式碼是文字，否則它不是文本」（The Code is Not the Text Unless it is the Text） *Electronic Book Review* (2002)，請參見 http://electr onicbookreview.com/essay/the-code-is-not-the-text-unless-it-is-the-text/ ，另請參見 Katherine Hayles，*Writing Machines*（Cambridge, MA: MIT Press, 2002）。

[^Vee2]: Vee *《編碼素養：電腦程式設計如何改變寫作》*，45-58。

[^Montfort]: Nick Montfort，*《藝術與人文探索性程式設計》（Exploratory Programming for the Arts and Humanities）* (Cambridge, Mass.: MIT Press, 2016)。

[^Rushkoff]: 這句話取自道格拉斯・拉什科夫 (Douglas Rushkoff) 的 *《程式設計或被程式設計：數位時代十誡》（Program or Be Programmed: Ten Commandments for a Digital Age）* (New York: OR books, 2010)。

[^library]: 函式庫是一組資源整合體，以程式碼的形式包含了各種函式及訊息。這些功能可用於開發軟體和應用程式。

[^Severance]: Charles Severance，「Javascript：十天內設計語言」（Javascript: Designing a Language in 10 Days） *IEEE Computer Society* February (2012), 7-8。

[^Clark]: Lin Clark 在 Mozilla 工作並將程式碼變成漫畫。在這裡，她解釋了 JavaScript 如何在瀏覽器中運行，請參閱 http://hacks.mozilla.org/2017/02/a-crash-course-in-just-in-time-jit-compilers/ 。

[^Moon]: Seong-Won Lee 和 Soo-Mook Moon，「概述以 JavaScript 為引擎的客戶端行動裝置即時編譯器」（Selective Just-in-time Compilation for Client-side Mobile JavaScript Engine）, *Proceedings of the 14th International Conference on Compilers, Architectures and Synthesis for Embedded Systems* (CASES '11) (New York: ACM, 2011), 5-14. DOI: https://doi.org/10.1145/2038698.2038703 。

[^IDE]: IDE （整合式的開發環境）是一種軟體應用程式，為軟體開發提供更全面和完整的環境。它通常由原始碼編輯器、自動化構建工具和除錯程式組成。在本書中，我們使用 Atom 做為程式碼編輯器，但它需要另一個除錯工具，例如瀏覽器的 web console。 IDE 的一個範例是 Processing，這是一個為視覺和電子藝術社群構建的開源\
獨立應用程式。請參閱 https://en.wikipedia.org/wiki/Integrated_development_environment 。

[^JVM]: JVM （Java 虛擬機器）是指機器（通常是電腦）中的一種虛擬環境，可以運行和執行以Java 位元碼語言形式編寫的程式。 JVM 執行加載、驗證、執行程式碼等操作，並提供運作環境。請參閱 https://en.wikipedia.org/wiki/Java_virtual_machine 。

[^Minecraft]: 請參見 https://minecraft.gamepedia.com/Development_resources 。

[^Papert]: 一個由數學家、電腦科學家和教育家 Seymour Papert 首先提出的概念，他是麻省理工學院的教授，並為一種名為 Logo 的程式設計語言創建了設計原則。參見 Seymour Papert，*《心智激盪：兒童、電腦和強大的想法》*（New York: Basic Books, 1980）。

[^Processing]: 請參見 https://processing.org 。

[^laczko]: 缺乏性別多樣性也反映在 2017 年的美感程式設計課程反饋中，有學生評論說「程式碼不是只屬於電腦科學家的紳士俱樂部」。藝術家 Juli Laczko 的研究和實踐探討了電腦史上的性別和刻板印象問題，其中一個例子是作品〈webmachine〉。它是一台反向類比式編織電腦，運用一個打卡技術的線上軟體把二進製文本轉換為可視的程式碼。該專案研究了編織的歷史和勞動實踐，以及文化如何強化電腦領域的刻板印象。請參閱 https://digital-power.sig graph.org/piece/webmachine/ 。

[^McCarthy]: Lauren McCarthy，「P5js Diversity & Floss Panel Introduction」（2015）。影片請見 http://opentranscripts.org/transcript/p5js-diversity-floss-panel-introduction/ 。

[^Chinese]: p5.js 現在有西班牙語版本，請參見 Maya Man，*Processing Foundation*（2016）https://medium.com/processing-foundation/p5-js-is-now-available-in-spanish-3d1eab9dffa0 ；另請參見 Kenneth Lim，「p5.js 的中文翻譯和為更多翻譯的未來做準備」（2018） https://medium.com/processing-foundation/chinese-translation-for-p5-js-and-preparing-a-future-of-more-translations-b56843ea096e 。

[^Jin]: 這樣一個專注於程式碼+藝術多樣性的系列，並置於 p5.js 的子域下，由 Chelly Jin 創建和策劃，diversity.p5js.org。

[^UX]: Claire Kearney-Volpe 的 UX （使用者體驗）研究專案 https://www.clairekv.com/p5js-ux-research 。

[^Choi]: 藝術家兼教育者 Taeyoon Choi 的專案 http://taeyoonchoi.com/soft-care/signing-coders/ 。

[^chun]: 全喜卿將軟體的概念政治化，並且特別追溯自動程式設計的歷史，軟／硬體的二元區分，以及凝視的抹除。請參見全喜卿，「關於軟體，或視覺知識的持久性」（On Software, or the Persistence of Visual Knowledge） *《Grey Room》* 18 (January 2005): 26–51 https://doi.org/10.1162/1526381043320741。

[^Atom]: https://atom.io/ 。

[^p5js]: p5.js 下載頁面 https://p5js.org/download/ 。

[^sound]: https://p5js.org/reference/#/libraries/p5.sound 。

[^liveserver]: https://atom.io/packages/atom-live-server 。

[^print]: https://p5js.org/reference/#/p5/print 。

[^console]: p5.js 內建了「友善錯誤系統」來幫助程式設計師，尤其是初學者。該函式庫的設計者們認為設計良好、友善用戶、「以適切的語氣編寫」的除錯程式可為沒有經驗的用戶降低門檻。請參見 A. Mira Chung 「p5.js 的友善錯誤系統」，*Processing Foundation* (2017)，https://medium.com/processing-foundation/2017-marks-the-processing-foundations-sixth-year-participating-in-google-sum-of-code-d365f62fc463 。

[^Chun2]: 全喜卿和 Andrew Lison 認為我們學習的第一個「Hello World」程式既有趣又誘人。我們將在下一章中詳細說明這一點。參見全喜卿和 Lison，「樂趣是一個戰場：享受和痴迷之間的軟體」（Fun is a Battlefield: Software between Enjoyment and Obsession） in Olga Goriunova, ed., *Fun and Software: Exploring Pleasure, Paradox and Pain in Computing* (New York, London: Bloomsbury, 2014), 180。

[^Hello]: *hallo welt! (hello world!)* 是 Geoff Cox 和 Duncan Shingleton 合作的計畫，請參見 http://www.anti-thesis.net/hello-world-60/ 。

[^Babel]: 旨在通達天堂的巴別塔令上帝不悅，以至於「祂」決定混淆亞當的單一語言，使人們無法理解彼此的語言（創世記 2:19 和 11:1-9）。隨後，每個人都只能用各種語言「胡言亂語」，即所謂的語言混亂。程式碼表達了這種混亂，但也蘊含了言論自由，允許網絡瀏覽器根據軟體所說/寫的內容「發聲」。如 Cox 所述「它既是一種電腦可讀的邏輯符號，也替現了這個過程，就劇本和表演雙方面而言；從這個意義上說，它就像被訴說的言語一樣」。請參見 Geoff Cox，*《説程式碼：編碼做為美學和政治表達》（Speaking Code: Coding as Aesthetic and Political Expression）* (Cambridge, Mass: MIT Press, 2013), 3。

[^ellipse]: 請參閱 https://p5js.org/reference/#/p5/ellipse 。

[^runme]: 用網路瀏覽器在 GitLab 上跑 JavaScript 程式，需要在上傳任何原始碼之前於存儲庫中進行一些配置。新計畫的存儲庫根目錄中有一個檔案 (.gitlab-ci.yml)，其中包含在 GitLab 上運行所需的一組作業及其規範。您可以在此 https://gitlab.com/pages/plain-html/-/blob/master/README.md 閱讀 GitLab 的指南（也請參閱 yml 檔案中的程式碼，以及如何使用存儲庫這個網站）。

[^readme]: readme 文件採用 Markdown 格式，文件副檔名為「.md」。它是一種輕量級標記語言，支持具有特殊語法的簡單文本格式。帶有此副檔名的文件可以由 GitLab 處理並以更具可讀性的形式在網絡上直觀地顯示。更多關於 Markdown 編寫的語法，請參見：https://docs.gitlab.com/ee/user/markdown.html 。

[^Git]: 此討論在 https://stackoverflow.com/questions/43959748/what-is-the-abbreviation-of-git 中進行了總結。

[^p5Community]: 請參見 https://github.com/processing/p 5.js/wiki 。

[^GNUGPL]: 請參見 https://www.gnu.org/licenses/lgpl-3.0.txt 。

[^term]: 不久之後，許多軟體社群決定停止使用「主僕」（master-slave）一詞，例如 Django 和 Python，並以其他詞語替代。請參閱 https://tools.ietf.org/id/draft-knodel-terminology-00.html#rfc.section.1.1 。根據 Ron Eglash 的說法，主從一詞暗示了依賴關係中的控制要素，但在技術上沒有準確描述，並進一步引發了在運算中使用壞隱喻的倫理問題。參見 Ron Eglash，「壞隱喻：技術文獻中的主從類比」（Broken Metaphor: The Master-Slave Analogy in Technical Literature），*《技術與文化》（Technology and Culture）* 48，第 2 期（2007）：360-69。 https://doi.org/10.1353/tech.2007.0066 。

[^Spender]: 關於這個問題的基礎讀物是 Dale Spender 的 *《男－人造語言》（Man-Made Language）* (1980)，https://www.marxists.org/reference/subject/philosophy/works/ot/spender.htm 。

[^Butler]: Judith Butler, *《受激的言說：一個關於展演的政治》（Excitable Speech: A Politics of the Performative）* (London: Routledge, 1997)。

[^Cox]: 另請參見 Geoff Cox 和 Alex McLean，*《口語程式碼：做為美學和政治表達的編碼》（Speaking Code: Coding as Aesthetic and Political Expression）*（Cambridge, MA: MIT Press, 2013）。

[^Hoggart]: Richard Hoggart，*《讀寫何用：工人生活的紀錄》（The Uses of Literacy: Aspects of Working Class Life）* [1957]（London: Penguin, 2009）。

[^Ong]: Walter J. Ong, *《口語和讀寫能力：文字的技術化》（Orality and Literacy: The Technologizing of the Word）* [1982] (London: Routledge, 2002)。

[^Graham]: 請參見 Harwood 的「Class Library」，收錄於 Fuller 編輯，*《軟體研究》（Software Studies）*，37-39。

[^class]: 請參見， https://p5js.org/reference/#/p5/class 。

[^Vee3]: Vee， *《編碼素養》*。

[^Kelty]: 這一點主要來自 Kelty 的 *《二位元》* ，它使用「運行程式碼」（running code）一詞來描述「由科技生成」（argument-by-technology）和「由話語生成」（argument-by-talk）之間的關係。參見 Christopher Kelty *《二位元：自由軟體的文化意義》（Two Bits: the Cultural Significance of Free Software）*（Durham: Duke University Press, 2008），58。顯然地，程式設計師也能夠像其他人們一樣以其他修辭形式提出論點，請參閱 Kevin Brock，*《修辭編碼研究：探索編碼內部與外圍的生成》（Rhetorical Code Studies：Discovering Arguments in and around Code）*（Ann Arbor, MN: University of Michigan Press, 2019）。

[^webeditor]: Processing Foundation 於 2018 年正式發布了 p5.js Web Editor，一個在線學習和運行程式碼的平台，無需額外安裝軟體即可輕鬆上手。請參閱 https://medium.com/processing-foundation/hello-p5-js-web-editor-b90b902b74cf 。

[^Reference]: 請參見 https://p5js.org/reference/ 。