用程式來畫圖 Processing入門

程式設計與動態影音圖像
用程式來畫圖—Processing入門
Draw by code: Processing
講師：李炳曄
開源程式互動
文化設計圖形
課程說明
程式設計與新媒體藝術
隨著科技與環境的蛻變，科技與藝術以
更多元的形式結合，也演化出衍生性
(Generative)、互動性(Interactivity)、
流動性(Fluidity)等特質，突破過去藝術
形式的疆界，打造出新形式的身體與影
音經驗。
李炳曄/時間之花：對應宇宙/2018/無接縫環形投影、
機械裝置/直徑12.2公尺之圓形空間/國立台灣美術館
圖片來源：作者
課程說明
當代藝術以更多元混雜的樣貌出現，也反
映出當代社會資訊爆炸、多元媒介、即時
影音串流等現象與特質。程式設計(Coding)
在此趨勢下，成為藝術家/設計師與電腦溝
通的橋樑，也在近年來成為新媒體創作者
的重要工具。
李炳曄/靈魂曝光V2/2018/Processing /2018/Processing
動畫投影/250*445cm*3面/桃園科技藝術節
課程說明
Processing是一種開源(Open Source)
程式語言，於2001年由MIT媒體實驗室
的Casey Reas和Benjamin Fry發起，目
的在於提供藝術家/設計師一個更容易上
手的程式設計工具。近年來已廣為台灣
之新媒體藝術家所使用，包含沈聖博、
王新仁、王連晟…等。
王新仁/昨日的路徑/2018/Processing
演算音像/即時生成投影/台北數位藝術中心
圖片來源：王新仁
課程說明
此三週課程將引導各位同學以程式設計
(Coding)的方式創造圖形與聲音，藉由新媒
體藝術家/設計師常用的程式工具：
Processing，理解程式設計的基本概念，以
及它所能衍生的藝術表現、鑑賞與實踐。
Processing官網截圖
圖片來源：Processing官網
(一)開源程式設計：Processing
以程式為導向的藝術創作特性
1. 衍生性(Generative)
2. 時間性(Time-based)
3. 互動性(Interactive)
4. 跨領域性(Multi-disciplinary)
李炳曄/轉生樹：體感故事牆/2018/Processing、
Kinect、投影機/230*360cm/新竹241藝術空間
如何安裝Processing ?
(以操作示範)
Processing官網的Download連結
Processing學習資源介紹
(以操作示範)
Processing官網首頁
Processing作品範例(Exhibition)
(以操作示範)
Processing官網的Exhibition連結
(二)認識Processing的開發環境
Processing開發面板介紹
上方：工具列
中央：程式編輯器(Editor)
下方：訊息列(Console)
(以操作示範)
Processing操作介面
圖片來源：Processing介面截圖
(二)認識Processing的開發環境
Processing偏好設定
語言設定(建議設為：英文)
字體大小設定(建議設為：18號)
(以操作示範)
Processing  File  Preferences
(三)用Processing編碼畫出圖形
畫布(Sketch)的概念
如何存檔？
(以操作示範)
點擊Run，會出現畫布
(三)用Processing程式畫出圖形
畫布(Sketch)的座標
畫布最左上角為(0,0)，
畫布上的點座標可以用：(X,Y)來表示
X向右遞增、Y向下遞增
(以操作示範)
右圖：Processing的座標
Processing 直覺化的語法
為了讓藝術家/設計師更方便操作，
Processing以直覺化的語法著稱。
(以操作示範)
size( ) 語法
更改畫布大小
size(X,Y);
例如：size(400,400);
(以操作示範)
size( ) 語法，單位為：像素
更改背景色彩
background(R,G,B);
例如：background(255, 0, 255);
R、G、B的數值需在0255之間
(以操作示範)
background( ) 語法
畫圓形
ellipse(圓心位置X,圓心位置Y,寬,高);
例如： ellipse(200,200, 80, 80);
(以操作示範)
ellipse( ) 語法
畫方形
rect(起始位置X,起始位置Y,寬,高);
例如： rect(200,200, 80, 80);
(以操作示範)
rect( ) 語法
畫線
line(起始點X,起始點Y,終點X,終點Y);
例如： line(0, 0, 400, 400);
(以操作示範)
line( ) 語法
畫不規則矩形
quad(X1,Y1,X2,Y2,X3,Y3,X4,Y4);
例如：quad(50, 30, 150, 50, 200, 150, 80, 80);
(以操作示範)
quad() 語法是用四個點來連出一個不規則矩形
改變填色
fill(R,G,B);
例如：fill(50,50,255);
(以操作示範)
fill 寫在quad上面，才會更改quad的填色為藍色
改變筆刷顏色
stroke(R,G,B);
例如：stroke(255,255,255);
(以操作示範)
stroke 寫在quad上面，更改quad的邊線為白色
改變筆刷粗細度
strokeWeight(像素值);
例如：strokeWeight(10);
(以操作示範)
strokeWeight 可以改變筆刷粗細為10像素
(四) Processing編碼的前後順序
先寫=先畫；後寫=後畫
先做色彩與筆刷設定，再畫圖形
後畫的會蓋住先畫的
例如：右圖的圓最後畫，因此蓋住了矩形
(以操作示範)
(五) 自由練習
自由練習時間
若忘記語法的參數寫法，可以運用
滑鼠右鍵 Find in Reference
可連結到Processing官網的語法說明
(以操作示範)
(五) 自由練習
自由練習時間
試試看，
利用Processing語法
畫出多種線條與圖形！
記得儲存專案，
在下週的課程會用上喔！
Processing官網的Reference
讓圖形動起來—
Processing的變數、setup與draw
Move the shapes! The variables, setup and draw in Processing
講師：李炳曄
開源程式互動
文化設計圖形
(一) 變數Variables的基本概念
變數的種類、名稱與數值範圍
變數(Variables)被宣告後，就會存入電腦的記憶體，變數可以在程式中被多次應用，也可以
被改變。每個變數都包含三個部分：
名稱 (name) ：請選擇具有高辨識度的名稱，只能以英文、或英文+數字來命名。
數值 (value) ：阿拉伯數字
資料形態 (data type)：就是變數的種類，包含整數(int)、浮點數(float)、字串(String) …
(一) 變數Variables的基本概念
變數與新媒體藝術的互動性與衍生性
變數與新媒體藝術中的互動性、衍生性
息息相關，因為變數可以在程式中被重
新賦予數值、或是儲存感測器的即時數
據，藝術家利用變數，可以讓作品不斷
變換、衍生。
李炳曄/時間之花(時間數據視覺化)/2018/
Processing衍生動畫
(二) 練習宣告變數
宣告整數 (int)
int x =100;
宣告一個整數變數，名稱為x，附值 100。
(以操作示範)
Processing官網：int 說明
宣告浮點數 (float)
float y = 0.5;
宣告一個浮點數(帶有小數點的)變數，
名稱為y，附值 0.5。
(以操作示範)
Processing官網：float 說明
如何知道變數的數值？
println(x);
我們可以運用println( )語法，把變數列印
在下方的訊息列(Console)
(以操作示範)
(三) 將變數運用於繪製圖形
如何運用變數呢？
我們可以在任何的語法中帶入變數
例如：
int x =100;
line(0, 0, 400, 400);
line(x, 0, 400, 400);
(以操作示範)
把變數帶入畫圓形的語法中
以下程式可以畫出同心圓：
size(400, 400);
int x = 160;
int y = 200;
ellipse( x, y, 200, 200);
ellipse( x, y, 150, 150);
ellipse( x, y, 100,100);
試試看：在上週寫的程式中帶入變數
int x = 160;
int y = 200;
size(400, 400);
background(255, 0, 255);
fill(50, 250, 85);
stroke(10, 200, 255);
strokeWeight(20);
ellipse(x, y, 150, 150); //帶入x 與y 作為圓心位置
ellipse(x+50, y+50, 150, 150); //也可以增加數值
自由練習時間
試試看，利用變數，
畫出更豐富、有規則的圖形。
(四) Processing的setup和draw
Processing程式可以分為三部分：
(1) 變數宣告
(2) 設定 setup( )
(3) 迴圈式描繪 draw( )
(1) 變數宣告
int x = 100;
int y = 200;
(2) setup：只執行一次的程式
void setup(){
size(400,400); // 設定畫布為400 * 400 像素
}
(3) draw：不斷迴圈的程式
void draw() {
ellipse(x, y, 150, 150);
x= x+1;
}
Processing會從第一行執行到最後一行，
然後再回到第一行，
不斷的重複，直到程式被關閉。
(五) 運用變數讓圖形動起來
利用draw迴圈，讓變數增加/減少
int x = 100;
int y = 200;
void setup() {
size(400, 400);
}
void draw() {
ellipse(x, y, 150, 150);
x= x+1;
}
(五) 運用變數讓圖形動起來
如何觀察變數數值呢？
在程式中加入 println( ) 語法，

