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

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

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

• サンプルコードのダウンロード(Google Driveにリンク)

example01: データを読み込む

[code lang=”cpp”]
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);
}
}
[/code]

example02: 情報を画面に表示

[code lang=”cpp”]
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);
}
[/code]

example03: 円の大きさで表現

[code lang=”cpp”]
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);
}
[/code]

example04: 色で表現

[code lang=”cpp”]
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);
}
[/code]

example05: パーティクル1

[code lang=”cpp”]
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;
}
}
[/code]

example06: パーティクル2

[code lang=”cpp”]
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;
}
}
[/code]