你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