2025年10月10日星期五

week 7. 3D primitives and array

Project 1 demo

size(640, 360, P3D); 
background(0);
lights();

noStroke();
pushMatrix();
translate(130, height/2, 0);
rotateY(1.25);
rotateX(-0.4);
box(100);
popMatrix();

noFill();
stroke(255);
pushMatrix();
translate(500, height*0.35, -200);
sphere(280);
popMatrix();

example2:

int gridSize = 50;
void setup(){
  size(640,360,P3D);
  
  fill(204, 204, 10);
}  
  
  
void draw() {  
  background(0);
  lights();
for (int i = 0+gridSize/2; i< width; i += gridSize)
  for (int j = 0+gridSize/2; j< height; j+= gridSize)
  {
    pushMatrix();
    translate(i, j, 0);
 //   rotateY(frameCount/5);
    rotateX(frameCount/7);
    noStroke();
    box(20);
    popMatrix();
  }
}

Example3, cube rotation + 2D array

float[][] rotateRates;


int gridSize = 50;
void setup(){
  size(640,360,P3D);
  rotateRates = new float[width][height];
  
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
    
      rotateRates[x][y] = random(2.0, 40.0);
    }
  }
  fill(204, 204, 10);
}  
  
  
void draw() {  
  background(0);
  lights();
for (int i = 0+gridSize/2; i< width; i += gridSize)
  for (int j = 0+gridSize/2; j< height; j+= gridSize)
  {
    pushMatrix();
    translate(i, j, 0);
 //   rotateY(frameCount/5);
 //   rotateX(frameCount/7);
    rotateX(frameCount/rotateRates[i][j]);
    noStroke();
    box(20);
    popMatrix();
  }
}

Examples 4:

float[][] rotateRates;


int gridSize = 50;
void setup(){
  size(640,360,P3D);
  rotateRates = new float[width][height];
  
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
    
      rotateRates[x][y] = random(5.0, 40.0);
    }
  }
  fill(204, 204, 10);
}  
  
  
void draw() {  
  background(0);
  lights();
for (int i = 0+gridSize/2; i< width; i += gridSize)
  for (int j = 0+gridSize/2; j< height; j+= gridSize)
  {
    pushMatrix();
    translate(i, j, sin(frameCount/20.0)*20.0);
 //   rotateY(frameCount/5);
 //   rotateX(frameCount/7);
    rotateX(frameCount/rotateRates[i][j]);
    noStroke();
    box(20);
    popMatrix();
  }
}

example 5: using sin

float[][] rotateRates;


int gridSize = 50;
void setup(){
  size(640,360,P3D);
  rotateRates = new float[width][height];
  
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
    
      rotateRates[x][y] = random(5.0, 40.0);
    }
  }
  fill(204, 204, 10);
}  
  
  
void draw() {  
  background(0);
  lights();
for (int i = 0+gridSize/2; i< width; i += gridSize)
  for (int j = 0+gridSize/2; j< height; j+= gridSize)
  {
    pushMatrix();
    translate(i, j, sin((frameCount/10.0)%width+i)*50.0);
 //   rotateY(frameCount/5);
 //   rotateX(frameCount/7);
    rotateX(frameCount/rotateRates[i][j]);
    noStroke();
    box(20);
    popMatrix();
  }
}

References:

https://processing.org/tutorials/p3d/

2025年9月28日星期日

week 5. 2D array & transform

Transform

Translate

Scale

Rotate

review:
draw a rotating shape in the center of screen.

also use 'scale()' to change the size of the object.

using pushMatrix() and popMatrix()

using cos();

參考:
https://processing.org/examples/array2d.html

用 2D array 設定每個元素的顏色，旋轉速度，屬性。

float[][] distances;
float[][] rotateAngles;
float[][] rotateRates;
float maxDistance;
int spacer;

