小編精選 - 技術文章翻譯 · 08月07日

創意程式設計：我們來用程式碼畫畫吧？

誰認為電腦生成藝術的討論是從 AI 工具普及後才開始的，大概已經錯過了上個世紀就已經出現的大量關於生成藝術、電腦藝術與參數化設計的討論。本文要進一步理解的「創意程式設計」，是透過演算法生成藝術的其中一種方式，遠遠不只是丟一個提示詞給 AI，然後等待作品被生成。它是一種逐行構築的創作方式，程式設計師把電腦螢幕與程式碼行當作自己的畫布與畫筆。跟著我一起來了解，如何運用你的開發技能來玩得開心、盡情實驗，並讓創意自由奔放。

黑色背景與白色粒子的粒子風格動畫

什麼是創意程式設計？

我在深入研究 creative coding（創意程式設計的英文術語）時，聽到最酷的一件事是：有很多人會寫程式，但不一定是「程式設計師」。程式不必只被職涯綁住，它也可以是一種熱情、一個嗜好，或是一座有趣的遊樂場。

創意程式設計正是如此：使用程式碼來繪圖、製作動畫，並和電腦「玩」在一起。這裡的重點不是只做系統或資料分析，而是視覺上的探索。

帶有半色調風格效果的雕像胸像圖片

你能相信上面這張圖片是用 0 行 Java 程式碼生成的嗎？接下來我會更詳細地說明 Processing 與其他創意程式設計工具。

Processing 與 p5.js：讓繪圖遇上演算法

Processing 和 p5.js 是兩種最受歡迎的工具，專為幫助藝術家、插畫家、設計師，以及一般不具程式背景的人，也能用程式來創作藝術。

它們的核心邏輯相同，差別只在各自語法的細節。

Processing：建立於 2001 年，基於 Java，是這一切的「始祖」。它是一款免費軟體，以 IDE 的形式提供，你可以在裡面撰寫、執行與編譯程式碼，或者更精確地說，你的作品（這裡稱為 sketches，草圖）。
p5.js：是基於 JavaScript 的 Processing 版本，目前更普及，並且設計成可直接在網頁上執行。

現在也可以使用基於 Python 的 Processing 模式，或用來開發 Android 應用程式。最重要的是理解：當你在 Photoshop 裡是用滑鼠繪圖時，在這裡你是透過在空白頁面上輸入程式碼來開始創作。

程式碼的基本結構（給已經會寫程式的人也能懂）

和傳統腳本不同，這些工具的基本結構非常簡單而且直觀：

setup()：程式啟動後只會執行一次的函式。你會在這裡設定作品的重要參數，例如「畫布」的大小。
draw()：魔法發生的地方。這個函式是一個無限迴圈，只要程式在執行，它就會持續循環讀取。如果你在這裡繪圖，就能製作動畫，或回應事件，例如滑鼠移動。

有了這個結構之後，就很值得去查閱文件，了解這些工具能創造出無數種形狀、字體元素、動畫等等。下面這段程式碼，就是在文章開頭那張圖片的來源。

void draw(){
  background(255);
  fill(0);
  noStroke();

  float tiles = mouseX/10;
  float tileSize = width/tiles;

  translate(tileSize/2,tileSize/2);

  for(int x = 0; x < tiles; x++){
    for(int y = 0; y < tiles; y++){

      //Picks the color based on the pixel, in which the pixel is the size of the tiles
      color c = img.get(int(x*tileSize),int(y*tileSize));
      float size = map(brightness(c),255,0,0,20);

      ellipse(x*tileSize,y*tileSize,size,size);
    };
  };
}