Ch.8: ｛酷｝詢資料（Que(e)ry data）

setup()

設置()

查詢某事就是提出一個問題，檢查其有效性或準確性。在查詢數據庫時，儘管對數據的明顯簡單請求可以選擇返回哪些數據以及返回多少數據，但我們也應該清楚地質疑此操作。查詢這檔事需要被質詢。
To query something is to ask a question about it, to check its validity, or accuracy. When querying a database, despite the apparent simple request for data that enables selectivity with regard to which and how much data is returned, we should clearly question this operation too. We need to query the query.

搜索引擎（如Google和百度）是聚合內容並根據關鍵字搜索算法返回搜索結果的應用程式的一個很好的例子。他們承諾會回答我們所有的問題，但不會讓某些答案優先於其他答案的潛在流程（和意識形態）可見。在查詢驅動的社會中，搜索引擎已成為建立真相和讓我們理解看似無窮無盡的數據的強大機制，這些數據表現為流和提要——表明信息過度飽和和注意力經濟的興起。根據 Wendy Hui Kyong Chun 的說法，用戶習慣為大數據業務提供了公式。她解釋說：「通過習慣，用戶變成了他們的機器：他們傳輸、更新、捕獲、上傳、分享、研磨、鏈接、驗證、映射、保存、垃圾和巨魔。」^[1] 例如，搜索習慣轉化為數據可存儲、可追溯和可分析。
Search engines (like Google and Baidu) are a good example of applications that aggregate content and algorithmically return search results according to a keywords search. They promise to answer all our questions, but do not make the underlying processes (and ideology) visible that prioritize certain answers over others. In a query-driven society, search engines have become powerful mechanisms for truth-making and for our making sense of seemingly endless quantities of data, manifested as streams, and feeds — indicative of the oversaturation of information and the rise of the attention economy. According to Wendy Hui Kyong Chun, user habits provide the formula for big data businesses. She explains: “Through habits users become their machines: they stream, update, capture, upload, share, grind, link, verify, map, save, trash and troll.”1 The habit of searching, for instance, is transformed into data that is storable, traceable, and analyzable.

我們已經在第 4 章“數據捕獲”中探討了程式用於捕獲輸入數據的一些過程，特別是連接到物理設備的數據，在本章中，我們將其擴展到託管在在線平台上的數據。我們從數據捕獲擴展到存儲，以及對大量捕獲數據的分析——所謂的「大數據」（甚至是「大肌肌數據」（Big Dick Data）如果我們認為這是一種男性化的幻想，）^[2]——這就是反過來用於用戶分析、有針對性的營銷、個性化推薦以及各種預測和電子商務等。隨後似乎是：“我們無法控制我們的搜索實踐——搜索引擎在控制我們，我們很容易同意這種統治，儘管大多是無意識的。”^[3] 但可以說它並不像這樣確定性，因為這些操作是更大的社會技術組合和基礎設施（包括數據、數據結構和人類主體）的一部分，它們也在不斷發展並受外部條件的影響。
We have already explored some of the processes programs use to capture input data in Chapter 4, “Data capture,” especially data that is connected to physical devices, and in this chapter we expand this exponentially to data hosted on online platforms. We scale up from the capture of data to the storage, and analysis of massive amounts of captured data — so-called “Big Data” (or even “Big Dick Data” if we consider this to be a masculinist fantasy)2 — which is in turn utilized for user-profiling, targeted marketing, personalized recommendations, and various sorts of predictions and e-commerce, and so on. Subsequently it would seem that: “We’re not in control of our search practices — search engines are in control of us and we readily agree, though mostly unconsciously, to this domination.”3 But arguably it’s not quite as deterministic as this, as these operations are part of larger socio-technical assemblages and infrastructures — including data, data structures, and human subjects — that are also constantly evolving and subject to external conditions.

為了使這些交互實體中的一些有形，並提供數據化的不太確定的願景，本章重點介紹如何通過應用程式程式設計接口 (API) 的實時查詢獲取數據 - 不同部分之間的通信協議旨在簡化軟體開發的計算機程式。查詢數據，以雙向通信的形式，是通過“請求和響應的邏輯”^[4]，結合數據的選擇、提取、傳輸和呈現的信息處理，我們將使用像JSON這樣的結構化數據文件為此（在前一章中介紹）。儘管有許多方法可以解決這些問題，但下面介紹了一種生成藝術作品，它利用 Google 的圖像搜索 API 並演示了超越技術描述的查詢，以進一步質疑圍繞開放性和可訪問性的一些假設：「查詢（酷兒）數據」換句話說。文字遊戲表明我們希望打破確認（性別）代表的穩定類別的規範數據實踐。
To make some of these interacting entities tangible, and to offer a less-deterministic vision of datafication, this chapter focuses on how data can be acquired through the real-time query of an Application Programming Interface (API) — a communication protocol between different parts of a computer program intended to simplify software development. Querying data, in the form of a two-way communication process, is about information processing coupled with data selection, extraction, transmission, and presentation through “the logic of request and response,”4 and we will use a structured data file like JSON for this (introduced in the preceding chapter). Although there are many ways of addressing these issues, the following introduces a generative artwork that utilizes the Google’s image search API and demonstrates querying beyond technical description to further question some of the assumptions surrounding openness and accessibility: to “que(e)ry data” in other words. The play on words indicates our desire to unsettle normative data practices that affirm stable categories of (gender) representation.

start()

開始（）

net.art generator (nag) ^[5] 是一個在網絡瀏覽器中運行以生成新圖像的應用程式，由藝術家 Cornelia Sollfrank 於 1997 年創建，最新版本 5b，其中該程式由 Winnie Soon 在 2017 年更新和維護. 該界面要求用戶輸入標題做為搜索詞，並輸入姓名做為作者。 Sollfrank 最初的想法是通過生成數百個帶有虛假國際女性藝術家簡介的提交條目來“破解”一個名為“擴展”的網絡藝術競賽。生成這些條目的程式被稱為“女性擴展”——net.art 本身的一個秘密例子——對當時媒體藝術界女性藝術家的代表性不足做出具有諷刺意味的女權主義評論。 ^[6] Sollfrank 不僅創造了虛構的名字，而且還有每個申請人的電子郵件地址、電話號碼和地址，以及原始網絡藝術作品的示例。
net.art generator (nag)5 is an application that runs in a web browser to generate new images, created by artist Cornelia Sollfrank in 1997, and the latest version, 5b, in which the program was updated and maintained by Winnie Soon in 2017. The interface requires the user to enter a title which then functions as the search term, and to enter a name as the author. Sollfrank’s initial idea was to “hack” a net.art competition called Extension by generating several hundred submission entries with fake international female artist profiles. The program that generated the entries was called Female Extension — an undercover example of net.art in itself — to make ironic feminist comment on the underrepresentation of female artists in the media art scene at that time.6 Sollfrank not only created fictitious names, but also email addresses, phone numbers, and addresses for each applicant, along with an example of original net.art work.

這部作品挑戰了對極客男性黑客文化的先入之見，就像她早期採訪假女黑客的紀錄片一樣，以及她所屬的網絡女權主義團體的命名：“老男孩網絡”^[7]。機器來做這項工作”（它本身就是對 Lewitt 格言的一種黑客攻擊，正如她所說的那樣，在第 5 章中做為對“黑客藝術操作系統”的澄清也有相關性。）^[8]
This work challenges preconceptions of geeky male hacker culture, as do her earlier documentaries that interviewed fake female hackers, and the naming of the cyberfeminist group she was part of: “Old Boys Network.”7 Sollfrank’s ironic claim that “a smart artist makes the machine do the work” (itself a hack of Lewitt’s maxim, as referred to in Chapter 5 has relevance here too as a clarification of “hacking the art operating system,” as she puts it.)8

