程式藝術創作免費資源，歡迎來到 Creative Coding 的世界！

想用程式創作藝術不一定要有基礎，本篇文章整理了網路上許多開源的資源網站，讓你在網頁上就能直接練習、尋找靈感！

對文章有興趣來不及看？點選右上角「橘色小書籤」收藏文章，再也不怕錯過就是一輩子！

本篇文章整理了許多與 Creative Coding 相關的資源與靈感，如果你也有想要推薦的資源與範例想要跟大家分享，歡迎告訴我們！

1. 我完全沒有程式經驗，該從哪裡開始呢？

Creative Coding 顧名思義是使用程式來進行創作，因此對於任一種程式語言具備基礎是最好的。而沒有學習程式經驗的朋友也不用擔心，現今有越來越多容易上手的程式出現，例如 Processing 就是專為藝術家和設計師開發的開放源碼程式語言，有相當多的公開資源能夠學習，也有能在網頁上運行、更方便學習的 JavaScript 版本 p5.js。

2. 我有一點程式基礎，要怎麼開始創作？

如果你已經具備一定的程式基礎，但是沒有創作經驗，可以先到相關社群中，依據各式各樣的作品類別，找尋自己希望發展的創作方向。

當然同樣推薦從 Processing (JAVA) 或是 p5.js (JavaScript) 開始嘗試，這些工具已經幫我們把常用的函式與 api 封裝好，讓我們可以馬上開始創作。

同時可以善用 OpenProcessing 平台，直接在網頁上撰寫程式碼。

▶ 用程式玩創作，讓小機器人動起來！哲宇的互動藝術體驗
對程式創作有興趣？你可以先看看哲宇老師的免費直播，體驗程式創作是什麼！

3. 我已經是程式藝術創作者囉！

如果你已經是程式藝術創作者，那就與高手切磋交流，一起挑戰更深入的技術吧！歡迎追蹤程式藝術家吳哲宇【老闆來點寇汀吧。 Boss,CODING please.】，看看別人怎麼把程式當作畫筆，揮灑創意與靈感！！

line-short

Creative Coding 程式創作資源總整理

1. 基礎、通用的技術

《互動藝術程式創作入門》課程筆記：認識程式與互動藝術產業應用，開啟對工程跟設計的想像，學會使用 p5.js 開發互動介面，整合繪圖、音訊、視訊、文字、3D、互動與創作完整的作品。
The Nature of Code ：分析自然界中的系統，並用計算機模擬的方式實現，使用 Processing。這邊也可以找到他的 Youtube 影片：The Nature of Code： Simulating Natural Systems with Processing。
LEARNING PROCESSING：由 Processing 的作者撰寫，從最基礎的程式開始，到完成互動程式設計、影像處理與資料視覺化。
Getting Started with p5.js：由 p5.js 的開發者與 Processing 的創辦人撰寫的 p5.js 教學。
Generative Design：從顏色、形狀、字型、圖像等不同的主題介紹生成式創作的基礎，使用 p5.js。
The Coding Train：由淺入深介紹 Creative Coding 的頻道，由 Daniel Shiffman 錄製，他同時也是 NYU Tisch School of the Arts 的教授。
bileam tschepe：超棒的 Touch Designer教學，從0開始講解的非常仔細，頻道中也有一些範例的拆解帶著做適合上手。
Creative Coding（NYUx’s Integrated Digital Media）
Creative Coding：NYU’s IDM program 的課程筆記。

Creative Coding 程式藝術

2. 常用的 Creative Coding 資源與工具

▶ 程式介面創作工具

Processing：專門為電子藝術和視覺互動設計而創建的程式語言（以 JAVA 為基礎），同時也提供完善的開發環境（IDE）與學習資源。
p5.js：Processing 的 JavaScript 版本對應套件，可以完整的使用 Processing 提供的函式。
openFrameworks：openFrameworks 是開源的 C++ 框架，提供創作者快速實現想法的環境，同時健全的第三方函式庫，可以快速在不同平台實現創作。
Cinder：Cinder 是基於 C++ 的開源函式庫，提供創意相關的開發者需要的工具，涵蓋影像、聲音、影片處理與電腦繪圖等領域。Cinder 比較可惜的是相較於 openFrameworks 中文相關的資源比較少。
GLSL / Shader ：Shader/ GLSL 是由GPU處理的繪圖語言，可以用來製作非常華麗，效能又非常好的特效，常見的3D互動應用跟一些視覺特效、AE PR等後面也都用到了GPU的資源，其中，如果要直接寫程式給你的繪圖卡執行，就必須用到 GLSL讓你藉由去定義像素等級的計算，來達成想要的視覺像果。

▶ 圖形界面創作工具

TouchDesigner：TD 同樣是一種圖形化的程式語言，與 Max 類似，創作者可以在畫面上建立並連結多個節點，以達成想要完成的特效。TD 常被運用在投影、虛擬實境、即時互動藝術裝置等領域，為業界目前最主流的互動視覺特效創作軟體。
Max/MSP/Jitter：Max 是一種圖形化的的程式語言，透過將不同的圖形化物件 (Object) 串連起來，可以創造各式各樣的資料處理流程。Max 被廣泛地運用在即時聲音互動、視覺呈現等表演藝術上。除了處理資料的 Max 之外，Max 也提供了處理即時音訊的 MSP （Max Signal Processing）模組以及處理即時影像的 Jitter 模組。
vvvv：vvvv 原本是德國 vvvv 集團為了互動展覽使用的內部工具，後來索性將此專案開源，強像是處理包含互動影音的大型媒體裝置。
PureData：Pd 是針對聲音合成與影像處理的圖形化開發環境，主要應用的領域是電子音樂創作和聲音合成。

▶ 實體裝置

Arduino：Arduino 是基於開源專案的開發板，可以在電路版上的端口接上多樣的感測器與互動裝置，輸入/輸出計算過後的訊號。Arduino 的特色是價錢較低廉，且應用範圍廣泛，是最常被運用於互動藝術創作的工具之一。
Raspberry Pi：Raspberry Pi（樹莓派）是一個體積非常小的電腦，相較於 Arduino 只能運作相對單純的應用程式，我們可以在 Pi 上運行作業系統，並執行更複雜的網頁伺服器、操作機器人等程式。除此之外，Pi 也內建了 USB、聲音與視訊的接口，讓功能的延伸更方便。

3. 更多學習資源

▶ 線上課程

動畫互動網頁程式入門 (HTML/CSS/JS)：從頭學習網頁程式開發的線上課程，包含從構思、設計到完成網站的過程分享，適合完全沒有經驗，但是想要學習程式與網站開發的人。
動畫互動網頁特效入門（JS/CANVAS）：動畫互動網頁程式入門的進階課程，進一步介紹使用 JavaScript 與 Canvas 繪製動畫、製作互動介面與遊戲。適合想要進一步精進網頁動畫，製作出完成度更高的作品的人。
互動藝術程式創作入門（Creative Coding）認識程式與互動藝術產業應用，開啟對工程跟設計的想像。學會使用 p5.js 開發互動介面，整合繪圖、音訊、視訊、文字、3D創作，應用在個人品牌或網站、主視覺海報、互動裝置、遊戲與教材製作等場景，讓你對進修的資源與路線更有方向。
Red Stapler：介紹網頁特效為主的 Youtube 頻道，以 CSS、THREE.js 等範例為主。