Question

我正在尝试创建动画数据可视化，目前只知道如何执行以下操作＆＃34;静态＆＃34;代码，它将一串点放在一条直线上。如何让它们上下跳动？此外，如果在爱尔兰都柏林有任何人，他们不介意为几个在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.
};

Answer 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变量有点像数字[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);
}

Answer 2

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

如何在Processing中设置数据可视化动画？

2 个答案: