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

week 13. Project 2 demo & particle systems

1. Mandala Project Demo


2. simple particle system

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

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

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

week 10. using recursion for Sacred Geometry

float radius;
int segment = 6;
float centerX;
float centerY;
int recursionLevel = 3;

void setup(){
 size(600,600);
 background(0);
 stroke(255);
 centerX = height/2;
 centerY = width/2;
}

void draw(){
  background(0);
  radius = dist(centerX, centerY, mouseX, mouseY);
  spiral(centerX,centerY,radius,segment, recursionLevel);
}
void spiral(float x_c,float y_c, float r, int seg,int level){
  level -= 1;
  noFill();
  ellipse(x_c,y_c,2*r,2*r);
    for(int i =0;i < seg; i++){
      float x = x_c+cos(i*2*PI/seg)*r; 
      float y = y_c+sin(i*2*PI/seg)*r;
      point(x,y); 
      ellipse(x,y,2*r,2*r);
    
      if(level > 0){
      spiral(x,y,r,seg, level);
      }
    }
}


example 2:

float radius; int segment = 6; float centerX; float centerY;
int recursionLevel = 3;

void setup(){
size(600,600);
background(0);
stroke(255);
centerX = height/2;
centerY = width/2;
}

void draw(){
background(0);
// radius = dist(centerX, centerY, mouseX, mouseY);
radius = 50;

pushMatrix();
translate(centerX-100, centerY);
rotate(frameCount / 50.0);
spiral(0,0,radius,segment, recursionLevel);
popMatrix();

}
void spiral(float x_c,float y_c, float r, int seg,int level){
level -= 1;
noFill();
ellipse(x_c,y_c,2*r,2*r);
for(int i =0;i < seg;i++)
{ 
float x = x_c+cos(i*2*PI/seg)*r;
float y = y_c+sin(i*2*PI/seg)*r;
point(x,y);
ellipse(x,y,2*r,2*r);

if(level>0){
spiral(x,y,r,seg, level);
}
}
}

example 3:

float radius;

int segment = 6;

float centerX;

float centerY;

int recursionLevel = 3;

void setup(){

size(600,600);

background(0);

stroke(255);

centerX = height/2;

centerY = width/2;

}

void draw(){

background(0);

// radius = dist(centerX, centerY, mouseX, mouseY);

radius = 50;

pushMatrix();

translate(centerX, centerY);

rotate(frameCount / 50.0);

spiral(0,0,radius,segment, recursionLevel);

popMatrix();

}

void spiral(float x_c,float y_c, float r, int seg,int level){

level -= 1;

noFill();

//ellipse(x_c,y_c,r*2,r*2);

for(int i =0;i < seg;i++)

{

float x = x_c+cos(i*2*PI/seg)*r;

float y = y_c+sin(i*2*PI/seg)*r;

//point(x,y);

float r1= 2*r*map(sin(frameCount/50.0+i*PI/6.0), -1.0, 1.0, 0.01, 4.0);

ellipse(x,y,r1,r1);

if(level>0){

spiral(x,y,r,seg, level);

}

}

}

References:

The Illusions of Reality & The Basics of Sacred Geometry (The Patterns of Consciousness) 

https://www.youtube.com/watch?v=zoqTNpok6zw

project 2:

draw mandala or Sacred Geometry (tree of life)

4 compositions representing earth, water, fire, wind, (4 elements)
deadline  12/17, 2021

week 9. using sine

(時間往復變化) 

practice:

  用sine 控制一個物件之 

    (1) 大小  scale  (https://processing.org/examples/sine.html)

    (2) 位置  translation  (https://processing.org/examples/sinecosine.html)

    (3) 旋轉(自轉與他轉)  rotation

(空間切割) sample codes:

float radius;
int segment = 10;
float centerX;
float centerY;

void setup(){
 size(600,600);
 background(0);
 stroke(255);
 centerX = height/2;
 centerY = width/2;
}

void draw(){
  background(0);
  radius = dist(centerX, centerY, mouseX, mouseY);
  spiral(centerX,centerY,radius,segment);
}
void spiral(float x_c,float y_c, float r, int seg){
    for(int i =0;i<=seg;i++){
      float x = x_c+cos(i*2*PI/seg)*r;  //算出x的位置
      float y = y_c+sin(i*2*PI/seg)*r;  //算出y的位置
      point(x,y);  // 畫出點，也能用其他形狀
    }
}

( 空間切割範例)
https://processing.org/examples/star.html

using map

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

example :

void setup() {

size(800, 600);

noFill();

stroke(255, 255, 255);

}

void draw() {

float d;

background(0);

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

pushMatrix();

translate(i, 0);

rotate(map(sin((i/40.0+frameCount)/30.0), -1.0, 1.0, -PI/4, PI/4));

line(0, 0, 0, 350);

translate(0, 350);

ellipse(0, 0, 50, 50);

popMatrix();

}

}

EX:
1. 每次點擊滑鼠，劃一個隨機半徑大小的圓。
2. draw flower of life (生命之花)

reference:

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

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

John Whitney
https://www.youtube.com/watch?v=kzniaKxMr2g

Processing Tutorial Sin & Cos

https://www.youtube.com/watch?v=ehT7d9JPulQ

week 7. 3D primitives and array

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/

week 6. 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/

week 5. basic form and rotation

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


}

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

T

Control

Iteration

Embedded Iteration

Conditionals 1

Conditionals 2

Logical Operators

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: Nov. 5, 2021

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

Coordinates

Width and Height

Setup and Draw

No Loop

Loop

Redraw

Functions

Recursion

Homework:

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

Computer Artists in Database of Digital Art

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

 

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