0

我试图弄清楚如何将这些线条合并到 draw() 函数中的 for 循环中。基本上，我正在尝试制作条形图的动画，例如尝试将每个条从 0 绘制到它的 Y 值，然后绘制下一个条，依此类推。我可以手动添加下面的每个块，并且创建每一行都可以正常工作，但自动化它似乎更好。每行创建一个条形/列。

float yPos = map(actions[1].presses, minVal, maxVal, height/2, 50);
line(lineXpos, actions[1].a, endLineXpos, actions[1].a);
actions[1].a = actions[1].a - 2;
if (actions[1].a < yPos) { 
  actions[1].a = height/2; 
}

float yPos2 = map(actions[2].presses, minVal, maxVal, height/2, 50);
line(lineXpos+10, actions[2].a, endLineXpos+10, actions[2].a);
actions[2].a = actions[2].a - 2;
if (actions[2].a < yPos2) { 
  actions[2].a = height/2; 
}

float yPos3 = map(actions[3].presses, minVal, maxVal, height/2, 50);
...
...
and so on...

似乎我可以将上面的内容合并为下面的内容，但是当我运行它时，它会无休止地运行并形成一个斜坡。

void draw() {

for( int j = 1; j < actions.length; j++) {

actions[j].yPos = map(actions[j].presses, minVal, maxVal, height/2, 50);

line(actions[j].lineXpos, actions[j].a, actions[j].endLineXpos, actions[j].a);
actions[j].a = actions[j].a - 2; 

if (actions[j].a < actions[j].yPos) { 
  actions[j].a = height/2;
  actions[j].lineXpos = actions[j].lineXpos + 10;
  actions[j].endLineXpos = actions[j].endLineXpos + 10;
}

}

}

我认为 actions[j].yPos 每次都会被覆盖。任何想法我做错了什么？

谢谢！

**编辑：在下面添加我的完整代码进行测试。

Action[] actions;
int leng;
float minVal, maxVal;
float a;
float lineXpos = 0;
float endLineXpos = 10;

//now draw lines
float xPos = 0;
float lineX = 0;
float lineY = 0;

void setup() {

size(1400, 600);
background(160,196,242);
stroke(191,133,99);
fill(0);
smooth();

textSize(14);
textAlign(LEFT, TOP);

String[] data = loadStrings("keystrokes.log");

actions = new Action[data.length];

for(int i = 1; i < actions.length; i++) {
float[] values = float(split(data[i], ",")); 
actions[i] = new Action(values[0], values[1], values[2]);
if(i == 1) {
minVal = maxVal = actions[i].presses; 
}
if(actions[i].presses < minVal) minVal = actions[i].presses;
if(actions[i].presses > maxVal) maxVal = actions[i].presses;
}

println("clicks min:"+minVal+" max:"+maxVal);

}

void draw() {

for( int j = 1; j < actions.length; j++) {
//println("presses: "+actions[j].presses);
float yPos = map(actions[j].presses, minVal, maxVal, height/2, 50);

//draw lines
if(j == 1) {
  lineX = xPos;
  lineY = yPos;
} else {
   line(lineX+10, height/2, xPos, yPos); 
}
lineX = xPos;
lineY = yPos;
xPos += 10;
}

float yPos = map(actions[1].presses, minVal, maxVal, height/2, 50);
line(0, actions[1].a, 10, actions[1].a);
actions[1].a = actions[1].a - 2;
if (actions[1].a < yPos) { 
actions[1].a = height/2; 
}

float yPos2 = map(actions[2].presses, minVal, maxVal, height/2, 50);
line(0+10, actions[2].a, 10+10, actions[2].a);
actions[2].a = actions[2].a - 2;
if (actions[2].a < yPos2) { 
actions[2].a = height/2; 
}  

float yPos3 = map(actions[3].presses, minVal, maxVal, height/2, 50);
line(0+20, actions[3].a, 10+20, actions[3].a);
actions[3].a = actions[3].a - 2;
if (actions[3].a < yPos3) { 
actions[3].a = height/2; 
}

}

// the white dots Object, cookie cutter
class Action {
float time;
float clicks;
float presses;
float speed;
float a = height/2;
float xpos;
float lineXpos = 0;
float endLineXpos = 10;
float yPos;

Action(float t, float p, float c) {
time = t;
presses = p;
clicks = c;
speed = 2;
} 

}

Keystokes.log：

1369064940, 0, 0
1369065060, 65, 19
1369065180, 90, 28
1369065300, 179, 27
1369065420, 242, 20
1369065540, 156, 30
4

1 回答 1

1

这将是 for 循环：

  float yPos = 0;
  for (int i = 1; i < actions.length; i++) {
    yPos = map(actions[i].presses, minVal, maxVal, height/2, 50);
    line((i-1)*10, actions[i].a, 10+(i-1)*10, actions[i].a);
    actions[i].a = actions[i].a - 2;
    if (actions[i].a < yPos) { 
      actions[i].a = height/2;
    }
  }

在考虑如何创建 for 循环时，手动创建第一个循环会有所帮助，就像您所做的那样。然后，您可以采用创建每个条的单个代码块之一，例如，这个：

  float yPos3 = map(actions[3].presses, minVal, maxVal, height/2, 50);
  line(0+20, actions[3].a, 10+20, actions[3].a);
  actions[3].a = actions[3].a - 2;
  if (actions[3].a < yPos3) { 
    actions[3].a = height/2;
  }

然后你将每个柱的变化变量变成一个通用变量。所以在这种情况下，你会发现你必须继续yPos1, yPos2, yPos3, etc.在你的 for 循环中创建一个，你只需要一个。在上面的 for 循环中，我在yPosfor 循环之后立即声明。然后，i将遍历actions[i]数组中的所有索引。最后，棘手的部分是确定在何处绘制line(x1, y1, x2, y2). 我注意到在您的原始代码中，这些行是这样的：

line(0, actions[1].a, 10, actions[1].a);
line(0+10, actions[2].a, 10+10, actions[2].a);
line(0+20, actions[3].a, 10+20, actions[3].a);

所以我看到每次画一条线都会增加10个像素。所以你可以把这一行写成：

line((i-1)*10, actions[i].a, 10+(i-1)*10, actions[i].a);

基本上，i是从 1 到actions.length，即1, 2, 3, 4, 5, 6。你希望你的线被画在0, 10, 20, 30, 40, 50. 这样你就可以写了(i-1)*10。第二个 x 值的工作原理相同，但带有额外的10+.

让我知道这是否有帮助。

于 2013-05-29T07:20:14.447 回答