void setup() {
size(640, 360);
maxDistance = dist(width/2, height/2, width, height);
distances = new float[width][height];
rotateAngles = new float[width][height];
rotateRates = new float[width][height];
for (int y = 0; y < height; y++) {
for (int x = 0; x < width; x++) {
float distance = dist(width/2, height/2, x, y);
distances[x][y] = distance/maxDistance * 255;
rotateAngles[x][y] = random(5.0);
rotateRates[x][y] = random(5.0, 40.0);
}
}
spacer = 30;
strokeWeight(3);
//noLoop(); // Run once and stop
}

void draw() {
background(0);
// This embedded loop skips over values in the arrays based on
// the spacer variable, so there are more values in the array
// than are drawn here. Change the value of the spacer variable
// to change the density of the points
for (int y = 0; y < height; y += spacer) {
for (int x = 0; x < width; x += spacer) {
pushMatrix();
translate(x, y);
rotate(frameCount/rotateRates[x][y]+rotateAngles[x][y]);
rect(-spacer/2, -spacer/2, spacer, spacer);
stroke(distances[x][y]);
popMatrix();
}
}
}

transform example:

void setup(){

size(800, 600);

noFill();

stroke(255);

}

void draw() {

background(30);

pushMatrix();

translate(600, 400);

scale(cos(frameCount/60.0)*5.0);

rotate(frameCount/30.0);

rect(-32, -32, 64, 64);

popMatrix();

}

Practice:

Create an array of 3D shapes.

https://processing.org/tutorials/p3d/

Project 1:
1. 選定一位(或多位)美學運算的藝術家
2. 與AI 對話分析作品美學特質
3. 用 processing 編碼產生方陣重複美學的作品 (自行加入變化)，至少5件

4. 截圖以上成果，製作成 pptx

5. pptx 與原始碼，上傳到 google drive

6. 繳交日現場 demo

上傳到google drive (網址在 FB 公布)

Deadline: 10/17, 2025

2025年9月20日星期六

week 4. structural programming & basic form

Global variables v.s. local variables
subroutine calls

https://collections.vam.ac.uk/item/O154610/p-197-print-mohr-manfred/

Manfred Mohr on Openprocessing

Manfred Mohr on DADA

https://www.atariarchives.org/artist/sec15.php#google_vignette

William Kolomyjec on Openprocessing

William Kolomyjec on DADA

Computer Graphics & Art, 1977

The Recode Project (目前掛站)

all translations in Recode project (目前掛站)

Untitled 1 (see code translation & experimental)

compArt daDA: the database Digital Art

Georg Nees on Openprocessing

the

Control

Cybernetic Serendipity (1968): A Walkthrough With Jasia Reichardt

(模控巧遇)

EX:
use subroutine call to perform 10 x 10 element-drawing.

1. form: point, line, polygon, arc, eclipse, rect,...
2. noLoop(); / redraw();

void setup(){
size(640, 360);
background(0);
}

int gridSize = 40;

void draw() {
background(0);
stroke(200);
noFill();
for (int x = gridSize; x <= width - gridSize; x += gridSize) {
for (int y = gridSize; y <= height - gridSize; y += gridSize) {

rotateShape(x, y);

}
}

}

void rotateShape(int xloc, int yloc) {
pushMatrix();
translate(xloc, yloc);
// rotate((frameCount / 8.0)+xloc+yloc+mouseX);
rotate((mouseX/100)*frameCount / 8.0+xloc+yloc);
rect(-10, -10, 20, 20);
line(-10, -10, 10, 10);
popMatrix();

}

References:
https://processing.org/examples/star.html

example #2:

void setup(){
size(640, 360);
background(0);
}

int gridSize = 40;

void draw() {
background(0);
stroke(200);
noFill();
for (int x = gridSize; x <= width - gridSize; x += gridSize) {
for (int y = gridSize; y <= height - gridSize; y += gridSize) {

rotateShape(x, y);

}
}

}

void rotateShape(int xloc, int yloc) {
pushMatrix();
translate(xloc, yloc);
rotate((frameCount / 8.0)+xloc+yloc);
//rotate((mouseX/100)*frameCount / 8.0+xloc+yloc);
beginShape();
vertex(-10, -10);
vertex(0, -10);
vertex(0, 0);
vertex(10, 0);
vertex(10, 10);
vertex(-10, 10);
endShape(CLOSE);
//rect(-10, -10, 20, 20);
// line(-10, -10, 10, 10);
popMatrix();

}

