0

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

2 回答 2

0

本质上，您用于绘制椭圆的 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()值，以便它们可以查看，添加某种导航控件等。分析的值不会受到当前值的影响显示。在编程术语中，数据/模型、视觉/视图（如何呈现数据）和控件/控制器之间的这种分离称为模型-视图-控制器模式。对于刚开始使用代码的人来说，这可能有点多，但是仅仅意识到分离而不用担心具体的实现可能会有所帮助。

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

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);
}
于 2012-06-27T14:07:43.043 回答
0

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

于 2012-06-27T22:09:56.260 回答