女性擴充後來發展成為網絡應用程式 nag 和一個功能工具，用於從可用數據動態生成圖像，以進一步質疑規範作者、版權和藝術製作的一些底層基礎設施。最新版本的 nag 通過使用網絡搜索 API 組合從 Google 發送的數據來生成圖像。有趣的是，API 請求每天限制為 100 次，這意味著一旦超過，用戶將遇到自定義錯誤頁面，並且無法再檢索圖像。因此，可見性問題從代表政治（關於女性藝術家的數據）轉移到 API 的非代表領域，以及我們在多大程度上被授予訪問查詢可用數據並生成新安排的軟體隱藏層的權限。
Female Extension was later developed into the web application nag and a functional tool for generating images on the fly from available data to further question normative authorship, copyright, and some of the underlying infrastructures of artistic production. The latest version of nag generates images by combining the data sent from Google using the web search API. Interestingly there is a daily limit set at one hundred API requests, which means that once exceeded, users will experience a customized error page, and images can no longer be retrieved. The issue of visibility therefore shifts from a politics of representation (data on female artists) to the nonrepresentational realm of APIs, and to what extent we are granted access to hidden layers of software that queries the available data, and generates new arrangements.

Exercise in class

課堂練習

上到 net.art generator (https://nag.iap.de/) 並探索圖像和先前創建的圖像的生成。 密切關注界面並繪製出用戶輸入（例如標題）和相應輸出（圖像）之間的關係。 輸入和輸出之間的過程是什麼？ 圖像是如何合成和生成的？
Go to net.art generator (https://nag.iap.de/) and explore the generation of images and previously created images. Pay close attention to the interface and map out the relationship between user input (e.g. a title) and the corresponding output (the image). What are the processes in between the input and output? How are the images composited and generated?

圖 8.1：輸入標題為“queeries”的 net.art 生成器 Web 界面
Figure 8.1: The net.art generator web interface with the input title “queeries”

圖像處理：獲取、加載和顯示 Image processing: fetching, loading and display

本章的以下原始碼是 nag 的片段，顯示了 Web API 的請求和響應邏輯：請求的數據通過 Web API，然後 Google 使用關鍵語法 loadJSON() 返回相應的數據。 本章與上一章使用 JSON 的主要區別在於，JSON 文件不是位於您的計算機上並由您自己創建的，而是在線的。 因此，數據是（近）實時動態生成的。 JSON 文件具有更複雜的數據和組織結構。
The following source code of this chapter is a snippet from nag showing the web API’s request and response logic: requested data passes through a Web API and then Google returns the corresponding data using the key syntax loadJSON(). The major differences when using JSON between this and the previous chapter is that the JSON file is not located on your computer and created by yourself, but online. As such, the data is generated dynamically in (near) real-time. The JSON file has a more complex data and organizational structure.

RunMe https://aesthetic-programming.gitlab.io/book/p5_SampleCode/ch8_Que(e)ryData/

圖 8.2：像素操作的過程 Figure 8.2: The process of pixel manipulation

圖 8.3：對沃霍爾花的操縱
Figure 8.3: The manipulation of Warhol flowers

對於本章的示例程式碼，我們將重點關注來自搜索引擎結果的圖像，我們還將演示如何以類似於 nag 的方式在螢幕上處理和顯示圖像和像素數據。以下是語法的關鍵示例：
For this chapter’s sample code, we will focus on images from search engine results and we will also demonstrate how to process, and display image and pixel data on screen in a manner similar to nag. Here are the key examples of syntax:

• loadJSON():^[9] 如前一章所述，這是加載 JSON 文件（從文件或 URL）的函式。在此示例程式碼中，該函式用於發送 Web API（以 URL 形式）請求，並接收 JSON 格式的響應。回調函式是將返回的數據變成一個物件：loadJSON(request, gotData);。
  loadJSON():9 As discussed in the preceding chapter, this is the function that loads a JSON file (from a file or a URL). In this sample code, the function is used to send the web API (in the form of a URL) request, and receive the response in the JSON format. The callback function is to turn the returned data into an object: loadJSON(request, gotData);.
• loadImage()^[10] 和 image():^[11] 它們都用於加載和顯示圖像。聲音、文件、圖像和視頻等數據是需要在處理之前加載的對象。對於這個示例程式碼，我們事先不知道文件的位置，因此無法通過 preload() 函式加載。這就是為什麼使用回調函式來處理請求和接收圖像之間的時間間隔，例如loadImage(getImg, img=> {}});。
  loadImage()`10 and image():11 They are both used to load and display images. Data such as sound, files, images, and videos are objects that need to be loaded before they can be processed. For this sample code, we do not know the location of the file in advance, therefore this cannot be loaded by the preload() function. This is why the callback function is used to handle the time gap between requesting and receiving the image, e.g. loadImage(getImg, img=> {}});.
• loadPixels():^[12] 如果要操作或分析圖像中的數據，該函式可以提取和操作每個圖像像素的信息，將數據加載到內建的 pixels[] 陣列中。我們將在下面更詳細地研究這一點。
  loadPixels():12 If you want to manipulate or analyze the data in an image, this function can extract and manipulate information on each image pixel, loading the data into the built-in pixels[] array. We will examine this in more detail below.
• line()：用於可視化從所選圖像的像素中提取的顏色。
  line(): This is used to visualize the color extracted from the selected image’s pixels.

Source code 原始碼

/* There is Cross-Origin Resource Sharing (CORS) issue with the bigger image,
so here we are using thumbnailLink instead.
credit: Image Lines in Processing by Anna the Crow
https://www.openprocessing.org/sketch/120964 */

let url = "https://www.googleapis.com/customsearch/v1?";
// register: https://developers.google.com/custom-search/json-api/v1/overview
let apikey = "AIzaSyBCHbzWOlC5fMeok7VplmOkBISGnXAoyUM";//"INPUT YOUR OWN KEY";
//get the searchengine ID: https://cse.google.com/all (make sure image is on)
let engineID = "012341178072093258148:awktesmhn9w"; //"INPUT YOUR OWN";
let query = "warhol+flowers";  //search keywords
//check other parameters: https://tinyurl.com/googleapiCSE
let searchType = "image";
let imgSize ="medium";
let request; //full API

let getImg;
let loc;
let img_x, img_y;
let frameBorder = 25;  //each side
let imgLoaded = false;

function setup() {
  createCanvas(windowWidth,windowHeight);
  background(255);
  frameRate(10);
  fetchImage();
}

function fetchImage() {
  request = url + "key=" + apikey + "&cx=" + engineID + "&imgSize=" + imgSize +
   "&q=" + query + "&searchType=" + searchType;
  console.log(request);
  loadJSON(request, gotData); //this is the key syntax to make API request
}

function gotData(data) {
  getImg = data.items[0].image.thumbnailLink;
  console.log(getImg);
}

function draw() {
  if (getImg){	//takes time to retrieve the API data
      loadImage(getImg, img=> { //callback function
      //draw the frame + image
      push();
      translate(width/2-img.width-frameBorder, height/2-img.height-frameBorder);
      scale(2);
      if (!imgLoaded) {
        noStroke();
        fill(220);
        rect(0, 0, img.width+frameBorder*2, img.height+frameBorder*2);
        image(img, frameBorder, frameBorder);
        imgLoaded = true;
      }else{
        //draw lines
        img.loadPixels();
        img_x = floor(random(0, img.width));
        img_y = floor(random(0, img.height));
        /* The formula to locate the no: x+y*width, indicating a pixel
        from the image on a grid (and each pixel array holds red, green, blue,
        and alpha values), for more see here:
        https://www.youtube.com/watch?v=nMUMZ5YRxHI */
        loc = (img_x+img_y * img.width)*4;
        strokeWeight(0.7);
        //rgb values
        stroke(color(img.pixels[loc], img.pixels[loc + 1], img.pixels[loc+2]));
        line(frameBorder+img_x, frameBorder+img_y,
          frameBorder+img_x, frameBorder+img.height);
      }
      pop();
    });
  }
}

Exercise: accessing web APIs (step by step) 練習：訪問 Web API（分步）

上面的原始碼描述瞭如何從 Google 的圖像搜索 API（解析 JSON）中檢索靜態圖像，然後將其顯示在螢幕上。與許多其他 Web API 的情況一樣，您需要有一個 API 密鑰，一個唯一的標識號，用於授權客戶端程式可以進行 API 調用/請求。因此，平台可以確定誰在獲取數據，以及他們的流量和使用情況。^[13]
The above source code describes how to retrieve a static image from Google’s image search API (parsing JSON), and then display it on screen. As is the case with many other web APIs, you need to have an API key, a unique identification number, for authorization in which a client program can make API calls/requests. As a result, the platforms can identify who is getting the data, and their traffic and usage.13

本練習是關於從谷歌獲取“密鑰ID”和“引擎ID”，以便您可以輸入自己的一組ID並成功運行程式。這是使程式能夠即時運行和獲取在線圖像的重要信息。
This exercise is about getting the “key ID” and “Engine ID” from Google so that you can input your own set of IDs and run the program successfully. This is essential information that enables the program to run and fetch an online image on the fly.

• 第 1 步： 創建一個 p5 草圖，然後將原始碼複製並粘貼到您的程式碼編輯器中（假設您有 HTML 文件和 p5 庫）。
  Step 1: Create a p5 sketch, then copy and paste the source code into your code editor (assuming you have the HTML file and the p5 library).

• 第 2 步： 在第 3 行將 API 密鑰替換為您自己的詳細信息：let apikey = "INPUT YOUR OWN KEY";。
  Step 2: Replace the API key with your own details on the Line 3: let apikey = "INPUT YOUR OWN KEY";.
  
  圖 8.4：Google 自定義搜索界面
  Figure 8.4: Google Custom Search interface

  • 請註冊一個 Google 帳戶（需要一個 Google 帳戶才能使用 Web API）
    Register a Google account if you don’t have one (a Google account is needed in order to use the web API)
  • 登錄到您的帳戶
    Login to your account
  • 轉到 Google Custom Search https://developers.google.com/custom-search/v1/overview ^[14] 並找到部分 API 密鑰
    Go to Google Custom Search14 and find the section API key
  • 單擊藍色按鈕“Get A Key”（參見圖 8.4），然後通過輸入您的項目名稱（例如“nag-test”）創建一個新項目並按 Enter
    Click the blue button “Get A Key” (see Figure 8.4) and then create a new project by entering your project name (e.g. “nag-test”) and press enter
  • 您應該能夠看到 API 密鑰，您只需將該密鑰複製並粘貼到您的草圖中
    You should be able to see the API key and you just need to copy and paste the key into your sketch

• 第 3 步：將搜索引擎 ID (cx) 替換為您自己的，在第 5 行：let engineID = "INPUT YOUR OWN";。
  Step 3: Replace the Search engine ID (cx) with your own, on the the Line 5: let engineID = "INPUT YOUR OWN”;.

  • 轉到自定義搜索引擎^[15]
    Go to Custom Search Engine15
  • 點擊“添加”按鈕添加搜索引擎
    Click the “Add” button to add a search engine
  • 您可以限制搜索區域，但如果您想搜索所有 Google，只需輸入“https://www.google.com”
    You can limit your search area but if you want to search all of Google, simply type “https://www.google.com”
  • 輸入您的搜索引擎的名稱，例如“嘮叨測試”
    Enter the name of your search engine, e.g. “nag-test”
  • 單擊藍色的“創建”按鈕，即表示您同意 Google 提供的服務條款（當然您應該知道自己的權利）
    By clicking the blue “Create” button, you agree to the terms of Service offered by Google (and you should know your rights of course)
  • 轉到控制面板並修改搜索引擎的設置
    Go to the control panel and modify the search engine’s settings
  • 複製並粘貼搜索引擎 ID 並將其放入您的草圖中
    Copy and paste the search engine ID and put it in your sketch

• 第 4 步： 在控制面板中配置
  Step 4: Configuration in the control panel

  • 確保“圖像搜索”已開啟——藍色表示已開啟（見圖 8.5）
    Make sure “Image search” is ON — blue indicates it is (see Figure 8.5)
  • 確保“搜索整個網絡”處於開啟狀態——藍色表示開啟（見圖 8.5）
    Make sure the “Search the entire web” is ON — blue indicates it is (see Figure 8.5)

您現在應該完成修改設置，現在使用您自己的 API 密鑰和引擎 ID 運行示例程式碼。
You should now finish modifying the settings, and now run the sample code with your own API Key and engine ID.

圖 8.5：Google 自定義搜索界面 - 配置搜索設置
Figure 8.5: Google Custom Search interface - configuring search settings

APIs

Net Art Generator 關於 API 的片段：
Snippets of Net Art Generator concerning the APIs:

let url = "https://www.googleapis.com/customsearch/v1?";
//register: https://developers.google.com/custom-search/json-api/v1/overview
let apikey = "INPUT YOUR OWN KEY";
//get the searchengine ID: https://cse.google.com/all (make sure image is on)
let engineID = "INPUT YOUR OWN";
let query = "warhol+flowers";  //search keywords
//check other parameters: https://tinyurl.com/googleapiCSE
let searchType = "image";
let imgSize = "medium";
let request; //full API

function setup() {
  …
  fetchImage();
}

function fetchImage() {
  request = url + "key=" + apikey + "&cx=" + engineID + "&imgSize=" + imgSize +
   "&q=" + query + "&searchType=" + searchType;
  console.log(request);
  loadJSON(request, gotData); //this is the key syntax to make API request
}

function gotData(data) {
  getImg = data.items[0].image.thumbnailLink;
  console.log(getImg);
}

為了便於修改，我們將搜索參數設置為全局變數，其中包括所需的 URL、API 密鑰、搜索引擎 ID、搜索類型、圖像大小和查詢（參見第 1-9 行）。這些是用於過濾搜索結果的參數，如果需要/需要，可以添加更多變數。
To enable easy modification, we have set the search parameters as a global variable, which includes the required URL, API key, search engine ID, search type, image size, and query (see Lines 1-9). These are the parameters used to filter the search results, and more variables can be added if required/desired.

Web API 只是一個長 URL request = url + "key=" + apikey + "&cx=" + engineID + "&imgSize=" + imgSize + "&searchType=" + searchType + "&q=" + query; 其中包括所有憑據以及您要搜索的項目和必要的過濾器（如下所示：https://www.googleapis.com/customsearch/v1?key=APIKEY&cx=SEARCHID&imgSize=medium&searchType=image&q=warhol+flowers ）。
A web API is simply a long URL request = url + "key=" + apikey + "&cx=" + engineID + "&imgSize=" + imgSize + "&searchType=" + searchType + "&q=" + query; that includes all the credentials as well as the items you want to search for and the necessary filters (it looks like this: https://www.googleapis.com/customsearch/v1?key=APIKEY&cx=SEARCHID&imgSize=medium&searchType=image&q=warhol+flowers).

關鍵語法是 loadJSON()（在函式 fetchImage() 中的第 21 行）以 URL 的形式向圖像提供者提交“請求”，之後您需要等待返回的 JSON 文件和列表結果。回調函式 gotData()（見第 24 行）用於進一步處理和查詢返回的數據。
The key syntax is loadJSON() (in the Line 21 within the function fetchImage()) to submit a “request” in the form of a URL to the image provider after which you need to wait for the returned JSON file with a list of results. The callback function gotData() (see Line 24) is to further process and que(e)ry the data returned.

Que(e)rying data 查詢（酷兒）數據

下面的圖 8.6 顯示了 JSON 文件格式，但它包含許多您可能不需要的信息。 因此，您需要了解文件結構並找到要處理的數據。 理解返回的數據文件是查詢（e）數據過程的一部分，因為不同的提供者和平台以不同的方式構建他們的數據。
Figure 8.6 below shows the JSON file format, but it includes a lot of information that you might not need. You therefore need to understand the file structure and locate the data that you want to process. Understanding the returned data file is part of the process of que(e)rying data as different providers and platforms structure their data differently.

圖 8.6：Web API 數據結構 I
Figure 8.6: Web API data structure I

在 Web 控制台中，查找以“https”開頭並以“warhol+flowers”結尾的 URL（使用您自己的 API 密鑰和搜索引擎 ID）（類似於：https://www.googleapis.com/customsearch/v1?key=APIKEY&cx=SEARCHID&imgSize=medium&searchType=image&q=warhol+flowers ）。然後只需單擊它，您就會在 Web 瀏覽器中看到數據是如何以 JSON 文件格式構建的（見圖 8.6）。您可以設置更多參數，以便選擇更具體的數據形式，例如圖像大小、圖像顏色類型、圖像主色等。我們在示例程式碼中使用的 API 演示了最少的設置。^[16]
In the web console, look for a URL (with your own API key and search engine ID) that starts with “https” and ends with “warhol+flowers” (something like this: https://www.googleapis.com/customsearch/v1?key=APIKEY&cx=SEARCHID&imgSize=medium&searchType=image&q=warhol+flowers). Then simply click it and you will see how the data is structured in the JSON file format in a web browser (see Figure 8.6). There are more parameters you can set in order to select more specific forms of data such as image size, image color type, image dominant color, and so on. The API that we have used in the sample code demonstrates minimal settings.16

跨域資源共享 Cross-Origin Resource Sharing

與文本相比，從 Web 域（或多媒體格式，如視頻和字體）請求、接收和加載圖像會導致安全問題，在該領域中稱為跨域資源共享 (CORS)。對於本章和相應的示例，示例程式碼託管在本地機器上，本地服務器運行在 Atom 程式碼編輯器中，但 API 請求和相應的數據託管在其他地方。與網絡請求相關的 CORS 問題旨在防止“不安全的 HTTP 請求”。^[17] 在行業環境中，它通常配置在 Web 服務器端以處理網絡請求。但出於演示目的，我們使用了由搜索提供程式生成的縮略圖（data.items[0].image.thumbnailLink;），而不是加載託管在具有各種設置的各種服務器上的原始 Web 圖像（更多關於數據結構的信息）在下一節）。我們只需使用 createImg() 或 loadImage() 加載圖像（參見圖 8.2 和 8.3）。
In contrast to text, requesting, receiving, and loading images from a web domain (or multimedia formats such as video as well as fonts) will incur security issues, known in the field as Cross-Origin Resource Sharing (CORS). For this chapter, and in the corresponding example, the sample code is hosted on a local machine with a local server running in the Atom code editor, but the API request, and the corresponding data is hosted elsewhere. The CORS issue related to network requests is designed to prevent “unsafe HTTP requests.”17 In an industry environment, it is usually configured on the web server side to handle the network requests. But for demonstration purposes, we have used the thumbnail images (data.items[0].image.thumbnailLink;) generated by the search provider instead of loading original web images hosted on various servers with a variety of settings (more about the data structure in the next section). We simply load the images by using createImg() or loadImage() (see Figures 8.2 & 8.3).

數據結構 Data structure

圖 8.6 演示瞭如何在 JSON 文件中指示特定數據。有一行 data.items[0].image.thumbnailLink;（請參閱完整原始碼中的第 33 行），它從 JSON 文件中獲取指定的返回對象（圖像 URL）。術語“數據”是指使用回調函式function gotData(data){} 返回的所有對象。 items[0] 指向第一個數據對象（使用陣列概念，其中索引的第一個位置為 0）。點語法允許您導航到 items[0] 下的對像image和thumbnailLink縮略圖鏈接（“數據 > 項目 [0] > 圖像 > 縮略圖鏈接”）。請注意，此層次結構特定於此 API，因為其他 Web API 的數據結構可能不同。
Figure 8.6 demonstrates how you can indicate specific data in a JSON file. There is the line data.items[0].image.thumbnailLink; (see Line 33 from the full source code), which gets the returned object specified (the image URL) from the JSON file. The term “data” refers to all the objects returned using the callback function function gotData(data){}. items[0] which points to the first data object (using the array concept in which the first position on the index is 0). The dot syntax allows you to navigate to the object image and thumbnailLink under items[0] (“data > items[0] > image > thumbnailLink”). Note that this hierarchy is specific to this API because other web APIs might structure their data differently.

要了解有關 JSON 文件的更多信息，您可以瀏覽其他數據對象，例如“查詢 > 請求 > 0”，這些對象將顯示例如在圖像搜索中找到多少結果、已處理哪些搜索詞以及如何處理返回了許多數據對象（見圖 8.7）。在示例程式碼中，我們僅從前 10 個搜索項開始，但您可以配置參數 startIndex 以獲取 1.1 億張圖像中的最後 10 張。此外，您可以在 JSON 文件中的 items 下找到以陣列形式返回的每個特定圖像的數據，例如標題和頁面內容的相應片段。
To learn more about the JSON file, you can navigate through other data objects such as “queries > request > 0” that would show, for example, how many results are found on the image search, which search terms have been processed, and how many data objects were returned (See Figure 8.7). In the sample code, we start with only the top 10 search items, but you can configure the parameter startIndex to get the last 10 images out of 110 million. Furthermore, you can find the data for each specific image returned in the form of an array, such as the title, and the corresponding snippet of the page content under items in the JSON file.

圖 8.7：Web API 數據結構 II
Figure 8.7: Web API data structure II

我們現在可以總結使用 Web API 和從在線平台獲取數據的一般過程：
We can now summarize the general process of working with web APIs and getting data from an online platform:

• 了解 Web API 的工作流程。
  Understanding the web API’s workflow.
• 了解指示哪些數據和參數可用的 API 規範。
  Understanding the API specification that indicate which data and parameters are available.
• 了解 Web API 返回的文件格式（例如 JSON）。
  Understanding the file format (such as JSON) returned by the web API.
• 需要註冊和獲取 API 密鑰以及任何其他附加配置。
  Registering and getting the API key(s) and any other, additional configuration is needed.

鑑於我們的具體示例嘮叨和示例程式碼，我們還想反思日益流行的 API 實踐。雖然谷歌提供了訪問數據的API，但需要記住的是，從企業到非營利組織的所有單位的免費API請求數量限制在100次，實際數據是從公眾那裡收集的，人們沒有訪問選擇、確定優先級、包括/排除和呈現數據的特定算法。這引發了關於 API 實踐的開放性、透明度、可訪問性和包容性程度的嚴重問題。^[18]
Given our specific example nag and the sample code, we want to also reflect on increasingly prevalent API practices. Although Google has provided the API to access the data, it should be remembered that the amount is limited to 100 free API requests for all units from business to non-profit organizations, and the actual data is collected from the public, and people have no access to the specific algorithm which selects, prioritizes, includes/excludes and presents the data. This raises serious questions about the degree of openness, transparency, accessibility, and inclusivity of API practices.18

課堂練習 Exercise in class

圖 8.8：API 請求和響應邏輯
Figure 8.8: The API request and response logic

1. 參考圖 8.8，您能概括一下通過 Web API 請求和接收的內容嗎？ （或者，從概念上講，執行哪種形式的控制和交換？）
   Referring to Figure 8.8, can you recap what has been requested and received through the web API? (Or, more conceptually, which forms of control and exchange are performed?)
2. 更改您自己的查詢字串。當前的關鍵字是“warhol Flowers”，但請注意，程式無法識別字符之間的空格，因此需要將關鍵字寫為“warhol+flowers”。
   Change your own query strings. The current keywords are “warhol flowers,” but note that the program doesn’t understand spaces between characters and therefore the keywords need to be written as “warhol+flowers.”
3. 回到上面的API部分，檢查 不同參數 different parameters的搜索過濾規則^[16:1]，以了解圖像的分類，例如“圖像顏色類型”參數。 URL 參數由“&”符號分隔，如下所示：https://www.googleapis.com/customsearch/v1?key=APIKEY&cx=SEARCHID&imgSize=medium&searchType=image&q=warhol+flowers 。
   Refer back to the section on APIs above, examine the search filtering rules with different parameters16 to get a sense of the categorization of images, such as the parameter of “image color type”. The URL parameters are separated by an “&” symbol as follows: https://www.googleapis.com/customsearch/v1?key=APIKEY&cx=SEARCHID&imgSize=medium&searchType=image&q=warhol+flowers.
4. 研究 JSON 文件以獲得數據查詢的概述，例如有多少搜索返回和查詢性能。然後修改草圖以獲取其他數據，例如 Web 控制台中顯示的超出圖像 URL 的文本。
   Study the JSON file to get an overview of data query, such as how many search returns and the query performance. Then modify the sketch to get other data such as the text showing in the web console beyond the image URL.

LoadPixels() 加載像素（）

圖 8.9：圖像如何由像素組成的說明
Figure 8.9: An illustration of how an image is made up of pixels

對於圖像文件上的此示例草圖，將僅選擇和處理圖像中的一種顏色。這意味著程式將隨機定位並從圖像中挑選任何像素。pixels 函式還分析和檢索所選像素的顏色，特別是用於在螢幕上繪製彩色線條的 RGB 顏色值（參見上面的圖 8.9 做為說明，但實際上像素大小要小得多）。
For this sample sketch on an image file, only one color in the image will be selected and processed. This means that the program will randomly locate and pick any pixel from the image. The function pixels also analyzes and retrieves the color of the selected pixel, specifically the RGB color values that are used to draw the colored line on screen (see Figure 8.9 above as an illustration but in reality the pixel size is much smaller).

彩色線（見圖 8.2 和 8.3）不是隨機繪製的，而是基於所選像素的 x 和 y 坐標，每條線都是從該點沿整個 y 軸繪製的。除了位置之外，線條的顏色也基於所選像素的 RGB 值。結合位置和顏色會導致圖像的顏色可視化，隨著時間的推移展開抽像畫。
The colored lines (see Figures 8.2 and 8.3) are not randomly drawn, but they are based on the x and y coordinates of the pixel selected, and each line is drawn along the whole y axes from that point. Apart from the position, the color of the line is based on the RGB values of the selected pixel as well. Combining both the position and the color leads to something like a color visualization of the image, an abstract painting unfolding over time.

所選的每個像素都包含顏色信息，即 R（紅色）、G（綠色）、B（藍色）和 A（alpha）值。這就是數據在像素的一維陣列中的存儲方式：
Each pixel selected contains color information that is the R (red), G (green), B (blue) and A (alpha) values. This is how the data is being stored in the pixels’ one dimensional array:

圖 8.10：紐約大學綜合數字媒體對每個像素的細分說明。 圖片來自 https://idmnyu.github.io/p5.js-image/ ^[19]
Figure 8.10: An illustration of the breakdown of each pixel by Integrated Digital Media, NYU. Image from https://idmnyu.github.io/p5.js-image/ 19

讓我們創建一個變數 loc 來存儲像素信息。 每個像素位置都需要明確定位，以便在正確的位置繪製一條線。 在函式 Pixels() 之後，每個像素佔據四個位置：具有四個 RGBA 值的第一個像素，然後是具有另外四個 RGBA 值的第二個像素，依此類推：
Let’s make a variable loc for storing pixel information. Each pixel position needs to be clearly located so that a line can be drawn at the right position. Following the function Pixels(), each pixel takes up four locations: The first pixel with the four RGBA values, then the second pixel with another four RGBA values, and so on, and so forth:

pixels = [p1, p1, p1, p1, p2, p2, p2, p2, p3, p3, p3, p3…]

因此，像素由四個不同的位置組成，每個位置存儲與單個像素相關的單個值。 定位特定像素的公式為loc = (img_x+img_y * img.width)*4;。 img.pixels[loc]、img.pixels[loc+1]、img.pixels[loc+2]的使用使用函式pixels[]定位各自的RGB值。
Therefore, the pixel consists of four different locations, each one storing a single value relating to a single pixel. The formula for locating a specific pixel is loc = (img_x+img_y * img.width)*4;. The use of img.pixels[loc], img.pixels[loc+1], img.pixels[loc+2] locates the respective RGB values using the function pixels[].

function draw() {
  if (getImg) { //takes time to retrieve the API data
    loadImage(getImg, img=> { //callback function
      //draw the frame + image
      push();
      translate(width/2-img.width-frameBorder, height/2-img.height-frameBorder);
      scale(2);
      if (!imgLoaded) {
        noStroke();
        fill(220);
        rect(0, 0, img.width+frameBorder*2, img.height+frameBorder*2);
        image(img,frameBorder, frameBorder);
        imgLoaded = true;
      }else{
        //draw lines
        img.loadPixels();
        img_x = floor(random(0, img.width));
        img_y = floor(random(0, img.height));
        /* The formula to locate the no: x+y*width, indicating a pixel
        from the image on a grid (and each pixel array holds red, green, blue,
        and alpha values), for more see here:
        https://www.youtube.com/watch?v=nMUMZ5YRxHI */
        loc = (img_x+img_y * img.width)*4;
        strokeWeight(0.7);
        //rgb values
        stroke(color(img.pixels[loc], img.pixels[loc + 1], img.pixels[loc+2]));
        line(frameBorder+img_x, frameBorder+img_y,
         frameBorder+img_x, frameBorder+img.height);
      }
      pop();
    });
  }
}

上面的程式碼片段是關於顏色可視化部分的摘錄。 draw() 函式中的邏輯是使用函式 translate() 繪製灰色外框並在中心加載圖像（參見第 6 行。）
The above code snippets is an excerpt of the parts about the color visualization. The logic in the draw() function is to draw the grey outer frame and load the image in the center by using the function translate() (see Line 6.)

條件結構 if (getImg){}（參見第 2 行）用於留出足夠的時間來加載 JSON 文件並能夠獲取文件路徑。成功加載圖像後（使用函式 loadImage()（參見第 3 行）和相應的回調函式 img），外框和圖像都被繪製在畫布上。
The conditional structure if (getImg){} (see Line 2) is used to allow sufficient time to load the JSON file and to be able to get the file path. Upon the successful loading of an image (with the function loadImage() (see Line 3) and the corresponding callback function img), both the outer frame and the image are drawn on the canvas.

外框和圖像僅在狀態 imgLoaded 更新時繪製一次（參見第 8 行）。對於繪製的每一幀，程式將使用語法 loadPixels()（參見第 16 行）分析圖像的像素，選擇隨機像素，並獲取相應像素的 x 和 y 坐標（使用變數 img_x 和 img_y）。然後它使用pixels[] 從選定像素中獲取 RGB 顏色值，然後使用語法 strokeWeight()、stroke() 和 line() 繪製彩色線條（參見第 24-28 行）。
The outer frame and the image are only drawn once with the update of the status imgLoaded (see Line 8). For each frame drawn, the program will analyze the image’s pixels using the syntax loadPixels() (see Line 16), picking the random pixel, and getting the corresponding pixel’s x and y coordinates (using the variables img_x and img_y). It then gets the RGB color values from the selected pixel using pixels[], then draws the colored line with the syntax strokeWeight(), stroke() and line() (see Lines 24-28).

包含像素和顏色元素的這一部分展示了計算機如何將圖像做為數據進行處理和存儲，這與人類看待和感知它的方式有著根本的不同。^[20] 這也是演示如何將圖像對象轉換為數字以進行計算的一種方式，這有點類似於第 4 章“數據捕獲”中的人臉跟踪示例，其中可以在超出人類感知的範圍內定位像素。這些示例可能會幫助您理解當代應用，例如跟踪技術，甚至計算機視覺，這些應用使用機器學習技術，其中圖像用作訓練數據（我們將在第 10 章“機器學習”中回到這一點）。
This section with the pixel and color elements shows how a computer processes and stores an image as data which is fundamentally different from how humans see and perceive it.20 It is also a way to demonstrate how an image object is being translated into numbers for computation, which is somewhat similar to the example of face tracking in Chapter 4, “Data capture,” in which a pixel can be located at a scale beyond human perception. These examples may help you understand contemporary applications like tracking technology and even computer vision that employs machine learning techniques in which images function as training data (we return to this in Chapter 10, “Machine unlearning”).

Different types of bugs 不同類型的蟲

1945 年，Grace Murray Hopper 的計算機日誌中記錄了一隻死飛蛾，記錄了哈佛大學 Mark II Aiken 繼電器計算器的問題。^[21] “bug”^[22] 被困在繼電器觸點之間，中斷了早期機電計算機的程式流程。在像 ENIAC 這樣的數字計算機的早期，使用面板到面板的佈線電纜和用於程式設計的開關，“調試”是通過拔掉電纜來進行的。通過這種方式，可以停止中間運行的程式以調試問題。如今，調試是高級程式設計語言不可或缺的一部分，通過逐行執行程式碼來幫助程式設計師定位錯誤。在這個階段——隨著你的程式設計技能的發展和你的程式變得越來越複雜——理解、識別和定位錯誤或錯誤（做為調試過程的一部分^[23]）很重要，這樣你就可以構建一個可行的草圖。
In 1945, a dead moth was taped into Grace Murray Hopper’s computer log book to document a problem with Harvard University’s Mark II Aiken Relay Calculator.33 The “bug”32 was trapped between relay contacts and interrupted the program flow of the early electromechanical computer. In early days of digital computers like ENIAC, with panel-to-panel wiring cables and switches for programming, “debugging” was carried out by unplugging cables. In this way, one could stop a program running in the middle to debug an issue. Nowadays, debugging in an integral part of high level programming languages to assist programmers to locate bugs by executing code line by line. At this stage – as you have developed your programming skills and your programs are becoming more complex – it is important to understand, identify, and locate errors or bugs (as part of the debugging process21) so that you can build a workable sketch.

密切關注錯誤/錯誤是學習程式設計的重要組成部分，因為這可以讓程式設計師深入了解程式操作，例如程式在什麼時候產生意外結果並導致失敗。在調試草圖時，您是否能夠確定錯誤是來自您自己的程式碼，還是在運行時解析數據，或來自其他第三方（如圖像搜索引擎）？ （程式變得越來越複雜，因為涉及到更多的代理。）它們是小錯誤還是嚴重錯誤（會阻止您的程式運行）？它們是語法錯誤、運行時錯誤還是邏輯錯誤（如下所述）？
Paying close attention to errors/bugs is a vital part of learning to program as this allows programmers to gain insights into program operations, such as at which point the program produces unexpected results and causes failure. Are you able to identify whether the errors are from your own code, or from parsing the data while it is running, or from other third parties like the image search engine when you debug your sketch? (Programs are getting more complex because there are more agents involved.) Are they minor errors or critical errors (that stop your program from running)? Are they syntactic, runtime, or logical errors (as explained below)?

大致上來說，有以下三種錯誤類型：
Broadly speaking, there are three types of errors:

1. 語法錯誤是語法問題，也稱為解析錯誤。這些錯誤——比如拼寫錯誤或缺少一個封閉的括號——往往更容易捕捉，並且可以被解析器（在這種情況下是瀏覽器）檢測到
   Syntax errors are problems with the syntax, also known as parsing errors. These errors — such as spelling errors or missing a closed bracket — tend to be easier to catch, and can be detected by a parser (in this case the browser).

   語法錯誤：參數列表後缺少 )
   SyntaxError: missing ) after argument list

2. 運行時錯誤發生在程式執行期間，而語法正確。 Web 瀏覽器控制台是了解這些錯誤的地方。 下面顯示了兩個運行時錯誤示例：
   Runtime errors happen during the execution of a program while the syntax is correct. The web browser console is the place to understand these errors. Below shows two examples of runtime errors:
   如果我們刪除 draw() 函式中的 if (getImg){} 條件檢查，則程式最初無法加載圖像，因為處理 Web API 請求需要一些時間。 該錯誤將繼續顯示在 Web 控制台中，直到程式成功解析圖像 URL。
   If we remove the conditional checking if (getImg){} within the draw() function, the program cannot initially load the image as it takes some time to process the web API request. The error will keep on showing in the web console until the program successfully parses the image URL.

   p5.js 說：loadImage() 期望（從零開始的索引）的字串String 參數 #0，但卻收到了一個空變數。 如果不是故意的，這通常是范圍的問題：https://p5js.org/examples/data-variable-scope.html at about:srcdoc:94:6 。 https://github.com/processing/p5.js/wiki/Local-server
   p5.js says: loadImage() was expecting String for parameter #0 (zero-based index), received an empty variable instead. If not intentional, this is often a problem with scope: https://p5js.org/examples/data-variable-scope.html at about:srcdoc:94:6. https://github.com/processing/p5.js/wiki/Local-server
   向服務器發送了錯誤的 API 密鑰。 這是一個更嚴重的錯誤，因為程式無法提取圖像並將其顯示在螢幕上：
   Wrong API key sent to the server. It is a more critical error because the program cannot extract the image and display it on the screen:
   p5.js 說： 加載 json 時似乎出現問題。 嘗試檢查文件路徑是否正確，或運行本地服務器。
   p5.js says: It looks like there was a problem loading your json. Try checking if the file path is correct, or running a local server.

3. 邏輯錯誤可以說是最難定位的錯誤，因為它們處理的是邏輯而不是語法。 程式碼可能仍然可以完美運行，但結果不是預期的。 這表明我們認為我們要求計算機執行的操作與它實際處理指令的方式之間存在差異。
   Web 控制台是接收錯誤通知或測試程式碼是否按預期運行的好地方。 解決錯誤時，重要的是要準確識別錯誤發生的位置，即使用 console.log()（或 p5.js 中的 print()）包含錯誤的塊或程式碼行。 逐步測試並運行程式的各個部分，然後嘗試識別錯誤類型，並相應地修復它們。
   Logical errors are arguably the hardest errors to locate as they deal with logic not syntax. The code may still run perfectly, but the result is not what was expected. This indicates a discrepancy between what we think we asked the computer to do and how it actually processes the instructions. The web console is a good place to be notified of errors or test whether the code is running as we expected. When solving errors, it is important to identify exactly where they occur, i.e. which block or line of code contains the mistake by using console.log() (or print() in p5.js). Test and run the various parts of the program step by step, then try to identify the error types, and fix them accordingly.

While()

對錯誤的討論使我們回到查詢和查詢的含義：詢問諸如數據之類的東西是否有效或準確，但也質疑首先如何將其視為有效或準確。除非對數據及其運行條件提出進一步的問題，否則這裡存在自我實現預言的危險。例如，當談到大數據時，人們傾向於將非結構化數據視為原始和未經中介的數據，而在實踐中，總會有一些關於其組成的額外信息，尤其是從數據收集的方式中獲得的信息。第一名。更“取證”的方法揭示了數據是如何選擇、預處理、清理等的。這與 Eyal Weizman 和 Thomas Keenan 將“forensis”定義為不僅僅是數據收集或捕獲的科學方法的方式一致：
The discussion of errors brings us back to what we mean by query and que(e)ries: asking whether something like data is valid or accurate, but also to questioning how it is deemed to be valid or accurate in the first place. There is a danger of self-fulfilling prophecy here unless further questions are asked about data, and the conditions of its operation. When it comes to big data, for instance, there is a tendency to think of unstructured data as raw and unmediated, whereas in practice there is always some additional information about its composition, not least derived from the means by which it was gathered in the first place. A more “forensic” approach reveals how the data was selected, preprocessed, cleaned, and so on. This is in keeping with the way that Eyal Weizman and Thomas Keenan define “forensis” as more than simply the scientific method of data-gathering or capture:

“當然，法醫不僅僅是關於科學，而且是關於科學發現的展示，關於科學做為一種說服藝術。源自拉丁語“forensis”，這個詞的詞根指的是“論壇”，因此也指在專業、政治或法律聚會前進行辯論的實踐和技巧。在古典修辭中，一項這樣的技能涉及讓對像在論壇上發言。因為他們不為自己說話，所以需要在‘事物的語言’和人的語言之間進行翻譯、調解或解釋。”^[24]
“Forensics is, of course, not simply about science but also about the presentation of scientific findings, about science as an art of persuasion. Derived from the Latin ‘forensis,’ the word’s root refers to the ‘forum,’ and thus to the practices and skill of making an argument before a professional, political or legal gathering. In classical rhetoric, one such skill involved having objects address the forum. Because they do not speak for themselves, there is a need for a translation, mediation, or interpretation between the — ‘language of things’ — and that of people.”22

使用取證不僅可以檢測數據中的特徵或模式，還可以生成新的形式、新的形狀或參數：讓數據為自己說話——例如，做為法庭上的證人——並發現材料中不直接明顯的方面。這些原則對於法醫建築的工作至關重要（魏茨曼是其中的一部分），^[25] 在這種情況下，法醫的實踐是指在法律和政治過程中產生和呈現建築證據，數據提供了以下能力像口頭（人的）證詞一樣作證。在這種情況下，知識是以非常精確的方式產生的，而不是通過以扭曲的方式理解大數據的典型算法的還原概括。
Using forensics it is possible not only to detect features or patterns in data, but also to generate new forms, new shapes, or arguments: to allow data to speak for itself — as witness in a court of law, for instance — and to uncover aspects of what is not directly apparent in the material. These principles are fundamental to the work of Forensic Architecture not least (which Weizman is part of),23 and the practice of forensics in this case refers to the production and presentation of architectural evidence within legal and political processes, with data offering the ability to bear witness like spoken (human) testimony. In such cases knowledge is produced in very precise ways rather than through the reductive generalizations of typical algorithms that make sense of the big data in distorted ways.

如引言中所述，簡單的操作（例如搜索或饋送）以由公司利益明確決定的方式訂購數據和具體化信息。這種政治與 Antoinette 的 Rouvroy 的短語“算法治理”（第二部分結合了術語治理和理性）產生了共鳴，以表明我們的思維是如何被各種技術塑造的。 ^[26] 根據 Rouvroy 的說法，知識越來越多地“沒有真相” ”由於越來越多的機器使用對內容本身或知識是如何產生的不感興趣的搜索引擎來過濾後者。令人擔憂的是，算法開始定義什麼才算知識，這是進一步的主體化案例（我們成為主體的過程）。 Rouvroy 聲稱：“實時演變的新的“真相政權”可能看起來是“解放的”和“民主的”（關於“舊的”權威、等級制度和可疑的僵化類別和措施），但“主體”它產生的是“沒有他異性的眾多”。^[27] 通過聚合大量數據的過程，這產生了與算法對我們的意圖、手勢、行為、習慣、意見或慾望的理解相關的人類主體。^[1:1] Rouvroy 稱之為“沒有主題的個性化”，並指出了當關鍵在於通過算法管理通過數據挖掘和分析進行主題化的過程時關注個人數據的錯誤。
As noted in the introduction, simple operations such as search or feeds order data and reify information in ways that are clearly determined by corporate interests. The politics of this resonates with what Antoinette’s Rouvroy’s phrase “algorithmic governmentality” (the second part of which combines the terms government and rationality) to indicate how our thinking is shaped by various techniques.24 According to Rouvroy, knowledge is increasingly delivered “without truth” thanks to the increasing use of machines that filter the latter using search engines that have no interest in the content as such or how knowledge is generated. The concern is that algorithms are starting to define what counts as knowledge, a further case of subjectification (the process through which we become subjects). Rouvroy claims: “The new, “truth regime,” evolving in real-time, may appear “emancipatory” and “democratic” (with regards to “old” authorities, hierarchies and suspiciously rigid categories and measures), but the “subjects” it produces are “multitudes without alterity.”25 This produces human subjects in relation to what algorithms understand about our intentions, gestures, behaviors, habits, opinions, or desires, through a process of aggregating massive amounts of data.1 Rouvroy calls this “personalization without subjects” and identifies the mistake of focusing on concerns about personal data when what is at stake are the processes of subjectification by data mining and profiling, by means of algorithmic governmentality.

如果您牢記這些想法，Cornelia Sollfrank 的項目女性擴展（在本章開頭提到）將變得更加強大，因為它破解了個性化過程。 “藝術操作系統”的男性統治被欺騙相信自己的包容性自由議程，但整個場景都是假的。談到谷歌及其運營，我們可以看到，雖然它提供了用於實驗的 API，但它只在限制條件下這樣做：通過限制公共和非營利/教育用途的請求，並且只透露一些可用參數其中搜索數據（做為知識）如何通過算法呈現的邏輯仍然不為公眾所知。 nag 強調數據的查詢，不僅是數據請求及其響應的執行，而且還通過質疑文化“規範”的延續。例如，在壓迫算法中，Safiya Umoja Noble 展示了種族主義如何通過霸權搜索結果得到加強：
If you keep these ideas in mind Cornelia Sollfrank’s project Female Extension (mentioned at the beginning of this chapter) becomes all the more powerful, as it hacks the process of personalization. The male domination of the “art operating system” is tricked into believing its own liberal agenda of inclusion and yet the whole scenario is fake. When it comes to Google and its operations, we can see that although it provides its API for experimentation, it only does so under restrictions: by limiting requests for public and non-profit/educational use, and by only revealing some of the available parameters in which the logic of how the search data (as knowledge) is presented algorithmically is still unknown to the public. nag emphasizes the querying of data, not only the execution of the data request and its response, but also by questioning the perpetuation of cultural “norms.” In Algorithms of Oppression, Safiya Umoja Noble, for example, demonstrates how racism is reinforced through hegemonic search results:

“搜索發生在高度商業化的環境中，各種流程塑造了可以找到的內容；然後這些結果被標準化為可信的，並且經常被呈現為事實[並且]成為我們使用數字技術和計算機的經驗的規範部分，它們使我們相信這些人工製品因此也必須提供對去政治化的可信、準確信息的訪問和中立。”^[28]
“Search happens in a highly commercial environment, and a variety of processes shape what can be found; these results are then normalized as believable and often presented as factual [and] become such a normative part of our experience with digital technology and computers that they socialize us into believing that these artifacts must therefore also provide access to credible, accurate information that is depoliticized and neutral.”26

信息的組織是通過泛化過程構建的。關於先進的數據挖掘過程和統計建模，Adrian Mackenzie 談到了促進機器學習發展的各種泛化作用。 ^[29] 認識到所有模式識別和統計技術如何“生成陳述和迅速行動”很重要與個人慾望的實例相關”，他們對數據進行轉換、構建和施加形狀，以便“發現、決定、分類、排名、聚類、推薦、標記或預測”某事或其他。^[30] 假設，如Mackenzie 指出，存在的一切都可以還原為穩定且不同的分類：“在所有情況下，預測都取決於分類，而分類本身假定類的存在，以及定義類成員資格的屬性。”^[31] 這種穩定的假定類和分類是我們希望在這裡查詢的主要問題之一，好像世界也是這樣組織的（當很清楚時不會）。困難在於任何模型在多大程度上是準確或有效的。
The organization of information is structured through the process of generalization. Concerning advanced data-mining processes and statistically modelling, Adrian Mackenzie speaks of the various kinds of generalization at work that allow for the development of machine learning.27 It is important to recognize how all techniques of pattern recognition and statistics “generate statements and prompt actions in relation to instances of individual desire” and they transform, construct, and impose shape on data, in order to then “discover, decide, classify, rank, cluster, recommend, label or predict” something or other.28 The assumption, as Mackenzie points out, is that everything that exists is reducible to stable and distinct categorization: “In all cases, prediction depends on classification, and classification itself presumes the existence of classes, and attributes that define membership of classes.”29 This presumption of stable classes and classifications is one of the main problems that we wish to query here, as if the world was organized that way too (when it is clearly not). The difficulty lies as to what extent any model is accurate or valid.

以這種方式查詢數據會進一步質疑如何收集、存儲、分析、推薦、排名、選擇和策劃數據，以了解更廣泛的社會和政治影響，尤其是諸如性別和種族被正常化和霸權化。從女權主義的角度質疑材料的權力結構是為了理解“塑造現實的機制”^[32] 以及它們如何被重新程式設計。
To que(e)ry data in this way throws into further question how data is collected, stored, analyzed, recommended, ranked, selected, and curated in order to understand the broader social and political implications, not least how categorizations such as gender and race are normalized and hegemonized. To query the power structures of materials from a feminist standpoint is to understand “the mechanisms that shape reality”30 and how they might be reprogrammed.

MiniX: Working with APIs (in a group)

MiniX：使用 API（在一個小組中）

目標：
Objectives:

• 設計和實施利用 Web API 的程式。^[33]
  To design and implement a program that utilizes web APIs.31
• 學習協作編碼和概念化程式。
  To learn to collaboratively code and conceptualize a program.
• 反思使用 API 解析數據的過程，關注數據的註冊、可用性、選擇和操作。
  To reflect upon the processes of data parsing using an API, paying attention to the registration, availability, selection, and manipulation of data.

獲得額外的靈感：
Get additional inspiration:

• Winnie Soon 和 Helen Pritchard (2021) 的 Queer Motto API 和程式碼示例，http://siusoon.net/queer-motto-api ，https://editor.p5js.org/siusoon/sketches/7UAv17xw8
  Queer Motto API by Winnie Soon and Helen Pritchard (2021) with code example, http://siusoon.net/queer-motto-api, https://editor.p5js.org/siusoon/sketches/7UAv17xw8
• 使用程式碼示例打開天氣，https://www.youtube.com/watch?v=ecT42O6I_WI 。
  Open Weather with code example, https://www.youtube.com/watch?v=ecT42O6I_WI.
• 其他帶有程式碼示例的天氣 API 示例，https://p5js.org/examples/hello-p5-weather.html 。
  Other weather API example with code example, https://p5js.org/examples/hello-p5-weather.html.
• 紐約時報的程式碼示例，https://www.youtube.com/watch?v=IMne3LY4bks&list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r&index=9 。
  New York Times with code example, https://www.youtube.com/watch?v=IMne3LY4bks&list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r&index=9.
• 帶有程式碼示例的 Giphy 圖像，https://www.youtube.com/watch?v=mj8_w11MvH8&index=10&list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r 。
  Giphy images with code example, https://www.youtube.com/watch?v=mj8_w11MvH8&index=10&list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r.
• 維基百科 API，https://www.youtube.com/watch?v=RPz75gcHj18。
  Wikipedia API, https://www.youtube.com/watch?v=RPz75gcHj18.
• 帶有程式碼示例的 Twitter API 和 Twitter Bot，http://shiffman.net/a2z/twitter-bots/ 。 （請注意，Twitter 已經收緊了註冊 API 的規則，您需要有一個令人信服的提案，而且過程可能會很長。）
  Twitter API and Twitter Bot with code example, http://shiffman.net/a2z/twitter-bots/. (Note that Twitter has tightened the rules for registering the API and you need to have a convincing proposal as well as the process can be lengthy.)
• 搜索許多其他類型的 API，https://www.programmableweb.com/ 。
  Search many other kinds of API, https://www.programmableweb.com/.

任務（RunMe）：Tasks (RunMe):

這是一個相對複雜的練習，需要您：
This is a relatively complex exercise that requires you to:

• 設計一個至少使用一個 Web API 的程式，包括：
  Design a program that utilizes at least one web API, including:
  • 查找可用的 Web API 和您想要探索的數據。
    Finding available web APIs and the data that you want to explore.
  • 了解可用數據：數據文件格式和 API 規範。
    Understanding the available data: the data file format and the API’s specifications.
  • 決定要選擇探索和試驗的數據字段。
    Deciding which data fields you want to choose to explore and experiment with.
  • 在您的程式中使用 Web API 和相應的數據。 （如果您是從其他平台獲取數據，請預留更多時間，因為註冊過程可能需要很長時間。）
    Utilizing the web API and the corresponding data in your program. (Please reserve more time if you are getting data from other platforms, as the registration process can take a long time.)

要考慮的問題（自述文件）：
Questions to think about (ReadMe):

• 該計劃是關於什麼的？您使用了哪個 API，為什麼？
  What is the program about? Which API have you used and why?
• 您能否描述和反思您在這個 miniX 中獲取、處理、使用和表示數據的過程？您對這些數據了解多少，或者您想了解更多信息？平台提供商如何對數據進行排序並為您提供所需的數據？所選 API 中的權力關係是什麼？ API在數字文化中的意義是什麼？
  Can you describe and reflect on your process in this miniX in terms of acquiring, processing, using, and representing data? How much do you understand this data or what do you want to know more about? How do platform providers sort the data and give you the requested data? What are the power relations in the chosen APIs? What is the significance of APIs in digital culture?
• 如果您有更多時間，請嘗試制定與 Web API 或查詢/解析過程相關的問題，您希望進一步調查這些問題。
  Try to formulate a question in relation to web APIs or querying/parsing processes that you would like to investigate further if you had more time.

Required reading 必讀

• David Gauthier、Audrey Samson、Eric Snodgrass、Winnie Soon 和 Magda Tyżlik-Carver，“執行”，Nanna Thylstrup、Daniela Agostinho、Annie Ring、Catherine D'Ignazio 和 Kristin Veel，編輯，不確定檔案（馬薩諸塞州劍橋： 麻省理工學院出版社，2021 年）。
  David Gauthier, Audrey Samson, Eric Snodgrass, Winnie Soon, and Magda Tyżlik-Carver, “Executing,” in Nanna Thylstrup, Daniela Agostinho, Annie Ring, Catherine D’Ignazio and Kristin Veel, eds., Uncertain Archives (Cambridge, MA: MIT Press, 2021).
• Daniel Shiffman，“使用數據 - p5.js 教程”，編碼火車（10.1、10.4 - 10.10），https://www.youtube.com/playlist?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r 。
  Daniel Shiffman, “Working with data - p5.js Tutorial,” The Coding Train (10.1, 10.4 - 10.10), https://www.youtube.com/playlist?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r.
• Eric Snodgrass 和 Winnie Soon，“API 實踐和範式：探索 API 的協議參數做為社會技術交流形式的關鍵促進因素”，第一個星期一 24 日，第 2 期（2019 年），https://doi.org/10.5210/ fm.v24i2.9553。
  Eric Snodgrass and Winnie Soon, “API practices and paradigms: Exploring the protocological parameters of APIs as key facilitators of sociotechnical forms of exchange],” First Monday 24, no.2 (2019), https://doi.org/10.5210/fm.v24i2.9553.

Further reading 進一步閱讀

• 喬納森·奧爾布賴特，“圖譜 API：Facebook 和劍橋分析崩潰中的關鍵點”，Medium（2018 年），https://medium.com/tow-center/the-graph-api-key-points-in-the-facebook-and-cambridge-analytica-debacle-b69fe692d747 。
  Jonathan Albright, “The Graph API: Key Points in the Facebook and Cambridge Analytica Debacle,” Medium (2018), https://medium.com/tow-center/the-graph-api-key-points-in-the-facebook-and-cambridge-analytica-debacle-b69fe692d747.
• Taina Bucher，“強烈感覺的對象：Twitter API 的案例”，《計算文化》，11 月 27 日（2013 年），http://computationalculture.net/article/objects-of-intense-feeling-the-case-of-the-twitter-api 。
  Taina Bucher, “Objects of intense feeling: The case of the Twitter API,” in Computational Culture, Nov 27 (2013), http://computationalculture.net/article/objects-of-intense-feeling-the-case-of-the-twitter-api.
• Christoph Raetzsch、Gabriel Pereira 和 Lasse S. Vestergaard，“用數據編織接縫：將城市 API 概念化為基礎設施的元素”，大數據與社會，1 月（2019 年），https://journals.sagepub.com/doi/full/10.1177/2053951719827619 。
  Christoph Raetzsch, Gabriel Pereira, and Lasse S. Vestergaard, “Weaving Seams with Data: Conceptualizing City APIs as Elements of Infrastructures,” Big Data & Society, Jan (2019), https://journals.sagepub.com/doi/full/10.1177/2053951719827619.

Notes 筆記