week 9. using sine

(時間往復變化) 

practice:

  用sine 控制一個物件之 

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

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

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

(線性位移與 sine 曲線位移)

float x, y;

float dim = 80.0;

float dX = 4.0;

void setup() {

  size(640, 360);

  noStroke();

}

void draw() {

  background(102);

  

  x = x + dX;

  

  if (x > width||x<0) {

    dX = -dX;

  } 

  pushMatrix();

  translate(x, height/2-dim/2);

  fill(255);

  rect(-dim/2, -dim/2, dim, dim);

  popMatrix();

  // Transforms accumulate. Notice how this rect moves 

  // twice as fast as the other, but it has the same 

  // parameter for the x-axis value

  pushMatrix();

  translate(sin(map(x,0, width,0, PI))*width, height/2+dim/2);

  fill(0);

  rect(-dim/2, -dim/2, dim, dim);

  popMatrix();

}

(scale 線性與 sine 比較)

float x, y;

float dim = 80.0;

float dX = 4.0;

void setup() {

  size(640, 360);

  noStroke();

  frameRate(20);

}

void draw() {

  background(102);

  

  x = x + dX;

  

  if (x > width||x<0) {

    dX = -dX;

  } 

  pushMatrix();

  translate(width/4, height/2);

  scale(map(x,0,width, 0.25, 4.0));

  fill(255);

  rect(-dim/2, -dim/2, dim, dim);

  popMatrix();

  // Transforms accumulate. Notice how this rect moves 

  // twice as fast as the other, but it has the same 

  // parameter for the x-axis value

  pushMatrix();

  translate(width*0.75, height/2);

  //scale(map(x,0,width, 0.25, 4.0));

 //scale(map(sin(frameCount/40.0), -1.0, 1.0, 0.25,4.0));

  scale(map(sin(map(x,0,width,0.0, PI)), 0, 1.0, 0.25, 4.0));

  fill(0);

  rect(-dim/2, -dim/2, dim, dim);

  popMatrix();

}

(空間切割) 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

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/