2023年3月12日星期日

week 4. structural programming & basic form

Global variables v.s. local variables
subroutine calls

Manfred Mohr

William Kolomyjec

Computer Graphics & Art, 1977

The Recode Project

all translations in Recode project

Untitled 1 (see code translation & experimental)

Georg Nees

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);

}

Project 1:
1. 選定一位美學運算的藝術家
2. 手繪模仿其作品
3. 用 processing 編碼產生方陣重複美學的作品，至少5件
上傳到google drive (網址在 FB 公布)

Deadline: 3/28, 2023

2023年3月5日星期日

week 3. form and computer + repeat

Ivan Sutherland (1963), Sketchpad

Morisawa Posters, John Maeda, 1996

Electronic abstraction, Ben Laposky, 1952.

Entramado , Pablo Valbuena, 2008 (光雕藝術)

https://vimeo.com/pablovalbuena

Time tilings [stuk] from pablo valbuena on Vimeo.

Volume, by United Visual Artists, 2006

Cirrus 2008, Zaha Hadid

Repeat

1. ACG at MIT Media Lab.
Aesthetic and computation Concept video

2. for-loop
if

FORM+CODE examples

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

----------------------------------------------------------------------------------------

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 來重現?

2023年2月20日星期一

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

FORM + CODE

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

認識媒體

數位麥克魯漢

Wassily Kandinsky
Victor Vasarely
Sol Lewitt

code artists:
Ben Laposky, 1914-2000

John Whitney Sr., 1918-1995

Herbert W. Franke, 1927-

Lillian Schwartz, 1927-

Harold Cohen, 1928-

Roman Verostko, 1929-

George Legrady, 1950-

Mark Napier, 1961-

John F. Simon Jr., 1963-

John Maeda, 1966-

Mary Flanagan, 1969-

Casey Reas, 1970-

Jared Tarbell, 1973-

Ben Fry, 1975-

EX1: (2023/3/7)
Take photos of Computational Aesthetics in everyday life.

Grading:

平時作業 30%

期中作品 30%

期末作品 40%

2021年12月23日星期四

week 14. image

https://www.processing.org/examples/pointillism.html

https://www.processing.org/reference/PImage.html

https://processing.org/tutorials/pixels/

https://processing.org/examples/blur.html

EX:

load your own portrait

do image process

Final Project:
Self Portrait Demo:
最少三種
例如，Andy Warhol 風格，字型風格，拼貼風格，動態曼陀羅風格，...

Jan. 7, 2022

2021年12月16日星期四

week 13. Project 2 demo & particle systems

1. Mandala Project Demo

2. simple particle system

https://processing.org/examples/simpleparticlesystem.html

2021年12月9日星期四

week 12. Object-Oriented Programming

1. Mandala Project reference:
http://sciencefictioninterfaces.tumblr.com/

2. object oriented programming:
https://processing.org/tutorials/objects/
https://www.youtube.com/watch?v=YcbcfkLzgvs

3. simple particle system

https://processing.org/examples/simpleparticlesystem.html

EXercise:
draw 'array-like' object with OOP

reference:

https://processing.org/examples/arrayobjects.html

2021年12月2日星期四

week 11. drawing mandala

Basic sample 1:

float resolution;
float radius = 100;
float circleX;
float circleY;
float offset;

void setup() {
size(700, 700);
circleX = 0;
circleY = 0;
}

void draw() {
fill(0,0,0,25);
rect(0,0,width,height);
translate(width/2, height/2);
fill(255);
noStroke();
offset++;

resolution = map(sin(offset*0.005), -1, 1, 2, 20);
// resolution = 20;

for (int i = 0; i < resolution; i++) {
float angle = map(i, 0, resolution, 0, TWO_PI);
// float waveOffset = sin(angle*circles) * 200;

float circleOffsetX = cos(angle) * (radius); //xposition
float circleOffsetY = sin(angle) * (radius); //yposition
// float circleOffsetX = cos(angle) * (radius + waveOffset); //xposition
// float circleOffsetY = sin(angle) * (radius + waveOffset); //yposition

float x = circleX + circleOffsetX;
float y = circleY + circleOffsetY;

ellipse(x, y, 10, 10);

}
}

