2023年3月25日 星期六

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

2023年3月19日 星期日

week 5. 2D array & transform


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();
}
---------------------Step by step 2D rect variation---------------------
example 1:
float[][] xDiv;
int gridSize = 40;
void setup() {
size(640, 360);
int x, y;
x = width/gridSize;
y = height/gridSize;
xDiv = new float[x][y];
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
xDiv[i][j] = random(gridSize/2.0);
}
}
}
void draw() {
int x, y;
x = width/gridSize;
y = height/gridSize;
background(0);
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
pushMatrix();
translate(i*gridSize+gridSize/2, j*gridSize+gridSize/2);
rect(-gridSize/8, -gridSize/8, gridSize/4, gridSize/4);
popMatrix();
}
}
}

example 2:

float[][] xDiv;
int gridSize = 20;
void setup() {
size(640, 360);
int x, y;
x = width/gridSize;
y = height/gridSize;
xDiv = new float[x][y];
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
xDiv[i][j] = random(gridSize/2.0);
}
}
frameRate(20);
}
void draw() {
int x, y;
x = width/gridSize;
y = height/gridSize;
background(0);
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
pushMatrix();
translate(i*gridSize+gridSize/2, j*gridSize+gridSize/2);
xDiv[i][j]+=random(-4.0, 4.0);
translate(xDiv[i][j], 0);
rect(-gridSize/8, -gridSize/8, gridSize/4, gridSize/4);
popMatrix();
}
}
}

example 3:

float[][] xDiv;
int gridSize = 40;
void setup() {
size(640, 360);
int x, y;
x = width/gridSize;
y = height/gridSize;
xDiv = new float[x][y];
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
xDiv[i][j] = random(gridSize/2.0);
}
}
}
void draw() {
int x, y;
x = width/gridSize;
y = height/gridSize;
background(0);
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
pushMatrix();
translate(i*gridSize+gridSize/2, j*gridSize+gridSize/2);
scale(map(sin(frameCount/20.0), -1.0, 1.0, 0.2, 4.0));
rect(-gridSize/8, -gridSize/8, gridSize/4, gridSize/4);
popMatrix();
}
}
}

example 4:

float[][] scaleRate;
int gridSize = 40;
void setup() {
size(640, 360);
int x, y;
x = width/gridSize;
y = height/gridSize;
scaleRate = new float[x][y];
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
scaleRate[i][j] = random(10.0, 40.0);
}
}
noFill();
stroke(255);
}
void draw() {
int x, y;
x = width/gridSize;
y = height/gridSize;
background(0);
for (int j = 0; j < y; j++) {
for (int i = 0; i < x; i++) {
pushMatrix();
translate(i*gridSize+gridSize/2, j*gridSize+gridSize/2);
scale(map(sin(frameCount/scaleRate[i][j]), -1.0, 1.0, 0.2, 4.0));
rect(-gridSize/8, -gridSize/8, gridSize/4, gridSize/4);
popMatrix();
}
}
}


Practice:
Create an array of 3D shapes. 

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

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





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: 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 (光雕藝術)

    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



























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