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