yoppa.org


immediate bitwave

芸大 - 情報編集(Web) 2013

Processingによるネットワーク情報のビジュアライズ

今回は、最終課題として出題した「東京藝術大学のネットワーク情報のビジュアライズ」という課題に向けて、どのようにして制作していけばよいのか、その方法について考えていきます。実際のProcessingのコードの内容を解説しながら、その方法について解説していきます。

サンプルファイルのダウンロード

Processingのソースコードは下記のリンクからダウンロードしてください。

example01: データを読み込む

JSONArray values;

void setup() {

  values = loadJSONArray("packets.json");

  for (int i = 0; i < values.size(); i++) {

    JSONObject packet = values.getJSONObject(i); 

    int year = packet.getInt("year"); 
    int month = packet.getInt("month"); 
    int day = packet.getInt("day"); 
    int hour = packet.getInt("hour"); 
    int min = packet.getInt("min"); 
    int InOctets = packet.getInt("InOctets");
    int OutOctets = packet.getInt("OutOctets");

    print("year: " + year + ", "); 
    print("month: " + month + ", "); 
    print("day: " + day + ", "); 
    print("hour: " + hour + ", "); 
    print("min: " + min + ", "); 
    print("InOctets: " + InOctets + ", ");  
    println("OutOctets: " + OutOctets);
  }
}

example02: 情報を画面に表示

JSONArray values;

void setup() {
  size(800, 600);
  frameRate(30);
  values = loadJSONArray("packets.json");
  noStroke();
}

void draw() {
  background(31);
  fill(255);
  int num = frameCount % values.size();
  JSONObject packet = values.getJSONObject(num);
  int year = packet.getInt("year"); 
  int month = packet.getInt("month"); 
  int day = packet.getInt("day"); 
  int hour = packet.getInt("hour"); 
  int min = packet.getInt("min"); 
  int InOctets = packet.getInt("InOctets");
  int OutOctets = packet.getInt("OutOctets");
  text(year + "/" + month + "/" + day + ", " + hour + ":" + min, 20, 30);
  text("InOctets: " + InOctets + ", " + "OutOctets: " + OutOctets, 20, 50);

  float barWidth = map(num, 0, values.size(), 0, width);
  fill(127);
  rect(0, 0, barWidth, 5);
}

example03: 円の大きさで表現

JSONArray values;

void setup() {
  size(800, 600);
  frameRate(30);
  stroke(127);
  values = loadJSONArray("packets.json");
}

void draw() {
  background(31);
  fill(255);
  int num = frameCount % values.size();
  JSONObject packet = values.getJSONObject(num);
  int year = packet.getInt("year"); 
  int month = packet.getInt("month"); 
  int day = packet.getInt("day"); 
  int hour = packet.getInt("hour"); 
  int min = packet.getInt("min"); 
  int InOctets = packet.getInt("InOctets");
  int OutOctets = packet.getInt("OutOctets");
  text(year + "/" + month + "/" + day + ", " + hour + ":" + min, 20, 30);
  text("InOctets: " + InOctets + ", " + "OutOctets: " + OutOctets, 20, 50);
  
  float barWidth = map(num, 0, values.size(), 0, width);
  fill(127);
  rect(0, 0, barWidth, 5);

  float in = map(InOctets, 0, 40000000, 0, height);
  fill(0, 0, 255, 127);
  ellipse(width/5 * 2, height/2, in, in);

  float out = map(OutOctets, 0, 40000000, 0, height);
  fill(255, 0, 0, 127);
  ellipse(width/5 * 3, height/2, out, out);
}

example04: 色で表現

JSONArray values;

void setup() {

  size(800, 600);
  frameRate(30);
  noStroke();
  values = loadJSONArray("packets.json");
}

void draw() {
  background(0);

  int num = frameCount % values.size();
  JSONObject packet = values.getJSONObject(num);
  int year = packet.getInt("year"); 
  int month = packet.getInt("month"); 
  int day = packet.getInt("day"); 
  int hour = packet.getInt("hour"); 
  int min = packet.getInt("min"); 
  int InOctets = packet.getInt("InOctets");
  int OutOctets = packet.getInt("OutOctets");

  float in = map(InOctets, 0, 40000000, 0, 255);
  fill(0, 0, 255, in);
  rect(0, 0, width/2, height);

  float out = map(OutOctets, 0, 40000000, 0, 255);
  fill(255, 0, 0, out);
  rect(width/2, 0, width/2, height);

  float barWidth = map(num, 0, values.size(), 0, width);
  fill(127);
  rect(0, 0, barWidth, 5);
  
  fill(255);
  text(year + "/" + month + "/" + day + ", " + hour + ":" + min, 20, 30);
  text("InOctets: " + InOctets + ", " + "OutOctets: " + OutOctets, 20, 50);
}

