processing > 数値をグラフプロットしてみる / 折れ線グラフを描く

動作確認

Processing 3.1.1
Windows 8.1 pro (64bit)

数値をプロット

参考 http://yoppa.org/tau_bmaw13/4790.html

map()とellipse()を使って数値をプロットしてみる。

void setup()
{
  size(800, 300);
  frameRate(2);
  background(255);
}

float vals[] = { 
3, 1, 4, 1, 5,
9, 2, 6, 5, 3, 
5, 8, 9, 7, 9, 
3, 2, 3, 8, 4, 
6, 2, 6 
};

int pos=0;

void draw()
{
   fill(0);
   if (pos < 23) {
     float tx = map(pos, 0, 23, 0, width);
     float ty = map(vals[pos], 0, 10, height, 0);
     ellipse(tx, ty, 4, 4);
     pos++;
   }
}

frameRate(2)としているため、0.5秒ごとにプロットが増える。

上記はopenprocessingでも動く。
http://www.openprocessing.org/sketch/377113

折れ線グラフ

• line()を使う
• 前の値から今の値まで線を引く

void setup()
{
  size(800, 300);
  frameRate(2);
  background(255);
}

float vals[] = { 
3, 1, 4, 1, 5,
9, 2, 6, 5, 3, 
5, 8, 9, 7, 9, 
3, 2, 3, 8, 4, 
6, 2, 6 
};

int pos=0;

void draw()
{
   if (pos == 0) { // skip 1st
     pos++;
   }
  
   fill(0);
   if (pos < 23) {
     float stx = map(pos-1, 0, 23, 0, width);
     float sty = map(vals[pos-1], 0, 10, height, 0);
     float etx = map(pos, 0, 23, 0, width);
     float ety = map(vals[pos], 0, 10, height, 0);
     line(stx, sty, etx, ety);
     pos++;
   }
}