---
tags: Old Version
---

:::info
Ch.2: Variable geometry (https://gitlab.com/aesthetic-programming/book/-/tree/master/source/1-GettingStarted)
:::

# Ch.2: 幾何變奏曲（Variable Geometry）

Title: 2. Variable geometry
Order: 2
page_order: 2
sketch:
download_sketch_link: https://gitlab.com/aesthetic-programming/book/-/archive/master/_Book-master.zip?path=public/p5_SampleCode/ch2_VariableGeometry


[TOC]

## 設置 setup()

學習任何新的、復雜的東西都有其困難，撇除這點，我們希望學習程式設計可以是愉快和有所回報的！許多書名都表明了寫程式可以很有趣，例如關於 Linus Torvalds 的書 *《只為樂趣：一個偶然的革命者故事》*，是由 David Diamond 編寫，為半自傳、半 Linux 發展故事的書。 [^Fun] 在這種情況下，樂趣是和開放提供原始碼、以供進一步修改的嘗試相結合的。就像分享一篇食譜或一個笑話，編碼是一種社會活動，仰賴集體理解才能「懂」。

還有更多例子強調了樂趣的概念，好像說這足以說服用戶習得程式設計的功夫，而不被潛在的困難擊敗。在上一章繪製橢圓之後，我們鼓勵您在接下來的內容中享受幾何的樂趣。從這個想法進一步探索各種形狀、大小、位置、空間和長度，這些被數學視為幾何，在日常生活中的多種應用，包括但不限於排版、標牌、平面設計和建築，以及其他組織形式。更具體地說，點、線和面被視為設計的基本元素，因為這些元素被用來構成物件，而世界是由具有特定屬性的各種物件組成的。幾何學的樂趣來自於這些屬性的操弄與重新建構，創造識別和理解的另類圖騰。 [^Fun2] 正如 Olga Goriunova 編輯的書 *《樂趣和軟體》* 所說的，電腦的樂趣被認為是一種思考的模式[^Olga]，此外，在這個過程中出現的悖論也可帶來樂趣。經由創造新的運算對象，你可以演繹學習的程序邏輯，並探索如何調整和重新繪製這些邏輯。從這個意義上說，可變幾何是關於形狀轉換：重新想像各種新的形狀、組合形式和空間關係，從而挑戰幾何慣例。[^Femke]

我們以表情符號為例——顏文字，通常是笑臉——被用來呈現面部情緒表情的文字符號，比如開心「：D」。這些符號在溝通上愈來愈普及，不再是簡單的文字符號，而是變成了實際的圖像，有時做為表情符號可能會很有趣，但相關潛在身份政治的問題也伴隨而來。下面將詳細介紹這一點，但就目前而言，表情符號是一個很好的例子，因為它們由幾何形狀組成，使用點、線、面和顏色。本章是關於從這些表情符號中獲得樂趣（即使一些潛在的問題根本不好玩），進而探索表情符號的情感維度，以及我們在日常溝通上遇到的不同表現形式。

表情符號標準化與替現政治之間的關連已有多人提出。由 Roel Roscam Abbing、Peggy Pierrot 和 Femke Snelting 撰寫的文章「耕改普世性」（Modifying the Universal）是一個很好的例子，[^Emojis] 因為它探問了「一體適用」的表情符號政治。自 1987 年以來，Unicode 計畫設定了電腦產業的標準，讓所有主要操作系統和書寫軟體在國際化上有一致的編碼、文字表示和處理方法，Emojis 也伴隨而來。有趣的是，在技術層面上 Unicode 提供了一個獨特的編碼點（數字）以抽象方式表示角色／字符，並將視覺呈現的任務（大小、字體、形狀、幾何）留給其他軟件，例如網頁瀏覽器或文字處理器。我們在這裡感興趣的是關於替現的問題。

類似於烏托邦地想要開發一種世界上大多數人都可以說和理解的通用語言（例如世界語），Unicode 對於跨國際/多語言系統的運作溝通顯然是重要的。最新版本 Unicode 12.1 於 2019 年 5 月發佈時，共有 137,994 個字符，涵蓋 150 部腳本（scripts），以及多個符號集和表情符號。 [^Unicode] 然而隨著標準拓展，從底層字符到符號集和表情符號的一體適用愈來愈成問題。批評毫無意外地圍繞在替現政治上，例如性別的刻板印象和公然的種族歧視，例如：女性的表情符號在某些行業中明顯缺席，[^Telegraph] 表情符號的膚色也有所侷限，另外還有「通用修飾符號」無法「通用」於所有設備和操作系統。

我們的觀點是，使用表情符號可能既有趣又富有表現力，但它們也傾向於過度簡化和消彌差異，從而在已經「暴力的權力結構」中延續規範意識形態，[^ideology] 例如只選擇呈現具有特定膚色的人，而忽略其他人。人如何被替現存在著明顯的不平等，我們需要質疑誰為這些替現設定了標準。問題有一部分在於為何這種操作能被塑造為是有樂趣的，以及它如何掩蓋了監控我們情緒狀態的其他過程，尤其是在工作場所中（我們將在第四章「數據採集」中回到這個問題）。 Process Studio 的 *AIMoji* 作品突顯了這個問題，藉由深度學習的技術來訓練現有的表情符號數據[^almoji] ，進而擾亂化約的替現邏輯、提供介於各式形狀、表情和情緒之間產生的噪因突變，從而拒絕普遍主義。以上是我們想在本章中探討的一些問題，經由引入幾何變量來學習如何產生有別於此的——也許是更政治正確的——替代方案。我們將從圖像設計師 David Reinfurt 的作品 *Multi* 開始，它將用簡單的排版元素來示範幾何的基礎，以及如何生成表情和構圖的變化。

* * *

## 開始 start()
{: style="margin-bottom: -2em;" .no-border}
: *圖 2.1：David Reinfurt 設計的作品〈Multi〉。圖像為原設計者所有（Courtesy of the designer）。*

*Multi* (http://www.o-r-g.com/apps/multi),[^multi] 靈感來自另一位設計師 Enzo Mari，他在 1957 年花了整整一年的時間探索物體（蘋果）的基本形式。 Reinfurt 解釋說，「他不想畫一個蘋果，而是想畫一個[通用]蘋果——一個完美的象徵，專為工業再生產的序列邏輯而設計。」*Multi* 是這種想法的變奏，以一種手機應用程式的形式來進行訊息複製，以簡易的標點符號構成 1,728 種表情符號的排列組合。使用預設的標點符號無疑是 *Multi* 的魅力所在，但出於我們的目的在此將練習用基本的幾何元素，從頭開始繪製這些符號。

## 原始碼 Source code
{: .medium}
: *圖 2.2：混合 Multi 概念的幾何繪圖*

RunMe, https://aesthetic-programming.gitlab.io/book/p5_SampleCode/ch2_VariableGeometry/

<sketch
src="p5_SampleCode/ch2_VariableGeometry/sketch.js"
lang="javascript"
data-executable
data-download-link="https://gitlab.com/aesthetic-programming/book/-/archive/master/_Book-master.zip?path=public/p5_SampleCode/ch2_VariableGeometry" />

* * *

上面的程式碼繪製了數個形狀並能運演簡單的互動效果：

* 背景被閃爍的灰階所填滿
* 左邊是黑色矩形的水平直線
* 右側是黑色矩形和藍色多邊形
* 下方是一個圓形，沒有任何填充顏色，筆觸顏色為灰色
* 當你移動滑鼠時，一個灰色的圓形輪廓跟著移動
* 可以點擊滑鼠，灰色橢圓的大小也隨之改變

## 座標 Coordinates
在前一章中，我們簡要討論了 x 和 y 坐標，它們構成了基本概念，在畫布上定位及繪製各種物件，而物件又有許多不同的值與測量方式。像`createCanvas(windowWidth,windowHeight)`這樣一行程式碼是指創造一個寬度、高度與視窗大小一致的畫布。不同於與上一章範例`createCanvas(640,480);`為畫布設置精確像素尺寸，不固定的畫布大小提供了靈活性。在這個範例中，背景顏色填滿了整個視窗，而畫布做為空間的概念有了參數的變異值。值得提醒的是，在數學中原點 [0,0] 通常位於網格紙/螢幕的中心，但在 p5.js 等程式語言中，原點位於左上角（見上一章節的圖 1.11）。這會影響物體的放置方式，並改變我們對空間/畫布的感知/理解的參考框架。

<div class="section exercise" markdown=1>

## 課堂練習

function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(15);
}

function draw() {
  background(random(230,240));
}

小提醒，一個網頁/應用程式的結構應包括 HTML、一個能夠運作的 JavaScript 檔案（例如，sketch.js）以及相關的 p5.js 函式庫。

- 在一個有效的 JavaScript 檔案中鍵入或複製上述的原始碼，然後儲存。在 Atom 上執行該程式（使用 live-atom-server），在螢幕上背景會開始閃爍。
- 這裡有幾個新的語法，或者是以稍微不同的方式使用之前學過的語法：
- `frameRate()`：設定電腦運行程式時每秒將有多少個影格。預設值為 60，這裡將其設置為 15（參見第 3 行），因此您可以比較清楚地看到每一個影格的背景顏色（你也可以將閃爍/影格速率與上一章中的範例程式碼做比較）。
- `random(230,240)`：在前面的範例程式碼中，`random()`函式只用了一個參數。這個範例則提供了兩個參數。查看參考指南 (https://p5js.org/reference/#/p5/random)，[^random] 隨機函式會返回一個浮點數，這意味著該數字不是整數，而是帶小數的數字。在這種情況下，程式將回傳一個介於 230.0 到但不包括 240.0 之間的浮點數（參見第 7 行），例如 231.34387。
- 下一步，你需要記得如何使用網頁控制台（在 Firefox 的路徑是 工具 > 網頁開發者 >網頁控制台 ） web console (Under Tools > Web Developer > Web Console on Firefox).
- 輸入 `print(width);` 然後按 enter。
- 輸入 `console.log(width, height);` 然後按 enter。

: *圖 2.3：簡易習作*

當您輸入語法`print(width);`時，網頁控制台區域（參見圖 2.3）以像素為單位顯示實際寬度。另外，如果你使用 `console.log(width, height);`，它相當於 JavaScript 中的印函式（不是 p5.js 函數），會根據你的螢幕大小顯示兩個數字（你可以調整螢幕並嘗試再次取得不同的數字）。在網頁控制台區域輸入這兩行，就能求程式提供畫布寬與高的值。這個程式理解「width」和「height」這兩個名稱，因為它們是 p5.js 預設的名稱，可以專門用來詢問畫布的尺寸。

</div>

## 變數 Variables

在程式設計裡，寬度和高度都被稱為「變數」——另一個重要的概念。變數在電腦程式中用來存儲數據和資料。你可以把變數想像成一個廚房容器，不同類型的東西（比如食物、廚房用具等）可以被放在一個給定的容器中，用其他東西替換它們，然後將它們存放起來以備後用。有兩種主要類型的變數：在結構或函式中定義的「區域變數」（local variables），只能在該程式碼區塊中使用；以及可以在程式碼中任何地方使用的「全域變數」（global bariables）。全域變數通常在程式碼的前幾行，需要在程式運行前定義完成。

在前面的練習中，範例程式碼（第2行）後面的值`windowWidth`是將視窗的寬度設置為畫布寬度。延續前面的比喻，一個的容器（正如我們剛剛在網頁控制台中輸入的）被標記名為「width」並儲存數值。該程式能夠經由使用`width`變數來檢索畫布的尺寸，該數值會根據你的視窗寬度而更動，並且可以使用網頁控制台進行檢索和顯示。 （你也可以因為其他需求，在草圖的其他部分使用變數 `width` 和 `height`也是可行的。）

值得特別注意的是，你也可以自行為變數名稱命名（換句話說，你可以創造屬於自己的容器類型，並存儲其他的值）。

let moving_size = 50;
let static_size = 20;
…
ellipse(255, 350, static_size, static_size);
…
ellipse(mouseX, mouseY, moving_size, moving_size);

if (mouseIsPressed) {
  static_size = floor(random(5, 20));
}

以上是從完整原始碼摘錄繪製兩個不同大小橢圓所需的片段（如前一章所述，橢圓函數的最後兩個參數指的是寬度和高度。）不像第一章「準備開始吧！」在函式中放置一個數值，我們將在本章將使用變數來保存數值（請參見第 4 和 6 行），特別是全域變數更可以在程式的不同區塊重複使用。使用變數需要三個步驟：

1. **宣告：** 為您想要存儲數值的容器想一個名稱（讓你及其他人閱讀時容易理解，但當然這裡有空間可以玩一種概念的取徑）。在開頭以語法「let」宣告。[^let]（請參見上面第 1-2 行）
為變數命名有以下特定規則：
* 通常以小寫英文字母起頭，而不是數字或標點符號。
* 可以包含大小寫的英文字母以及數字。
* 不可使用標點符號。

2. **初始化／賦值：** 你想在容器裡儲存什麼？一個數字？你需要一個等號來賦予一個值。在這個入門的階段有助於了解資料型態共有四種：
* *數字 number* 放任何形式的數字：可以是整數，也可以有小數點。
* *字串 string* 放字串。字串可以是單一或許多個字母，必須要用單引號或雙引號包住，例如：`let moving_size = "sixty";`
* *布林 boolean* 放 true/false，例如：`let moving_size = true;`
* *顏色 color* 放色彩數值。接受紅綠藍（RGB）或 Hue、HSB 等色彩設定方法，例如：`let moving_size = color(255,255,0);` 詳請參見「p5.js color reference」（https://p5js.org/reference/#/p5/color ）。[^color]

3. **（重複）使用：** 你希望如何、何時檢索存儲的數據？如果變數隨時間發生變化，你或許會想多次重用它。

在上面摘錄的程式碼中，步驟 1、2 結合起來寫成 `letmoving_size = 50;`。有兩個變數：「moving_size」和「static_size」（請參見第 1 行和第 2 行），但我們可以說變數「static_size」比另一個更動態。這是因為根據滑鼠按下數值會有所變化，如第 8-10 行所示。 （如果沒有預計值會發生變化，你也可以考慮使用 `const`[^constant]，這個值在整個程式中都保持不變。）

範例中還有兩個變數：`mouseX` 和 `mouseY`（請參見第 6 行。）這些變數會改變，受到滑鼠移動的影響，跟踪相應的 x 和 y 坐標。如果你想知道確切的 mouseX 和 mouseY 坐標，你也可以使用 `print()` 或 `console.log()` 在網頁控制台區域顯示這兩個值。 （一個小練習：如何在網頁控制台上以一行程式碼來顯示或印出 mouseX 值？）

雖然很常見用容器的比喻來說明變數的概念，但重要的是要補充一點，每個容器都有一個地址（我們可能會說它在貨架上的特定位置，電腦運算時需要知道在哪裡）。一個變數名稱可以自定義為人類可讀且有意義的方式，但它在執行層面並沒有考慮到這種含義，其中程式設計在自然語言表達以及電腦操作和執行之間搖擺（我們將在第 7 章「語音程式碼」中回到這種雙重編碼的討論）。

從技術上講，藉由宣告一個變數，它還宣告了一個電腦內存、可以保存該值的地址。簡言之，每個變數都存儲在電腦隨機存取記憶體（RAM）的某個區塊裡面，該記憶體區塊是物理且具體的存在，空間也能重新配置。每個區塊都有一個稱為內存地址的標識符號，以便電腦在程式運行時知道在哪裡存儲和檢索它。創立和宣告變數不僅是一個關於寫程式的問題，還涉及存儲數據、空間分配的硬體問題。因此，軟體和硬體是密不可分的，只是我們在處理數據時無法看到電腦的內部微結構。[^chun]

### 為何使用變量？Why use variables?
當你寫的程式愈來愈複雜，會發現用變量來存儲值和資料很常見。更重要的是，變量的值能在程式運作時即時更改。上面提到的變量：`mouseX` 和`mouseY` 說明了這一點，因為滑鼠的坐標會因移動而改變。我們也會在下一章介紹陣列、迴圈和重複等概念時再次討論變量。

使用變量的另一個原因是，如果你的程式碼比較長，那麼將所有程式宣告的變量放在一個概覽中會比較清楚。如果在一個復雜的程式中有許多地方都用到同一個變量，那麼你可以藉由簡單更改全域變數的值，而不用一一修改整個程式裡的多個部分，這對於測試/優化程式很有用，而無需針對特定、多行的程式碼進行修改。這延伸到變量的可重複使用性。變量可以在不同的函數中使用，並且可以多次使用（也可以傳遞給函數子程式的將變量當作傳遞給一個函式去進行下一層級參數，我們將在下一章中討論）。一個很好的例子是示例代碼中的 `static_size` 變量，用於繪製橢圓和矩形。因此，示例代碼中的變量處理空間中的變化和組合形狀。
Another reason for using variables is that if you have longer lines of code, it is easier to have all the variables that you have declared for the program in an overview. If a variable is used in different parts of a complex program, you can simply change the value of the global variable instead of changing the multiple parts in the entire program, and this is useful for testing/refining the program without locating specific and multiple lines of code for modification. This leads to the reusability of variables. Variables can be used in different functions and more than once (and also as arguments passed to a function subroutine, something we will also discuss in the next chapter). A good example is the `static_size` variable in the sample code that is used to draw both the ellipse and the rectangle. As such, variables in the sample code deal with the changing and compositional shape-in-space.

Additionally, it is also easier for others to read your code with a well-chosen variable name, or at least the variable name can suggest certain behaviors or actions. As you progress, you might write code collaboratively, or write a larger program with more lines of code, at which point it is important to think of the readability of code.

## Other functions
This section briefly introduces some other new functions in the full source code. Drawing and designing an emoji requires different decisions, in terms of shapes, color, and spatial composition.

- `noStroke()`, `strokeWeight()`: These functions refer to the settings of a shape, where it has an outline, and the weight of the border.
- `stroke()`, `fill()` and `nofill()`: These set the color of objects such as border, shapes, or text. It takes RGB (as default) or HSB color. But if the function has a single parameter, then it refers to gray scale shade between 0-255 [^binarycolor]. If the function has three parameters like `fill(255, 255, 0)`, then it means the object/shape/text will be filled with a yellow color (the mix of red and green with no blue). There is an optional parameter called "alpha", which refers to the opacity of the color, e.g. `fill(255, 255, 0, 127)`.
- `rect()`: This is similar to drawing an ellipse, but is used to display a rectangle.
- `vertex()`, `beginShape()` and `endShape(CLOSE)`: These three functions are used for drawing more complex forms using various vertices. The `vertex()` function indicates its x and y coordinates, and all the vertices can be joined using the "CLOSE" argument in `endShape()`. The `beginShape()` is used to record the start of the vertex for a complex form like a polygon.
- `floor()`: Since the `random()` function returns a floating-point number, `floor()` is used to calculate the closest integer value.
- `if (mouseIsPressed) {}`: This is a conditional structure for a program, constantly referring to mouse press actions. This is discussed in more detail below.

## Conditional structures

Conditional structures are very useful as they allow you to set a different path by specifying conditions. Indeed, a conditional decision is not specific to programming. For example, in everyday life, you might say "If I am hungry, I should eat some food, if I am thirsty, I should drink some water, otherwise I will just take a nap."

//example in human language
if (I am hungry) {
  eat some food;
} else if (thirsty) {
  drink some water;
} else{
  take a nap;
}

The above is an example of "pseudocode" to demonstrate what making an everyday decision might look like in programming. The keyword and syntax `if` is then followed by the condition and checks whether a certain condition holds. As such, the whole if statement is a "Boolean expression" — one of two possible values is possible, true or false, each of which leads to a different path and action. In computer science, the Boolean data type has two possible values intended to represent the two truth values of logic.

We have implemented a conditional logic in our sample code to constantly check if there is any mousepressed actions. This is why the size of the ellipse changes when a mouse is pressed.

if (mouseIsPressed) {
  static_size = floor(random(5, 20));
}

### Relational operators
If you have to create your own conditional statement with the `if()` syntax, there are multiple combinations you can work with to create more complex expressions. For example, you can have many different cases using the syntax `else if`, or a combination of logical operators, such as the AND case here in another pseudocode example:

if (I am hungry) && (I am in a good mood) {
  print("go out");
}

Here is a list of relational operators and logical symbols that can be used in conditional statements.

/*
Relational Operators:
  >   Greater than
  <   Less than
  >=  greater than or equal to
  <=  less than or equal to
  ==  equality
  === equality (include strict data type checking)
  !=  not equal to
  !== inequality with strict type checking
*/

/*
Logical Operators: boolean logic:
  &&  logical AND
  ||  logical OR
  !   logical NOT
*/

/*
Example:
  if () {
    //something here
  } else if() {
    //something here
  } else{
    //something here
  }
*/

Below is an example of a small sketch that uses a conditional structure and operators. Although all the conditional "if" or "else-if" statements are true, the web console will only print out "one." This is because the program will exit the structure when the first condition is met. In other words, sequence matters and the program will not run the other else-if statements after executing the first true statement.

let x = 18;
if (x > 10 || x <= 20 ) {
  console.log("one");
} else if (x == 18) {
  console.log("two");
} else if (x === 18) {
  console.log("three");
} else {
  console.log("four");
}

## Basic arithmetic operators
You can also do arithmetic operations in programming, and this is commonly done in the arguments of a function. Here is a list of basic arithmetic operators:

- add(`+`): For addition and concatenation, which is applicable to both numbers and text/characters.
- subtract(`-`)
- multiply(`*`)
- divide(`/`)
- Special operators: increment (`++`), decrement (`--`)

* * *

You can try the following in the web console area:

console.log(2*3);

> Output: <br>
"6"

console.log("hello" + "world");

> Output: <br>
"helloworld"

## Discussion in class

1. Examine existing geometric emojis (<https://gitlab.com/aesthetic-programming/book/-/blob/master/source/2-VariableGeometry/emojis.jpeg>) or those available on your mobile phone,
can you describe about the shape of an emoji? what constitutes a face? What essential geometric elements do you need for a particular facial expression? What has been lost in translation?
2. Reflect upon the complexity of human emotions, and their caricatures. What is your experience using emojis? What are the cultural and political implications of emojis (you might refer to the reading and introduction above)?
3. Beyond the face, take a look at more emojis (<https://www.pngfind.com/mpng/ohwmTJ_all-the-emojis-available-on-facebook-russian-revolution/>).[^emojis2] Is there anything you want to add?
4. Experiment with p5.js. How do you translate your thoughts into lines of code? You may want to print the coordinates of the mouse press in the web console area to get a more accurate position for your shapes.

## While()

The human face makes a good starting point as we recognize it easily, even in its simplest form, something *Multi* seems to verify with its minimal rendering of three typographic elements. The face clearly occupies a central position in everyday life and social interaction, and it almost goes without saying that its features are perceived to display our uniqueness and individuality. But this is a surface reading only. Emojis operate in this way and seem to occlude the face of experience and its ability to express complex feelings. It is tempting to think that emojis, despite their name, stop short of emotions altogether.

In *A Thousand Plateaus*, Gilles Deleuze and Félix Guattari conceive of the face as "overcoded," imposed upon us universally, resonating with some of the comments we made earlier in this chapter about Unicode. Their main point is that the face — what they called the "facial machine" — is tied to a specific Western history of ideas (e.g. the face of Jesus Christ). This, in turn, situates the origins of the face with white ethnicity (despite Jesus's birthplace) and what they call "facialization" (the imposition onto the subject of the face) has been spread by white Europeans, and thus provides a way to understand racial prejudice: "Racism operates by the determination of degrees of deviance to the White man’s face…".[^DG] The face is thus understood as an "imperial machine," subsuming language and other semiotic systems. The face is part of a surface that promotes sameness and ultimately rejects variations.

Facial recognition technologies that are capable of identifying or verifying a person from a digital image or a video frame, seem to operate on these (imperialist) terms too. When a person is identified in this way, the person's facial shape and textures are matched against a model based on a standardized dataset (we will return to this discussion in Chapter 4, "Data capture"). Moreover, the datasets are based on a disproportionate number of white faces. Facial recognition systems therefore notoriously struggle to identify black people. This has led to significant problems not least when it comes to the use of these technologies for policing.

Facial recognition systems also become unreliable when facial expressions vary, and even a big smile can falsify the results, so there is some irony that a smiley in real-life is likely to create difficulties in recognition (as if the social standard is unfriendliness). The iconic emoji smiley seems to further stress the point. The face may be able to escape overcoding under certain conditions, but emojis are quite literally "facial-machines" with prejudice built-in. Herein lies a challenge to having fun with programming: How to escape the overcoding and to develop alternative geometric shapes?

Something of this logic is evident in another article by Femke Snelting, "Other Geometries," which discusses how geometric shapes can help resist sovereign infrastructures.[^Snelting] Thinking of something as simple as a circle, and how it is associated with collective forms in terms of space and structure, Snelting writes.

> "A circle is a simple geometric shape. […] Circles are mathematically defined as the set of all points in a plane that are at the same distance from a shared center; its boundary or circumference is formed by tracing the curve of a point that keeps moving at a constant radius from the middle. […] Circles are omnipresent in practices and imaginaries of collectivity. [… and yet] Their flatness provides little in the way of vocabulary for more complex relational notions that attempt to include space, matter and time, let alone interspecies mingling and other uneasy alliances. The obligation to always stay at the same distance from the center promises a situation of equality but does so by conflating it with similarity. Circles divide spaces into an interior and an exterior, a binary separation that is never easy to overcome. We urgently need other axes to move along."[^Snelting2]

Snelting is looking for other geometries that can escape normative configurations of collectivity. She also refers to the works of Zach Blas, known for his artistic interventions with facial recognition systems (*Facial Weaponization Suite*, 2011-14), to point to the geometric spaces between nodes and edges, and to draw more attention to relations. Beyond network imaginaries of decentralized and distributed forms that have historically been part of rethinking centralized power structures, the idea is to "bend our infrastructural desires in other directions," making further reference to the work of Anna Tsing and "messy geometries" inspired by Mycelium, the branching, thread-like root structures of fungi.[^Tsing]

The challenge then is to rethink normative geometries, to turn them upside down and inside out. Herein lies the purpose of the chapter, to escape geometric overcoding and to develop alternatives. Having fun with programming in this sense is the ability to modify forms and to diverge from established rules. When it comes to programming, the rules can be applied differently, adapted or modified, and even transformed altogether.

<div class="section exercise" markdown=1>

## MiniX: Geometric emoji

**Objective:**

* To experiment with various geometric drawing methods and to explore alternatives, particularly with regard to shapes and drawing with colors.
* To reflect on the politics/aesthetics of emojis on the basis of the assigned texts.

**For additional inspiration:**

* *AIMoji* by Process Studio (2019), <https://process.studio/works/aimoji-ai-generated-emoji/>, and as part of "Uncanny Values," Vienna Biennale (2019), <https://process.studio/works/uncanny-values/>.

Some articles on emoji culture:

* Steve Witt, "Chinese Characters as Ancient 'Emoji'," *Glocal Notes* (2015), <https://publish.illinois.edu/iaslibrary/2015/10/21/chinese-characters/>.
* Michael Grothaus, "Women Finally Get a Menstruation Emoji," *Fastcompany* (2019), <https://www.fastcompany.com/90302946/women-finally-get-a-menstruation-emoji>.

**Tasks (RunMe):**

Explore shapes, geometries, and other related syntax (via p5.js references) and design two emojis, <https://p5js.org/reference/>.

**Questions to think about (ReadMe):**

* **Describe** your program and what you have used and learnt.
* **How** would you put your emoji into a wider social and cultural context that concerns a politics of representation, identity, race, colonialism, and so on? (Try to think through the assigned reading and your coding process, and then expand that to your own experience and thoughts - this is a difficult task, you may need to spend some time thinking about it).
</div>

## Required reading

* Roel Roscam Abbing, Peggy Pierrot and Femke Snelting, "Modifying the Universal," in Helen Pritchard, Eric Snodgrass & Magda Tyżlik-Carver, eds., *Executing Practices* (London: Open Humanities Press, 2018), 35-51, <http://www.data-browser.net/db06.html>.
* p5.js | Simple Shapes, <https://p5js.org/examples/hello-p5-simple-shapes.html>.
* Daniel Shiffman, "1.3,1.4,2.1,2.2: Code! Programming with p5.js," (2018) <https://www.youtube.com/watch?v=yPWkPOfnGsw&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=2>.
* Femke Snelting, "Other Geometries," *transmediale journal* 3, October 31 (2019), <https://transmediale.de/content/other-geometries>.

## Further reading

* Crystal Abidin and Joel Gn, eds., "Histories and Cultures of Emoji Vernaculars," *First Monday* 23, no. 9, September (2018), <https://firstmonday.org/ojs/index.php/fm/issue/view/607>.
* Christian Ulrik Andersen and Geoff Cox, eds., *A Peer-Reviewed Journal About Machine Feeling* 8, no. 1 (2019), <https://aprja.net//issue/view/8133>.
* Derek Robinson, "Variables," in Matthew Fuller, ed., *Software Studies: A Lexicon* (Cambridge, MA: MIT Press, 2008).

## Notes

[^Fun]: Linus Torvalds and David Diamond, *《只為樂趣：一個偶然的革命者故事》（Just for Fun: The Story of an Accidental Revolutionary）* (Knutsford: Texere Publishing, 2001), 請參見 http://en.wikipedia.org/wiki/Just_for_Fun 。其他範例包括 Jeremy Gibbons and Oege de Moor, *《程式設計的樂趣》（The Fun of Programming）* (London: Palgrave Macmillan, 2003)。

[^Fun2]: 請參見童書 Vicky Owyang Chan, *《幾何給我的樂趣》（Geometry Is Fun For Me）* (Indianapolis, IL: Dog Ear Publishing, 2017)。

[^Olga]: Olga Goriunova, *《樂趣與程式設計：探索運算中的享樂、矛盾與痛》（Fun and Software: Exploring Pleasure, Paradox and Pain in Computing）* (New York, London: Bloomsbury, 2014), 4。

[^Femke]: Femke Snelting, 「其他幾何」（Other Geometries）, *《transmediale journal》* 3 (October 31, 2019, https://transmediale.de/content/other-geometries 。

[^Emojis]: Roel Roscam Abbing, Peggy Pierrot and Femke Snelting, "Modifying the Universal," *Executing Practices*, Helen Pritchard, Eric Snodgrass & Magda Tyżlik-Carver, eds. (London: Open Humanities Press, 2018), 35-51, <http://www.data-browser.net/db06.html>. Alternatively, Femke Snelting has a lecture video in 1 hr 15 mins on the similar topic, see <https://www.youtube.com/watch?v=ZP2bQ_4Q7DY>. Other references include: Crystal Abidin and Joel Gn, "Between Art and Application: Special Issue on Emoji Epistemology," *First Monday* 23, no. 9 (September 3, 2018); Luke Stark, "Facial recognition, emotion and race in animated social media," *First Monday* 23, no. 9 (September 2018), 3; Miriam E Sweeney and Kelsea Whaley, "Technically White: Emoji Skin-tone Modifiers as American Technoculture," *First Monday* 24, no. 7 (1 July 1, 2019).

[^Unicode]: See <https://en.wikipedia.org/wiki/Unicode#Origin_and_development>.

[^Telegraph]: See <https://www.telegraph.co.uk/technology/2016/07/15/new-gender-equality-emoji-to-show-women-at-work/>.

[^ideology]: Abbing, Pierrot and Snelting, *Modifying the Universal*, 210.

[^almoji]: The project employs a machine learning algorithm and use the dataset of 3145 existing emojis as the input data to generate various uncanny emoji patterns. See <https://process.studio/works/aimoji-ai-generated-emoji/>. The project featured as part of the exhibition "Uncanny Values," Vienna Biennale (2019), <https://process.studio/works/uncanny-values/>. We discuss machine learning in more detail in chapter 10.

[^multi]: See <http://www.o-r-g.com/apps/multi>. *Multi* also provides variations of book covers for the DATA browser series published by Open Humanities Press, <http://www.data-browser.net/>.

[^random]: See p5.js random reference at <https://p5js.org/reference/#/p5/random>.

[^let]: `let` is introduced in ES6 (ECMAScript- scripting language specification standardization) to declare a variable, although `var` is still commonly used. The difference between the two is that let is block scoped, while var is function scoped. When it comes to let; if the same variable is declared both globally and locally, the local value will be restricted to the specific block of code and won't be overridden. For more on the distinction, see <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var> and <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let>.

[^color]: See p5.js color reference, <https://p5js.org/reference/#/p5/color>.

[^constant]: See p5.js const reference, <https://p5js.org/reference/#/p5/const>.

[^chun]: Chun discusses symbolic programming languages that (as higher-level languages) hide the computational process. This both empowers users to create, but conversely mystifies the inner workings of machines. Here variables are some of the many examples that computer operations abstract. We will discuss this in Chapter 6, "Object Abstraction". See Wendy Hui Kyong Chun, “On Software, or the Persistence of Visual Knowledge,” *Grey Room* 18 (January 2005): 38, <https://doi.org/10.1162/1526381043320741>.

[^binarycolor]: Red, Green and Blue are the so-called primary colors that, when added together, produce a broad array of colors. RGB color values range from 0 to 255 with a total of 256 possible values for each primary color. The reason behind is that all the colors are in 24 bit format, the red (R) takes 8 bit, the green (G) takes 8 bit and the blue (B) takes the remaining 8 bits. 2 binary values are stored for each bit, therefore 2^8th power is 256 which is the exact possible range of each color. The RGB system is closely related to the nature of computation in a binary system.

[^emojis2]: See <https://www.pngfind.com/mpng/ohwmTJ_all-the-emojis-available-on-facebook-russian-revolution/>.

[^DG]: Gilles Deleuze and Félix Guattari, *A Thousand Plateaus: Capitalism and Schizophrenia* (Minneapolis: University of Minnesota Press, 1987), 178.

[^Snelting]: Snelting, "Other Geometries."

[^Snelting2]: Snelting, "Other Geometries."

[^Tsing]: Anna Lowenhaupt Tsing, *The Mushroom at the End of the World: On the Possibility of Life in Capitalist Ruins* (Princeton, NJ: Princeton University Press, 2017).

[^Blas]: The series of works *Facial Weaponization Suite* exposes some of the inequalities associated with biometric facial recognition by making collective masks, including *Fag Face Mask* a response to scientific studies that say they can determine sexual orientation through rapid facial recognition techniques, and another mask that explores the inability of biometric technologies to detect dark skin. See <http://www.zachblas.info/works/facial-weaponization-suite/>.

[^playground]: See the tool p5.playground developed by Yining Shi, <https://1023.io/p5-inspector/>.