如何在處理可視化中動畫條形圖數據？

Question

我想弄清楚如何將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; 
} 

} 

} 

我認爲每次操作[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 

Answer 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循環中，我已經在for循環之後立即聲明瞭yPos。然後，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+。

讓我知道這是否有幫助。