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]に少し似ています-チャンスのある値です。( を呼び出して) 画面をクリアして描画する以外に、 draw() では特別なことは何も起こりませんbackground()。上記の例では任意の値を使用していますが、設定によっては、時間の経過とともに変化するデータ セット内の特定の値 (国の人口など) になる可能性があります。

覚えておくと便利なもう 1 つの点は、データとビジュアル コードの分離です。データ セット内の値が生の値として画面に表示できる値よりも大きい場合は、値を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

アニメーションの場合、値が時間とともに変化する 1 つ以上のパラメーターが必要です。現在、そのようなことを行う処理用のライブラリがあります: Ani 詳細については、サイトと提供されている例を参照してください。

于 2012-06-27T22:09:56.260 に答える