example05: パーティクル1

ArrayList<Particle> particles;
JSONArray values;

void setup() {
  size(1024, 768);
  frameRate(30);
  noStroke();
  values = loadJSONArray("packets.json");
  particles = new ArrayList<Particle>();
  background(0);
}

void draw() {
  noStroke();
  fill(0, 0, 0, 20);
  rect(0, 0, width, height);

  fill(0);
  rect(0, 0, width, 30);

  int num = frameCount / 60 % values.size();
  JSONObject packet = values.getJSONObject(num);
  int year = packet.getInt("year"); 
  int month = packet.getInt("month"); 
  int day = packet.getInt("day"); 
  int hour = packet.getInt("hour"); 
  int min = packet.getInt("min"); 
  int InOctets = packet.getInt("InOctets");
  int OutOctets = packet.getInt("OutOctets");

  float barWidth = map(num, 0, values.size(), 0, width);
  fill(127);
  noStroke();
  rect(0, 0, barWidth, 5);

  fill(255);
  text(year + "/" + month + "/" + day + ", " + hour + ":" + min 
  + ", InOctets: " + InOctets + ", " + "OutOctets: " + OutOctets, 20, 18);

  float in = map(InOctets, 0, 100000000, 0, 10);
  float out = map(OutOctets, 0, 100000000, 0, 10);

  for (int i = 0; i < int(in); i++) {
    particles.add(
    new Particle(new PVector(0, random(30,height)), new PVector(random(3, 20), 0))
      );
  }
  for (int i = 0; i < int(out); i++) {
    particles.add(
    new Particle(new PVector(width, random(30,height)), new PVector(random(-20, -3), 0))
      );
  }
  
  stroke(255);
  for (int i = particles.size()-1; i >= 0; i--) { 
    Particle pt = particles.get(i);
    pt.display();
    if (pt.finished) {
      particles.remove(i);
    }
  }
}

class Particle {
  PVector location;
  PVector velocity;
  boolean finished;
  
  Particle(PVector _location, PVector _velocity) {
    location = _location;
    velocity = _velocity;
    finished = false;
  }

  void display() {
    point(location.x, location.y);
    //point(random(width), random(height));
    location.add(velocity);
    if (location.x > width || location.x < 0) {
      finished = true;
    }    
  }
  
  boolean finished(){
    return finished;
  }
}

example06: パーティクル2

ArrayList<Particle> particles;
JSONArray values;

void setup() {
  size(1024, 768);
  frameRate(30);
  noStroke();
  values = loadJSONArray("packets.json");
  particles = new ArrayList<Particle>();
  background(0);
}

void draw() {
  noStroke();
  fill(0, 0, 0, 20);
  rect(0, 0, width, height);

  int num = frameCount / 10 % values.size();
  JSONObject packet = values.getJSONObject(num);
  int year = packet.getInt("year"); 
  int month = packet.getInt("month"); 
  int day = packet.getInt("day"); 
  int hour = packet.getInt("hour"); 
  int min = packet.getInt("min"); 
  int InOctets = packet.getInt("InOctets");
  int OutOctets = packet.getInt("OutOctets");

  float in = map(InOctets, 0, 100000000, 0, 20);
  float out = map(OutOctets, 0, 100000000, 0, 20);

  for (int i = 0; i < int(in); i++) {
    particles.add(
    new Particle(new PVector(random(width), 0), new PVector(0, random(3, 10)))
      );
  }
  for (int i = 0; i < int(out); i++) {
    particles.add(
    new Particle(new PVector(random(width), height), new PVector(0, random(-10, -3)))
      );
  }

  stroke(255);
  for (int i = particles.size()-1; i >= 0; i--) { 
    Particle pt = particles.get(i);
    pt.display();
    if (pt.finished) {
      particles.remove(i);
    }
  }

  noStroke();
  fill(0);
  rect(0, 0, width, 30);

  float barWidth = map(num, 0, values.size(), 0, width);
  fill(127);
  noStroke();
  rect(0, 0, barWidth, 5);

  fill(255);
  text(year + "/" + month + "/" + day + ", " + hour + ":" + min 
    + ", InOctets: " + InOctets + ", " + "OutOctets: " + OutOctets, 20, 18);
}

class Particle {
  PVector location;
  PVector velocity;
  boolean finished;

  Particle(PVector _location, PVector _velocity) {
    location = _location;
    velocity = _velocity;
    finished = false;
  }

  void display() {
    point(location.x, location.y);
    //point(random(width), random(height));
    location.add(velocity);
    if (location.x > width || location.x < 0) {
      finished = true;
    }   
    if (location.y > height || location.y < 0) {
      finished = true;
    }
  }

  boolean finished() {
    return finished;
  }
}