如何在处理中动画数据可视化？答案

【问题标题】：How to animate data visualization in Processing?如何在处理中动画数据可视化？
【发布时间】：2012-06-26 21:53:19
【问题描述】：

我正在尝试创建一个动画数据可视化，目前只知道如何执行以下“静态”代码，它将一串点放在一条直线上。如何让它们上下跳跃？此外，如果爱尔兰都柏林有人不介意为在 Processing 中从事数据可视化项目的几个大学生提供一些辅导课程，我们将有少量预算来补偿您的时间。非常感谢！

现在，这是我正在谈论的代码......

SimpleSpreadsheetManager sm;
String sUrl = "t6mq_WLV5c5uj6mUNSryBIA";
String googleUser = "USERNAME";
String googlePass = "PASSWORD";

void setup() {
  //This code happens once, right when our sketch is launched
 size(800,800);
 background(0);
 smooth();

 //Ask for the list of numbers
 int[] numbers = getNumbers();
fill(255,40);
noStroke();
for (int i = 0; i < numbers.length; i++) {
  ellipse(numbers[i] * 8, width/2, 8,8);
};

};
void draw() {
  //This code happens once every frame.
};

【问题讨论】：

标签： processing data-visualization

【解决方案1】：

本质上，您用于绘制椭圆的 x 位置是您从外部数据中获得的数值。您需要一个改变值的变量。以更新后的值重绘椭圆应该会产生动画效果。

以这个基本示例为例：

float x,y;//position variables for the ellipse

void setup(){
  size(800,800);
  smooth();
  fill(255,40);
  noStroke();
  y = 400;
}
void draw(){
  //update values
  x = mouseX + (sin(frameCount * .05) * 30);//update x to an arbitrary value
  //draw
  background(0);//clear the screen for the new frame
  ellipse(x,y,8,8);//draw the ellipse at the new position
}

x 变量有点像 numbers[i] - 只是一个机会值。除了清除屏幕（通过调用background()）和绘图之外，draw() 中没有什么特别的事情发生。上面的示例使用了一个任意值，但您的设置可能是其他东西，可能是数据集中随时间变化的某个值（例如一个国家的人口等）

要记住的另一件方便的事情是数据和视觉代码之间的分离。如果数据集中的值高于可以在屏幕上显示为原始值的值，您可以map() 值，以便它们可以查看、添加某种导航控件等。分析的值不会受到当前值的影响显示。在编程术语中，数据/模型、视觉/视图（如何呈现数据）和控件/控制器之间的这种分离称为Model-View-Controller 模式。对于刚开始使用代码的人来说，这可能有点多，但只要意识到分离而不用担心具体的实现会很有帮助。

这是一个非常基本的示例，将草图的宽度映射到数据（数字）的大小

SimpleSpreadsheetManager sm;
String sUrl = "t6mq_WLV5c5uj6mUNSryBIA";
String googleUser = "USERNAME";
String googlePass = "PASSWORD";

int[] numbers;//data used for visualisation

void setup() {
  //sketch setup
 size(800,800);
 smooth();
 fill(255,40);
 noStroke();
 //retrieve data
 numbers = getNumbers();
}
void draw() {
  background(0);
  int numId = int(map(mouseX,0,width,0,numbers.length));//map mouse x position based on sketch width and data size 
  ellipse(numbers[numId] * 8, height/2, 8,8);
}

【讨论】：

非常感谢，乔治和哈米德！

【解决方案2】：

对于动画，您需要一个或多个参数值及时更改，目前有一个处理库可以执行此类操作：Ani 有关更多信息，请参阅网站并提供示例。

【讨论】：