とある案件の版下の中に棒グラフを入れる機会に遭遇。試しにProcessingを使ってグラフを作ってみたので、そのコードについて。資料はビジュアライジング・データの4章「時系列」を参照。ちょっとした改変しかしておらず、すべてのコードを公開するとオライリーさんに怒られそうなので、改変部分だけを公開。内容は「商品毎に含まれる何かの量(%)を比較する棒グラ...

Basics \ Processing.orgの、CreateImage \ Learning \ Processing.orgより。左右方向のグラデーションで塗りつぶされた正方形を描画するサンプル。PImage img;void setup(){ size(200, 200); img = createImage(120, 120, ARGB); //120px角のイメージとして設定。ARGBのAはアルファ。 for(int i=0; i < img.pixels.length; i++) { //img.pixels.lengthは14...

Basics \ Processing.orgの、Distance2D \ Learning \ Processing.orgより。20ピクセルずつ均等に描画された白い円の半径が、マウスポインタの位置にあわせて、大きくなったり小さくなったりするサンプル。円の大きさはマウスポインタに近い程、小さくなるように設定されている。float max_distance;void setup() { size(200, 200); smooth(); noStroke(); ma...

Basics \ Processing.orgの、Reading \ Learning \ Processing.orgより。写真を読み込んで、左上から順番に、おおげさに液晶ディスプレイらしく描画するサンプル。size(200, 200);noStroke();background(0);PImage img = loadImage("cait.jpg");//写真画像の読み込みimg.loadPixels();//写真画像のロードint eachW = width / img.width; //6pxint eachH = height ...

Basics \ Processing.orgの、ColorWheel \ Learning \ Processing.orgより。カラーホイールを描画するサンプル。ホイールの中心に近づくほど、明度を落としたホイールが描かれる。int segs = 12;//基本12色int steps = 6;//明度の段階float rotAdjust = TWO_PI / segs / 2;//メインループで扇を描画するときに15度ずらすための変数float radius;//ホイール半径flo...

Basics \ Processing.orgの、Brightness \ Learning \ Processing.orgより。画面内にマウスポインタを持っていくと、カラースペクトルに沿った縦長の長方形が描かれるサンプル。マウスのY座標で、長方形の明度が決まる。//変数宣言int barWidth = 5;//長方形の幅int lastBar = -1;//*1.最後に描いた長方形のナンバー(メインループで長方形に左から順番にナンバリ...