2012-08-10 75 views
0

我是Processing的新手。爲什麼我看不到第一個矩陣?我似乎只能看到延遲後的矩陣,而不是之前的矩陣。我的最終目標是觀察矩陣如何隨時間變化。如何在處理中繪製兩個不同的矩陣

// Number of columns and rows in the grid 
int[][] myArray = { {0, 1, 2, 3}, 
        {3, 2, 1, 0}, 
        {3, 5, 6, 1}, 
        {3, 8, 3, 4} }; 

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

void draw() { 
    background(204); 
    for (int i = 0; i < 4; i++) { 
    for (int j = 0; j < 4; j++) { 
     rect(20+30*j,30+30*i,3,3); 
    } 
    } 

    delay(2500); 
    background(204); 

    for (int i = 0; i < 4; i++) { 
    for (int j = 0; j < 4; j++) { 
     rect(40+30*j,50+30*i,7,7); 
    } 
    } 
} 

回答

1

myArray變量是一種誤導,它似乎並沒有在任何地方使用。 基本上你想要在值之間進行動畫/插值。 您的代碼執行此抽獎循環:

clear the background 
draw 16 squares 
wait 2500 ms 
clear the background 
draw 16 squares 

,你會小方塊後2500毫秒較大的廣場,就是這樣。

想要做的事情可以在許多方面實現,從簡單到複雜。幸運的是Processing提供了很多方便的功能。

要存儲的屬性(像一個盒子的x位置),其中,你會更新隨着時間的推移和使用更新後的值重繪屏幕上的一個變量:

int x = 20; 
int y = 30; 
int w = 3; 
int h = 3; 

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

void draw() { 
    //update 
    if(x <= 40) x++; 
    if(y <= 50) y++; 
    if(w <= 7) w++; 
    if(h <= 7) h++; 
    //draw 
    background(204); 
    for (int i = 0; i < 4 ; i++) { 
    for (int j = 0; j < 4; j++) { 
     rect(x+30*j,y+30*i,w,h); 
    } 
    } 
} 

你也可以map()你隨着時間的推移值給變量變化:

int x,y,s; 
int xmin = 20,xmax = 40; 
int ymin = 30,ymax = 50; 
int smin = 3,smax = 7; 

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

void draw() { 
    //update 
    x = (int)map(mouseX,0,width,xmin,xmax); 
    y = (int)map(mouseX,0,width,ymin,ymax); 
    s = (int)map(mouseX,0,width,smin,smax); 
    //draw 
    background(204); 
    for (int i = 0; i < 4 ; i++) { 
    for (int j = 0; j < 4; j++) { 
     rect(x+30*j,y+30*i,s,s); 
    } 
    } 
} 

或者使用線性內插(已經實施爲lerp()):

int xmin = 20,xmax = 40; 
int ymin = 30,ymax = 50; 
int smin = 3,smax = 7; 

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

void draw() { 
    //update 
    float t = (float)mouseX/width; 
    //draw 
    background(204); 
    for (int i = 0; i < 4 ; i++) { 
    for (int j = 0; j < 4; j++) { 
     rect(lerp(xmin,xmax,t)+30*j, 
      lerp(ymin,ymax,t)+30*i, 
      lerp(smin,smax,t)  , 
      lerp(smin,smax,t) ); 
    } 
    } 
} 

,你可以基於任何變量改變你的插值量你喜歡:

int xmin = 20,xmax = 40; 
int ymin = 30,ymax = 50; 
int smin = 3,smax = 7; 

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

void draw() { 
    //update 
    float t = abs(sin(frameCount * .01)); 
    //draw 
    background(204); 
    for (int i = 0; i < 4 ; i++) { 
    for (int j = 0; j < 4; j++) { 
     rect(lerp(xmin,xmax,t)+30*j, 
      lerp(ymin,ymax,t)+30*i, 
      lerp(smin,smax,t)  , 
      lerp(smin,smax,t) ); 
    } 
    } 
} 

HTH