example #3:

int gridSize = 100;

void setup() {

size(1000, 1000);

stroke(255);

background(0);

frameRate(10);

}

void draw() {

background(0);

for (int i = 0; i <= width; i+= gridSize) {

for (int j = 0; j <= height; j+= gridSize) {

rect(i+gridSize/2 + random (40), j+gridSize/2, gridSize/4, gridSize/4);

}

example #4:

int gridSize = 100;

void setup() {

size(1000, 1000);

stroke(255);

background(0);

frameRate(5);

noFill();

}

void draw() {

background(0);

for (int i = 0; i <= width; i+= gridSize) {

for (int j = 0; j <= height; j+= gridSize) {

drawGrid(i, j);

}

void drawGrid(int x, int y){

int cellSize;

for (int i = 0; i < 5; i++) {

cellSize = (int) random(20, 60);

rect(x+gridSize/2-cellSize/2, y+gridSize/2-cellSize/2, cellSize , cellSize, 6);

}

2025年9月17日星期三

week 3. repeat

參觀"何理互動"作品展

Jacquard loom (1801)

charles babbage analytical engine

Arktura Ricami Stool

OP ART

Bridget Riley

Yaacov Agam

Richard Anuszkiewicz

Jesus Rafael Soto

Victor Vasarely

Martin Wattenberg, Shape of Song, 2002

http://turbulence.org/Works/song/method/method.html

Turbulence.org Commission: "The Shape of Song" by Martin Wattenberg v1 (2001) from Turbulence.org on Vimeo.

Modell 5 - Granular Synthesis

PSC 31, Mark Wilson

Frieder Nake

http://dada.compart-bremen.de/item/agent/68

Vera Molnar

https://www.surfacemag.com/articles/vera-molnar-in-thinking-machines-at-moma/

https://www.openprocessing.org/browse/?q=Vera+Molnar&time=anytime&type=all#

Manfred Mohr

https://www.emohr.com/

CODE Tutorials:

Structure

Statements and Comments

Homework:

1. 找一位 code artist 的作品，參考:

Computer Artists in Database of Digital Art

2. 搜尋這位 artist 的所有相關作品

3. 如何以手繪，以及 code 來重現?

2025年9月7日星期日

week 2. form and computer

Ivan Sutherland (1963), Sketchpad

Morisawa Posters, John Maeda, 1996

Electronic abstraction, Ben Laposky, 1952.

Entramado , Pablo Valbuena, 2008

Volume, by United Visual Artists, 2006

Cirrus 2008, Zaha Hadid

Repeat

0. 藝術新浪潮：當代數位媒體藝術，公視
1. ACG at MIT Media Lab.
Aesthetic and computation Concept video
Linz 電子藝術節

ZKM

ISEA proceedings

ISAT (台灣科技藝術)

2. for-loop
if

FORM+CODE examples

Ex: Draw 10x10 (or 11X16) basic elements with some repetition

2025年8月25日星期一

week 1. introduction

Aesthetic Computing: A Brief Tutorial
An Introduction to Aesthetic Computing by Paul Fishwick
conceptual art

computational aesthetics ?
https://www.britannica.com/topic/computational-aesthetics

計算美學：利用數學公式、演算法與統計方法來分析和評估藝術、影像、音樂等創作中的「美」，目的是讓電腦能像專家一樣進行美感判斷，並加深我們對人類審美感知的理解。

計算美學概要

1. 歷史背景
計算美學的理論基礎可追溯至 1928 年伯克霍夫提出的美感公式 M = O/C（美感 = 秩序/複雜度）。1950 年代，本塞與莫勒結合資訊理論創建「資訊美學」，並影響早期電腦生成藝術。1970 年代，心理學家柏林推動「新實驗美學」，將測量物件特徵與觀者感知結合。1990 年代初，國際數學與計算美學學會（IS-MCA）成立，推動計算美學成為跨越科學與藝術的重要研究領域。

2. 實際應用
計算美學被廣泛應用於影像與藝術品評估、攝影與影片品質檢測、產品與汽車設計等，並輔助人類專家進行判斷。其目標是開發能自主進行美感分析與創作的系統，甚至提出新穎觀點與生成超越人類想像的藝術。然而，目前仍難以確定這些技術是否真正揭示了人類大腦的美感運作機制。

3. 相關領域
計算美學是人工智慧（AI）的重要子領域，並與數學、心理學、設計與哲學等領域緊密相關。它與**計算創造力（Computational Creativity）**關係密切，後者專注於探索機器的創造力表現；兩者皆不必依賴人工意識即可運作。這些研究不僅推動AI藝術創作，也為理解人類審美提供新的視角。

FORM + CODE

設計、藝術和建築中的FORM+CODE：如演算般優雅，用寫程式的方式創造設計的無限可能

參考書目：

1. 數位藝術槪論 : 電腦時代之美學、創作及藝術環境，葉謹睿

2. 數位「美」學? : 電腦時代的藝術創作及文化潮流剖析，葉謹睿

3. 認識媒體 : 人的延伸 / 麥克魯漢

New Media Art (2006)

Mark Tribe & Reena Jana

1. 早期抽象與光學藝術（1860s–1930s）

Wassily Kandinsky (1866–1944)

貢獻：抽象藝術先驅，強調色彩與幾何形狀的程式化美感啟發後世程式藝術。

代表作：Composition VIII、Several Circles

Victor Vasarely (1906–1997)

貢獻：光學藝術（Op Art）大師，使用幾何圖形與規則演算法創作視覺錯覺藝術。

代表作：Zebra、Vega-Nor

Sol Lewitt (1928–2004)

貢獻：觀念藝術先驅，雖不直接編程，但他的「指令式藝術」對程式藝術有深遠影響。

代表作：Wall Drawings（程式邏輯化藝術）

杜象噴泉 (1917)

Sol Lewitt

想法優先於結果「當一名藝術家使用觀念藝術的形式，這就意味著所有的規劃和決策都是事先做好的，而執行只是一個表面的問題。想法成為創作藝術的機器。」

小野洋子

生成式AI (Vibe Coding)

指令藝術的定義?

concept art -> Sol Lewitt -> 小野洋子 -> John Maeda (Casey Reas, Golan Levin)->Vibe Coding ->?

2.電子與早期程式生成藝術（1930s–1960s）：

code artists:
Ben Laposky, 1914-2000

貢獻：電子程式藝術先驅，使用電子振盪器創作「Oscillons」電子圖形。

代表作：Oscillons 系列

John Whitney Sr., 1918-1995

貢獻：早期電腦動畫先驅，將機械與數學結構應用於電影動畫。

代表作：Catalog、Arabesque

Herbert W. Franke, 1927-

貢獻：電子藝術與程式生成圖像先驅，結合科學、數學與藝術。

代表作：Computer Art Exhibition、Generative Graphics

Lillian Schwartz, 1927-

貢獻：計算機藝術先驅，探索影像處理與數位媒體藝術。

代表作：Pixillation、Computer-Generated Film Experiments

Roman Verostko, 1929- 2024

貢獻：程式生成書法藝術家，結合演算法與手工書寫。

代表作：Algorist Paintings、Plotter Drawings

Harold Cohen, 1928-

貢獻：AARON 系統開發者，人工智慧繪畫系統先驅，探索電腦自主創作的可能性。

代表作：AARON 系列作品

Manfred Mohr (1938-)

貢獻：歐洲抽象藝術與演算法藝術開拓者，將立方體結構轉換為程式生成影像。

代表作：Cubic Limit 系列

3. 抽象演算法與互動藝術興起（1960s–1980s）
Frieder Nake 1938-
貢獻：電腦藝術先驅，1960 年代利用程式生成抽象圖像，是最早期結合數學與藝術的學者之一。
代表作：Matrix Multiplications

George Legrady, 1950-

貢獻：互動藝術與資訊可視化藝術家，將程式與感測器技術結合。
代表作：Pockets Full of Memories、Varieties of Visual Experience

Vera Molnár 1924-2023

貢獻：早期女性電腦藝術家，1960 年代開始以電腦程式生成極簡抽象藝術。

代表作：Transformations, Interruptions

Mark Napier, 1961-

貢獻：網路藝術家，探索網頁與程式生成的藝術創作。

代表作：Shredder、Digital Oracles

John F. Simon Jr., 1963-

貢獻：程式生成藝術與互動藝術家，強調數據與算法的創造力。

代表作：Every Icon、Sound Objects

Mary Flanagan, 1969-

貢獻：互動與遊戲藝術家，將遊戲與數位藝術結合，強調玩家體驗。

代表作：Gamestories、The Mine

4. Generative 與程式互動藝術發展（1970s–1990s出生）

John Maeda, 1966-

貢獻：MIT Media Lab 前教授，推廣「Design + Technology + Art」融合，著有《Design by Numbers》。

代表作：Reactive Books、算法設計裝置

Casey Reas, 1970-

貢獻：Processing 語言共同創辦人，著重演算法藝術和生成系統設計。

代表作：Software Structures（致敬索爾·勒維特的概念藝術）

Golan Levin (1972–)

貢獻：互動媒體與實時視覺藝術的領軍人物。

代表作：Interactive Installations、Terrapattern

Jared Tarbell, 1973-

貢獻：Generative Art 與程式藝術家，專注於數學演算法與視覺藝術的結合。

代表作：Substrate、Antic Web

Ben Fry, 1975-

貢獻：Processing 語言共同創辦人，將資料視覺化（Data Visualization）與程式美學結合，推動「創意編程」教育。

代表作：Genome Valence、Visualizing Data

LIA (1976–)

貢獻：奧地利藝術家，以程式生成的視覺作品聞名。

代表作：Generative Art、抽象動畫

Zach Lieberman (1977–)

貢獻：互動程式藝術家，擅長人體感應與視覺表現。

代表作：EyeWriter、OpenFrameworks作品

Rafaël Rozendaal (1980–)

貢獻：網路藝術家，專注於互動式網頁藝術。

代表作：www.muchbetterthanthis.com、

www.ifnoyou.com

Memo Akten (1985–)

貢獻：互動程式藝術家，結合人工智慧、聲音與視覺藝術。

代表作：Learning to See、Forms

重點：

1. 早期抽象與光學藝術（1860s–1930s）

代表人物：Wassily Kandinsky (1866–1944)、Victor Vasarely (1906–1997)
重點：
- 探索抽象與幾何形式美感
- 透過規則、比例與色彩創造視覺效果
- 為後來程式生成藝術提供概念基礎

2. 電子與早期程式生成藝術（1930s–1960s）

代表人物：Ben Laposky (1914–2000)、John Whitney Sr. (1918–1995)、Herbert W. Franke (1927–)、Lillian Schwartz (1927–)、Roman Verostko (1929–)
重點：
- 利用電子振盪器、電腦與繪圖機創作視覺作品
- 將數學與算法直接應用於藝術
- 開創「Algorist」與電腦生成圖像概念

3. 抽象演算法與互動藝術興起（1960s–1980s）

代表人物：Manfred Mohr (1938–)、George Legrady (1950–)、Mark Napier (1961–)、John F. Simon Jr. (1963–)、Mary Flanagan (1969–)
重點：
- 抽象藝術與演算法結合
- 開始探索互動、網路與資料視覺化
- 將觀眾行為納入作品體驗

4. Generative 與程式互動藝術發展（1970s–1990s出生）

代表人物：Casey Reas (1972–)、Golan Levin (1972–)、Jared Tarbell (1973–)、Ben Fry (1975–)、LIA (1976–)、Zach Lieberman (1977–)、Rafaël Rozendaal (1980–)、Memo Akten (1985–)
重點：
- Generative Art 與 Processing 語言興起
- 網頁、互動裝置與 AI 成為重要創作媒材
- 強調程式與觀眾、環境、數據的即時互動