processingについて

processingの質問です。

processing
1color[] colarray = { #fdf4ac,#3de3d6,#b564c5,#f1709c,#ffbe8e,#413d79,};
2
3int graphx;
4float graphy;
5
6void setup(){
7 size( 600, 600 );
8 background(0);
9 smooth();
10 noLoop();
11}
12 
13void draw(){
14 beginShape();
15 Table table = loadTable("kionn.csv", "header");
16 int N = table.getRowCount();
17 TableRow row = table.getRow(128);
18 graphx = row.getInt("year");
19 graphy = row.getFloat("average");
20 noFill();
21 stroke(colarray[(int)random(6)]);
22 strokeWeight(3);
23 vertex(graphx,graphy);
24 
25 ellipse(graphx,graphy,5,5);
26 ellipse(graphx,graphy,5,5);
27 endShape();
28 }

行動規範の内容に同意します

回答2件

ベストアンサー

graphxは1891以上ですから、幅600では収まりませんね。
graphyも見たところマイナスばかりですから、これも画面外になってしまいます。
画面内（size(600, 600)）に収まる数値にしなければなりません。

計算をしてもいいですが、Processingには便利な map() 関数が用意されているのでそれを使用します。

map(value, start1, stop1, start2, stop2)
valueをstart1～stop1の範囲から、start2～stop2の範囲に変換します。
例
map(1891, 1891, 1991, 0, 600) = 0
map(1991, 1891, 1991, 0, 600) = 600
map(1941, 1891, 1991, 0, 600) = 300

変換ができたら行数分ループするだけですね。

Processing
1color[] colarray = { #fdf4ac, #3de3d6, #b564c5, #f1709c, #ffbe8e, #413d79, };
2
3void setup() {
4  size(600, 600);
5  background(0);
6  smooth();
7  noLoop();
8}
9
10void draw() {
11  noFill();
12  stroke(colarray[(int) random(6)]);
13  strokeWeight(3);
14
15  Table table = loadTable("kionn.csv", "header");
16  int N = table.getRowCount();
17
18  beginShape();
19  for (int i = 0; i < N; i++) {
20    TableRow row = table.getRow(i);
21    
22    int year = row.getInt("year");
23    float graphx = map(year, 1891, 1991, 0, width);
24    
25    float average = row.getFloat("average");
26    float graphy = map(average, -5, -10, 0, height); // 適当に入れたがどんな範囲なのか
27
28    vertex(graphx, graphy);
29    ellipse(graphx, graphy, 5, 5);
30    ellipse(graphx, graphy, 5, 5);
31  }
32
33  endShape();
34}

奇麗なグラフを出したいなら、ライブラリを使用したほうが楽です。
いろいろあると思いますがサンプルコードがあったgiCentre utilities — giCentreを使ってみました。
Processingの「ライブラリをインポート...」からgicentreUtilsをインストールします。

Processing
1import org.gicentre.utils.stat.XYChart;  
2
3
4color[] colarray = { #fdf4ac, #3de3d6, #b564c5, #f1709c, #ffbe8e, #413d79, };
5XYChart lineChart;
6
7void setup() {
8  size(600, 600);
9  background(0);
10  smooth();
11  noLoop();
12
13  Table table = loadTable("kionn.csv", "header");
14  int N = table.getRowCount();
15  float[] xValues = new float[N];
16  float[] yValues = new float[N];
17  
18  for (int i = 0; i < N; i++) {
19    TableRow row = table.getRow(i);
20
21    xValues[i] = row.getFloat("year");
22    yValues[i] = row.getFloat("average");
23  }
24
25  lineChart = new XYChart(this);
26  lineChart.setData(xValues, yValues);
27  lineChart.showXAxis(true);
28  lineChart.showYAxis(true);
29  lineChart.setXFormat("0000");
30
31  color c = colarray[(int) random(6)];
32  lineChart.setPointColour(c);
33  lineChart.setPointSize(10);
34
35  lineChart.setLineColour(c);
36  lineChart.setLineWidth(3);
37}
38
39void draw() {
40  lineChart.draw(15, 15, width - 30, height - 30);
41}