Processing 如何在处理过程中设置数据可视化动画?

Processing 如何在处理过程中设置数据可视化动画?,processing,data-visualization,Processing,Data Visualization,我正在尝试创建一个动画数据可视化,目前只知道如何执行下面的“静态”代码,它将一串点放在一条直线上。我怎样才能让他们跳上跳下?此外,如果爱尔兰都柏林有人不介意给两名正在处理数据可视化项目的大学生上几节辅导课,我们有一笔小预算来补偿您的时间。非常感谢 现在,这是我说的代码 SimpleSpreadsheetManager sm; 字符串sUrl=“t6mq_WLV5c5uj6mUNSryBIA”; 字符串googleUser=“USERNAME”; 字符串googlePass=“PASSWORD”;

我正在尝试创建一个动画数据可视化,目前只知道如何执行下面的“静态”代码,它将一串点放在一条直线上。我怎样才能让他们跳上跳下?此外,如果爱尔兰都柏林有人不介意给两名正在处理数据可视化项目的大学生上几节辅导课,我们有一笔小预算来补偿您的时间。非常感谢

现在,这是我说的代码

SimpleSpreadsheetManager sm;
字符串sUrl=“t6mq_WLV5c5uj6mUNSryBIA”;
字符串googleUser=“USERNAME”;
字符串googlePass=“PASSWORD”;
无效设置(){
//这段代码只发生一次,就在启动草图时
尺寸(800800);
背景(0);
光滑的();
//询问号码表
int[]numbers=getNumbers();
填充(255,40);
仰泳();
for(int i=0;i
基本上,用于绘制椭圆的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]——只是一个可能的值。 在draw()中,除了清除屏幕(通过调用
background()
)和绘图外,没有其他特殊情况发生。上面的示例使用了一个任意值,但在您的设置中,可能是其他值,可能是数据集中随时间变化的某个值(如一个国家的人口等)

另一个需要记住的方便的事情是数据和视觉效果之间的代码分离。如果数据集中的值高于屏幕上可以显示为原始值的值,则您可以选择这些值,以便它们可以作为查看器,添加某种导航控件等。所分析的值将不受显示内容的影响。在编程术语中,数据/模型、视觉/视图(数据的呈现方式)和控件/控制器之间的这种分离称为模式。 对于刚开始编写代码的人来说,这可能有点过分,但是仅仅意识到分离而不必担心太多关于具体实现的问题可能会有所帮助

下面是一个非常基本的示例,它将草图的宽度映射到数据(数字)的大小


对于动画,您需要一个或多个参数,这些参数的值会随时间发生变化,目前有一个用于处理的库,可以执行以下操作:
有关更多信息,请参阅网站和提供的示例。

非常感谢George和Hamed!
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);
}