就可以即時觀察變數的變化。
(以操作示範)
(六) 內建變數mouseX、mouseY
設計屬於你自己的小畫家
void setup() {
size(600, 600);
}
void draw() {
ellipse(mouseX , mouseY,60,60);
}
(以操作示範)
運用mouseX、mouseY，在滑鼠所在的位置畫出圓形。
void setup() {
size(600, 600);
}
void draw() {
fill(mouseX/3, mouseY/3, mouseX/3);
strokeWeight(5);
stroke(mouseY/3, mouseX/3, mouseY/3);
}
(以操作示範)
void setup() {
size(600, 600);
}
void draw() {
//random能創造出隨機的數值
fill(random(255), 100, 255);
strokeWeight(5);
}
(以操作示範)
跟著滑鼠移動而變化的圖形
(七) 自由練習時間
自由練習時間
試試看，
利用自創變數、或是
內建變數mouseX、
mouseY，
畫出跟著滑鼠移動而
變化的圖形！
(八) 線上資源
Open Processing
作品平台
www.openprocessing.org/
圖片來源：OpenProcessing 網頁截圖
音像創作—Processing函式庫
Minim Library的應用
Audiovisual Creation: Using Minim Library in Processing
講師：李炳曄
開源程式互動
文化設計圖形
(一) Processing函式庫簡介
函式庫(Library)是Processing的延伸應用和語法
例如：PeasyCam(互動3D物件)、Image
Processing(互動式影像處理)、Minim(聲音與聲
音視覺化)。
(以操作示範)
(一) Processing函式庫簡介
每個Library都有範例(Example)可以供使用
File  Examples
例如：Image Processing  Blending

