TESIGN: Motion 2 : Machine, Organism (processing教學)

今天早餐沒有吃,中餐吃大呼過癮,吃完只有大呼好熱,
晚餐吃神魯,吃完就暈過去一陣子.

有時候要做事情的時候都還是會想我做這幹麻?
但學長說過很多事都是在不問幹麻做就對了的情況下,
自己會有所啟發跟成長,我想我現在有點了解王俊雄那時想對我表達的東西了.
什麼事情都瞻前顧後的的話,最後結果大多是不上不下或是安全牌爾爾,
也許找到其中的平衡點我就可以拿82分了噢.

------------------------------------------------------------------------------------------------------------------------------

再接下來的這篇裡,雖然我們已經學過動畫了,
但p291-299的Motion 2這篇講的比較像是連動關係.
p292,293的範例大概跟Motion 1的範例沒差多少,
其實現在看到sin跟cos沒有那麼害怕了,
因為基本上它通常只是個調節變數(1到-1), nothing to be afraid of. :)

先從p294的32-03講起.

void setup(){
size(200,200);
noStroke();
smooth();
}

float angle = 0;
float speed = 0.1; //speed數值越大則扭動越快,因為sin的循環每次加總值為6.28

void draw(){

background(0);

angle = angle + speed;
ellipse(100 + (sin(angle + PI) * 5), 70, 30, 30); //PI = 3.14,而sin(PI) = 0 之後往-1跑,所以上圓會先往左跑
ellipse(100 + (sin(angle + HALF_PI) * 5), 100, 30, 30); //相較之下中圓會先往右跑,因為sin(HALF_PI)時仍為正數
ellipse(100 + (sin(angle + QUARTER_PI) * 5), 130, 30, 30); //跟中圓比時,下圓則較其更晚往-1跑

//if(frameCount < 200){
// saveFrame("p294-1-###.jpg");
//}
}

簡單來說,就是上圓一開始先往左跑,而中下圓則往右跑,
而下圓又比中圓跑的慢,透過這樣的間隔達到好像球在擺動的效果.
如果還不懂,請回去看p118關於sin,cos的定義.
而32-04基本上也是同樣的用法,透過不同的值造成圓縮放的時間差.

void setup(){
size(200,200);
smooth();
fill(255,180);
}

float angle = 0;
float speed = 0.05; //一樣控制縮放速度

void draw(){
background(0);
angle += speed;
noStroke();
circlePhase(0);
circlePhase(QUARTER_PI);
circlePhase(HALF_PI);

stroke(255,0,0);
line(45,0,45,200);
line(155,0,155,200);

if(frameCount < 200){
saveFrame("p294-2-###.jpg");
}
}
void circlePhase(float phase){
float diameter = 155 + (sin(angle + phase) * 45);
//我們知道sin就是1到-1,所以圓的直徑最大是200,最小是110
ellipse(100,100,diameter,diameter);
}

我特意畫了額外兩條紅線,其間距即是110,
所以我們可以看到圓在縮放的時後,最大時是剛好碰到邊框,
最小時則剛好碰到兩條紅線,這應該會比較好理解sin在程式裡的作用.

再來就是p298的32-08與32-09跟noise搭配的案例,
一樣記得,noise只是一個介於1到-1的random,同時俱有方向性.

void setup(){
size(200,200);
strokeWeight(20); //很粗的線
smooth();
}

float n1 = 0;
float inc1 = 0.1;
float n2 = 0;
float inc2 = 0.09;
float k = 0;
float inck = 0.05;

void draw(){
background(0); //每畫一次都把前一次畫的蓋掉

n1 += inc1;
n2 += inc2;
k += inck;

float y1 = (noise(n1) - 0.5) * 50; //基本上值就是介於-15到15
float y2 = (noise(n2) - 0.5) * 50; //同上,只是為了讓兩條線擺動時noise值不一樣,所以分出y1,y2
stroke(255 + (sin(PI+k)*255)); //我額外加的,透過sin讓線在擺動時同時閃爍
line(0,100,80,100 + y1);
line(200,100,100,100 + y2);

//if(frameCount < 300){
// saveFrame("p298-1-###.jpg");
//}
}

應該沒什麼大問題吧?再來就是32-09囉.

void setup(){
size(200,200);
noStroke();
}

float inc = 0.06; //值越小畫面越細膩
int density = 4; //值越小馬賽克格子越小
float znoise = 0;

void draw(){
float xnoise = 0;
float ynoise = 0;
for(int y = 0; y < height; y += density){
    for(int x = 0; x < width; x += density){
      xnoise += inc;
      float n = noise(xnoise,ynoise,znoise) * 256;
      fill(n);
      rect(y, x, density, density);
    }
    ynoise += inc;
    xnoise = 0;
}
//基本上這段就跟之前介紹noise一樣,透過x,y向的forloop成圖
znoise += inc;
//z方向的noise則使畫面得以一直變化,如果把它殺掉你會發現畫面是定住的
//因為noise有方向性,所以xy向只是成一張圖,而z向則是不斷的推移.

//if(frameCount < 200){
// saveFrame("298-2-###.jpg");
//}
}

如果把inc改成0.5,而density改成2則會得到以下,

如果你還是不太懂nosie到底在衝三小,
這張diagram不知道會不會幫到你.

基本上你可以想成noise的xyz其實像一團霧,
而當我們只有xy時,我們只看到這團霧的其中一個切面,
但當我們有z方向時,則會在霧中不斷推移,所以每張切面就構成一動畫.

最後則是小作品一則,我有設定當圓在跑時,
碰到邊時會馬上回歸中心點繼續畫,把程式碼丟入processing看動畫會比較清楚.

void setup(){
size(200,200);
background(255);
randomSeed(2);
}

float x = 100;
float y = 70;

void draw(){

frameRate(150);

x += random(-8,8);
y += random(-8,8);
strokeWeight(random(3,12));
stroke(random(255),40);
point(x,y);

if(x < 0 || x >200){
x = 100;
}

if(y < 0 || y >200){
y = 100;
}

//if(frameCount > 1000 && frameCount < 1002){
// saveFrame("p296-1-##.jpg");
//}
}

Try it. :)

2011/08/02

Motion 2 : Machine, Organism (processing教學)

1 則留言: