代码之家 › 专栏 › 技术社区 › user1114864

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

processing delay drawing matrix

user1114864 · 技术社区 · 14 年前

我是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 回复 | 直到 14 年前

George Profenza 14 年前

你的 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)     );
    }   
  }
}

邻苯二甲酸