midterm, B9510051,

mid-term demo

demo 10 basic elemets of graphic design
1. at least one image to illustrate your work
2. Demo your portfolio and explain to others
3. tag with: midterm, and your register number

Midterm B9515056

Similiarity

這是用物理的波形公式呈現出來的圖形。

• y(x,t) = Asin(kx-wt)

A為振幅，w為角頻率，x是波形的水平位移。k為波號設為1就可以了。

波長 λ = (2*π)/w，因此w越小，波長越長。

這個圖是將波長不斷遞增，形成越來越寬的景象。並且遞增x值，讓圖形呈現慢慢右移的現象。
其實這個圖形的構想是來自賦格曲式，原本想讓振幅慢慢變大或產生不規則變形，結果發現這樣圖形會很亂，看不太出Similarity的效果。因此還是維持規律的正絃波形。

void setup(){
  size(1024,768);
  int w = 1;
  int counter = 0;
  float a = 40;
  for(float j =0;j<height;j+=40){
      for(float i =0;i<width;i+=0.1){
           ellipse(i*j/10,f(a,w,i,j/40)+j*1.3,j/10,4);
      }
  }
}

float f(float a, float w,float t,float x){
  return a*sin(x-w*t);
}

Gradation
這圖是先做平面方格，由左向右慢慢放大的效果。後來再加上在每個平面方格上，繪製漸漸變小的數個平面方格。平面方格越大，上面的小方格就越多，就會造成這種漸層效果。

void setup(){
  size(1000,600);
  background(0xffffff);
  noStroke();
  noLoop();
}
void draw(){
  for(int i =1; i<=width; i+=20){
      for(int j =1;j<=height;j+=20){  //繪製方格間隔為20px的方格
        for(int k =0;k<=i/20;k+=3){  //在每個位置上，多繪製漸層效果的小方格
          fill(200-(i%256-k*5),200-(j%256-k*5),200-(i*j%256-k*5),120);
          float x = -abs(tan((float)Math.toRadians(j)));  //i, j決定漸層偏移角度
          float y = -abs(tan((float)Math.toRadians(i)));
          rect(i+k*x,j+k*y,i/20-k,i/20-k); //以k做出由大到小的感覺
        }
     }
  }
}

剛剛將偏移函數從cos改成tan，圖形變得很有趣。

Color Scheme

http://colorschemedesigner.com/
http://www.color-wheel-pro.com/

2D Gradation Pattern Sample code

int [][] gradationPattern = { {5, 4, 3, 4, 5},
{4, 3, 2, 3, 4},
{3, 2, 1, 2, 3},
{4, 3, 2, 3, 4},
{5, 4, 3, 4, 5} };
void setup() {
size (500, 500);
background(0);
}

void draw() {
noStroke();
for (int i = 0; i < 5; i++) {
for (int j = 0; j < 5; j++) {
int gp = gradationPattern[i][j];
drawUnit(i, j, gp);

}
}


}
void drawUnit(int i, int j, int gp) {

switch (gp) {
case 1:
fill(gp*50);
rect(i*100, j*100, 100, 100);
break;
case 2:
fill(gp*50);
ellipse(i*100+50, j*100+50, 100, 100);
break;
default:
break;

}
}

2D array sample code 1

float[][] distances;
float maxDistance;
void setup() {
size(200, 200);
background(0);
}
void draw() {
float d1, d2, d3, d4;
d1 = dist(mouseX, mouseY, 0, 0);
d2 = dist(mouseX, mouseY, width, height);
d3 = dist(mouseX, mouseY, 0, height);
d4 = dist(mouseX, mouseY, width, 0);
maxDistance = max(d1, d2, d3);
maxDistance = max(d4, maxDistance);
distances = new float[width][height];
for(int i=0; i < height; i++) {
for(int j=0; j < width; j++) {
float d = dist(mouseX, mouseY, j, i);
distances[j][i] = d/maxDistance * 255;
}
}
for(int i=0; i < height; i+=2) {
for(int j=0; j < width; j+=2) {
stroke(distances[j][i]);
point(j, i);
}
}
}

learning Array

http://www.processing.org/learning/basics/array2d.html
http://www.processing.org/learning/2darray/

練習 pattern based gradiation