芸大 - 情報編集(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; } }