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);
    }   
  }
}
4

1 に答える 1

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

于 2012-08-10T19:58:47.157 に答える