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. 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. 6, 2020