Sample 2:

float resolution;
float radius = 100;
float circleX;
float circleY;
float circles;
float circleW;
float circleH;
float offset;

void setup() {
size(700, 700);
circleX = 0;
circleY = 0;
}

void draw() {
fill(0,0,0,25);
rect(0,0,width,height);
translate(width/2, height/2);
fill(255);
noStroke();
offset++;

resolution = map(sin(offset*0.00025), -1, 1, 11, 13);
//resolution = 50;
circles = 400;

circleW = map(sin(offset*0.05), -1, 1, 1, 8);
circleH = map(sin(offset*0.05), -1, 1, 1, 8);

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

float scale = 200;

float waveAngle = map(i, 0, resolution, 0, TWO_PI * circles);
float waveOffset = sin(waveAngle) * scale; //scale the -1 to 1 up

float angle = map(i, 0, resolution, 0, TWO_PI * 156); //multiply for weirdness

float circleOffsetX = cos(angle) * (radius + waveOffset); //xposition
float circleOffsetY = sin(angle) * (radius + waveOffset); //yposition

float x = circleX + circleOffsetX;
float y = circleY + circleOffsetY;

ellipse(x, y, circleW, circleH);

}

}

example 3:

float resolution;
float radius = 100;
float circleX;
float circleY;
float circles;
float offset;

void setup() {
size(700, 700);
circleX = 0;
circleY = 0;
}

void draw() {
fill(0,0,0,25);
rect(0,0,width,height);
translate(width/2, height/2);
fill(255, 255, 0);
noStroke();
offset++;

resolution = map(cos(offset*0.0002), -1, 1, 2, 200);
circles = 100;

beginShape();
noFill();
for (int i = 0; i < resolution; i++) {

float scale = 400;

float waveAngle = map(i, 0, resolution, 0, TWO_PI * circles);
float waveOffset = sin(waveAngle) * scale; //scale the -1 to 1 up

float angle = map(i, 0, resolution, 0, TWO_PI * 156); //multiply for weirdness

float circleOffsetX = cos(angle) * (radius + waveOffset); //xposition
float circleOffsetY = sin(angle) * (radius + waveOffset); //yposition

float x = circleX + circleOffsetX;
float y = circleY + circleOffsetY;

stroke(255);
//line(x, y, 0, 0);
vertex(x,y);

}
endShape(CLOSE);

}

reference:
search "mandala" on
https://www.openprocessing.org/

also

https://aestheticcomputing2010.blogspot.com/2020/12/week-12-mandala-drawing-ii.html

訂閱：文章 (Atom)

aesthetic computing 美學運算

2023年3月12日星期日

week 4. structural programming & basic form

William Kolomyjec

Cybernetic Serendipity (1968): A Walkthrough With Jasia Reichardt

2023年3月5日星期日

week 3. form and computer + repeat

Volume, by United Visual Artists, 2006

Modell 5 - Granular Synthesis

2023年2月20日星期一

week 1. introduction

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

2021年12月23日星期四

week 14. image

2021年12月16日星期四

week 13. Project 2 demo & particle systems

2021年12月9日星期四

week 12. Object-Oriented Programming

2021年12月2日星期四

week 11. drawing mandala

NTUST aesthetic computing

2023年3月12日 星期日

Cybernetic Serendipity (1968): A Walkthrough With Jasia Reichardt

2023年3月5日 星期日

Volume, by United Visual Artists, 2006

Modell 5 - Granular Synthesis

2023年2月20日 星期一

2021年12月23日 星期四

2021年12月16日 星期四

2021年12月9日 星期四

2021年12月2日 星期四

2023年3月12日星期日

2023年3月5日星期日

2023年2月20日星期一

2021年12月23日星期四

2021年12月16日星期四

2021年12月9日星期四

2021年12月2日星期四