2011年7月1日 星期五

RUYI-2D Pattern (Processing)


基本上跟之前畫如意圖形是一樣的方法
這次著重在2D平面的紋理創造
Basically it is the same way creating the RU_YI Pattern .
This time we emphasis on the 2D pattern.

透過簡單的Sin與Cos關係
定義出如意造形的CURVE與基本形
再進行較為複雜的紋理編排

Using the basic Sin and Cos to define the curve 
and create the basic element for more complex arrange.


先將單元列成矩陣 並嘗試做各種變化形
First we try to populate the basic element into a matrix
CODE:
float l =100;// the tails radius
float c = 2;

void setup(){
 size(600,600);
 background(0); 
 smooth();
}

void draw(){
  background(0);
  for(int i=0; i<=width;i+=l){
  for(int j=0; j<=height; j+=l/2){

  pushMatrix();
  translate(i,j);
  tailstails();
  popMatrix();  

  
 /* if(((i+j)/l)%2==0){
  pushMatrix();
  translate(i,j);
  tailstails();
  popMatrix();  
  }

  if(((i+j)/l)%2==1){
  pushMatrix();   
  translate(i,j+l/2);
  rotate(PI);
  tailstails();
  popMatrix();
  }*/
 }
 }
}


void tailstails(){//draw the basic Ru_Yi element
pushMatrix();  
translate(l/4,l/4);
tailsSin(l/4,-540,720,2);
popMatrix();

pushMatrix();  
translate(-l/4,l/4);
tailsCos(l/4,-360,900,2);
popMatrix();
}

void tailsSin(float r, float s, float a, float d){ //draw the Ru_Yi curves

 for(float i= s; i
   pushMatrix();
   translate(r*sin(i*(PI/360)),r*cos(i*(PI/360)));
   //ellipse(0,0,r/5,r/5);
   stroke(255);
   strokeWeight(r/8);
   point(0,0);
   //sphere(r/5);
   popMatrix();
   float t =c*r/1260;
   r=r-t;
 }
}

 void tailsCos(float r, float s, float a, float d){

 for(float i= s; i
   pushMatrix();
   translate(r*cos(i*(PI/360)),r*sin(i*(PI/360)));
   //ellipse(0,0,r/5,r/5);
   stroke(255);
   strokeWeight(r/8);
   point(0,0);
   //sphere(r/5);
   popMatrix();
   float t =c*r/1260;
   r=r-t;
 }
 }


然後再將它編排至圓形造形上
使其產生各種圖形
甚至生成另一個中國紋理愛運用的 
"雲"的造形

After the code above, we try to populate the element 
onto a circle-like pattern.
We also create another Chinese Symbol 
"CLOUD," 
which is base on the same element.





CODE 如下
基本上只要調整紅色的部分就可以
CODE:
Basically you just play with the red-words parts
float c = 2;

void setup(){
 size(600,600);
 background(0); 
 smooth();
}

void draw(){
  background(0);
  tailsCircle(200,80,1); change the first and the second number to change the size and the radius, the third number could be 1 or -1
  tailsCircle(175,70,1);
  tailsCircle(150,60,1);
  tailsCircle(125,50,1);
  tailsCircle(100,40,1);
  tailsCircle(75,30,1);
  tailsCircle(50,20,1);
}

void tailsCircle(float r, float l, int n){
  pushMatrix();
  translate(width/2,height/2);
  for(int i=0; i<=360;i+=20){
  for(int j=0; j<=360; j+=20){
  pushMatrix();

  translate(r*cos(i*(PI/180)),r*sin(i*(PI/180)));
  rotate(i*PI/180-n*PI/2);  
  tailstails(l);
  popMatrix();
 }
}
  popMatrix();

}


void tailstails(float l){

pushMatrix();  
translate(-l/4,l/4);
tailsSin(l/4,-540,720,2);
popMatrix();

pushMatrix();  
translate(l/4,l/4);
rotate(3*PI/2);// if you want to make a Chinese "cloud" symbol you will need it or you can close it. 
tailsSin(l/4,-360,900,2);
popMatrix();
}

void tailsSin(float r, float s, float a, float d){

 for(float i= s; i
   pushMatrix();
   translate(r*sin(i*(PI/360)),r*cos(i*(PI/360)));
   //ellipse(0,0,r/5,r/5);
   stroke(255);
   strokeWeight(r/8);
   point(0,0);
   //sphere(r/5);
   popMatrix();
   float t =c*r/1260;
   r=r-t;
 }
}

 void tailsCos(float r, float s, float a, float d){

 for(float i= s; i
   pushMatrix();
   translate(r*cos(i*(PI/360)),r*sin(i*(PI/360)));
   //ellipse(0,0,r/5,r/5);
   stroke(255);
   strokeWeight(r/8);
   point(0,0);
   //sphere(r/5);
   popMatrix();
   float t =c*r/1260;
   r=r-t;
 }
 }
改用紅色讓圖像更具中國風
Make the color RED, more CHINESE


沒有留言:

張貼留言