棒グラフをプログラムで作ってみる

それでは、プログラムで棒グラフを作ってみましょう。

PFont myFont;    //フォント用変数

int a = 10;    //a〜fはそれぞれのバーの値
int b = 14;
int c = 20;
int d = 80;
int e = 2;
int f = 18;
float barW;  //バーの横幅

size(400, 400);
background(255);

myFont = createFont("Arial", 12);    //フォント作成
textFont(myFont, 12);  //テキストのサイズを設定
textAlign(CENTER);

barW = 40;  //バーの横幅を40ピクセルにする

fill(127);    //グレーで描画
rect(0, height - a, barW, a);    //一つずつバーを描画
rect(barW*1, height - b, barW, b);
rect(barW*2, height - c, barW, c);
rect(barW*3, height - d, barW, d);
rect(barW*4, height - e, barW, e);
rect(barW*5, height - f, barW, f);

fill(255, 0, 0);    //赤で描画
text("a = " + a, barW/2, height - a - 10);    //テキストを描画
text("b = " + b, barW*1 + barW/2, height - b - 10);
text("c = " + c, barW*2 + barW/2, height - c - 10);
text("d = " + d, barW*3 + barW/2, height - d - 10);
text("e = " + e, barW*4 + barW/2, height - e - 10);
text("f = " + f, barW*5 + barW/2, height - f - 10);

これを、配列で書き換えてみましょう。コードはかなり短くなります。こういった用途も、配列の利点を表しています。

PFont myFont;    //フォント用変数
int[] value = {10, 14, 20, 80, 2, 18};
String[] s = {"a", "b", "c", "d", "e", "f"};

float barW;  //バーの横幅

size(400, 400);
background(255);

myFont = createFont("Arial", 12);    //フォント作成
textFont(myFont, 12);  //テキストのサイズを設定
textAlign(CENTER);

barW = 40;  //バーの横幅を40ピクセルにする

//バーとテキストを描画
for (int i = 0; i < value.length; i ++) {  //value.lenghは配列の要素数を返す

  //バーのx座標, y座標を計算
  float x = barW * i;
  float y = height - value[i];
  
  fill(127);    //グレーで描画
  rect(x, y, barW, value[i]);

  //テキスト表示
  fill(255, 0, 0);    //赤で描画
  text(s[i] + " = " + value[i], x + barW/2, y - 10);
}

次に、もう少し柔軟な表示が可能になるプログラムに書き換えてみます。バーのサイズが画面の横幅に応じて変化します。

PFont myFont;    //フォント用変数
int[] value = {10, 14, 20, 80, 2, 18};
String[] s = {"a", "b", "c", "d", "e", "f"};

float barW;  //バーの横幅

size(400, 400);
background(255);

myFont = createFont("Arial", 12);    //フォント作成
textFont(myFont, 12);  //テキストのサイズを設定
textAlign(CENTER);

barW = width / float(value.length);  //バーの横幅を決定

//バーとテキストを描画
for (int i = 0; i < value.length; i ++) {  //value.lenghは配列の要素数を返す

  //バーのx座標, y座標を計算
  float x = barW * i;
  float y = height - value[i];
  
  fill(127);    //グレーで描画
  rect(x, y, barW, value[i]);

  //テキスト表示
  fill(255, 0, 0);    //赤で描画
  text(s[i] + " = " + value[i], x + barW/2, y - 10);
}

このままだとちょっと高さが低くて差が分かりづらいので、バーの高さを画面の高さに合わせて拡大します。

PFont myFont;    //フォント用変数
int[] value = {10, 14, 20, 80, 2, 18};
String[] s = {"a", "b", "c", "d", "e", "f"};

float barW;  //バーの横幅
float barH;
float resize = 4.0; 

size(400, 400);
background(255);

myFont = createFont("Arial", 12);    //フォント作成
textFont(myFont, 12);  //テキストのサイズを設定
textAlign(CENTER);

barW = width / float(value.length);  //バーの横幅を決定

//バーとテキストを描画
for (int i = 0; i < value.length; i ++) {  //value.lenghは配列の要素数を返す

  //バーのx座標, y座標を計算
  float x = barW * i;
  float y = height - value[i] * resize;
  barH = value[i] * resize;

  fill(127);    //グレーで描画
  rect(x, y, barW, barH);

  //テキスト表示
  fill(255, 0, 0);    //赤で描画
  text(s[i] + " = " + value[i], x + barW/2, y - 10);
}

さらに、左右と下の余白、バー同士の余白も作ってみましょう。

PFont myFont;    //フォント用変数
int[] value = {10, 14, 20, 80, 2, 18};
String[] s = {"a", "b", "c", "d", "e", "f"};

float barW;  //バーの横幅
float barH;
float resize = 3.0; 
float margin = 20.0;  //左右と底辺の余白
float space = 4.0;

size(400, 400);
background(255);

myFont = createFont("Arial", 12);    //フォント作成
textFont(myFont, 12);  //テキストのサイズを設定
textAlign(CENTER);

barW = (width - margin * 2 - (value.length - 1) * space) / float(value.length);  //バーの横幅を決定

//バーとテキストを描画
for (int i = 0; i < value.length; i ++) {  //value.lenghは配列の要素数を返す
  
  //バーのx座標, y座標を計算
  float x = (barW + space) * i + margin;
  float y = height - value[i] * resize - margin;
  barH = value[i] * resize;
  
  fill(127);    //グレーで描画
  rect(x, y, barW, barH);

  //テキスト表示
  fill(255, 0, 0);    //赤で描画
  text(s[i] + " = " + value[i], x + barW/2, y - 10);
}