(二) 如何下載函式庫?
Minim函示庫下載
Sketch  Import Library  Add Library
鍵入 minim 搜尋
點選 install
等待下載完成，須重啟Processing
(以操作示範)
(三)與音樂一起跳動的動態圖形
使用SoundEnergyBeatDetection範例
File  Examples  Contributed Libraries

 Minim  Analysis
 FFT  SoundEnergyBeatDetection
先執行看看，是動態的圖形喔！
(以操作示範)
(四)換成自己想要的圖形
1. 找到隨著音樂變動的變數：eRadius
ellipse(width/2, height/2, eRadius, eRadius);
讓我們複習一下「變數」的概念。
試試看，若將eRadius改為固定數值(例如：100)
會發生甚麼事呢？
2. 讓我們複習一下各種圖形的畫法
例如：畫「線」
line(起始點X,起始點Y, 終點X, 終點Y);
(以操作示範)
3. 利用範例，改寫為自己想要的圖形
例如，改為畫出動態的「線」：
strokeWeight(20);
stroke(255);
line(width/2, height/2, width/2+eRadius, height/2);
(以操作示範)
3. 利用範例，改寫為自己想要的圖形
例如，改為畫出動態的「線」：
strokeWeight(40);
stroke(a, 50, 250);
line(width/2, height/2, width/2+eRadius*2, height/2);
line(width/2, height/2, width/2-eRadius*2, height/2);
(以操作示範)
4. 其他好用的語法
map ( ) 語法：
map(變數, 最低值, 最高值, 目標最低值, 目標最高值);
例如：map(eRadius, 20, 80, 60, 255);
可以將eRadius的數值，從20至80 換算為 60至255之間的數值，方

便我們在顏色參數中使用。
(以操作示範)
5. 其他好用的語法
if… else 判斷式：

if (判斷式) {
//執行式A
} else {
//執行式B
}
當判斷式為真的時候，才會運行執行式。
(以操作示範)
(五)換成自己喜歡的樂曲
1. 搜尋自己喜歡的音樂(.mp3)
可以到 freesound.org 註冊免費帳號，

找到自己喜歡的音檔並下載。
使用有創用CC標記：No Copyright的音樂
(以操作示範)
2. 拖曳進想要的音樂檔(.mp3)
Processing介面  Sketch  Show Sketch Folder
將音樂丟到data資料夾中、或是直接拖曳進來
(以操作示範)
3. 替換程式中的音樂檔名
例如：
將原來的編碼：
song = minim.loadFile("marcus_kellis_theme.mp3", 2048);
改為：
song = minim.loadFile("beatloop.mp3", 2048);
(以操作示範)
4. 讓音樂持續播放(loop)
例如：
將原來的編碼：
song.play();
改為：
song.loop();
(以操作示範)
(六)範例說明
運用Present輸出全螢幕作品
Processing介面  Sketch  Present
可以在Preference調整背景顏色
(以操作示範)
自由練習時間
試試看，
利用Processing語法
創作出屬於自己的動
態影音圖像吧！
(八) 延伸應用
Madmapper 光雕投影軟體
https://madmapper.com/
相關作品說明
(八) 延伸應用
P5.js
P5.js editor

用程式來畫圖 Processing入門

Uploaded by

Copyright:

Available Formats

You might also like

用程式來畫圖 Processing入門

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

用程式來畫圖 Processing入門

Uploaded by

Copyright:

Available Formats

程式設計與動態影音圖像

Processing  File  Preferences

例如： ellipse(200,200, 80, 80);

例如： rect(200,200, 80, 80);

例如： line(0, 0, 400, 400);

例如：quad(50, 30, 150, 50, 200, 150, 80, 80);

滑鼠右鍵 Find in Reference

(3) 迴圈式描繪 draw( )

在程式中加入 println( ) 語法，

例如：Image Processing  Blending

Sketch  Import Library  Add Library

File  Examples  Contributed Libraries

ellipse(width/2, height/2, eRadius, eRadius);

line(起始點X,起始點Y, 終點X, 終點Y);

例如：map(eRadius, 20, 80, 60, 255);

可以將eRadius的數值，從20至80 換算為 60至255之間的數值，方

if… else 判斷式：

可以到 freesound.org 註冊免費帳號，

Processing介面  Sketch  Show Sketch Folder

Processing介面  Sketch  Present

You might also like