Question

我是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);
    }   
  }
}

Answer 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

如何在Processing中绘制两个不同的矩阵

1 个答案: