「proce55ing-gr02」の編集履歴（バックアップ）一覧はこちら
「proce55ing-gr02」(2009/01/29 (木) 18:00:27) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
＊Processingでgraph 02
『ビジュアライジング・データ Processingによる情報視覚化手法』
#amazon(4873113784)
を見ながらグラフを書いてみようと思います。
参考：pp.239-243
&bold(){使うもの：}Processing
----
・ここでは、ハックルベリーフィンの物語に用いられている単語を視覚化します。単語と単語が隣同士の場合に、エッジを描きます。
出来上がりはこんなんです。ゴチャゴチャしています。
#image(graph03.gif,center)
・作り方
(1) [[http://www.benfry.com/writing/graphlayout/huckfinn.txt]]からダウンロードしたテキストを、
(2) 「Sketch」＞「Add file...」で選択します。
(3) 前回のプログラムにちょっと変更を加える。
→プログラムは[[こちら>proce55ing-gr02/pg01]]
・はまりやすい？エラー
"phrase"を"phrases"と書いてるのに気付かなかった…
----
#center(){◆ ◆ ◆}
----
・次に、ノードを四角の中に単語名を記述するのではなく、単なる丸で表現します。こんなんなります。シンプル、だけど何を表しているのやら。
#image(graph04.gif,center)
・作り方
(1) 先ほどのプログラム中、Nodeクラスのdraw() を以下のように書き換えます。これは一番下にあります。
#highlight(c){{void draw(){
fill(nodeColor);
stroke(0);
strokeWeight(0.5);
ellipse(x, y, 6, 6);
}
}}
----
#center(){◆ ◆ ◆}
----
・単なる丸で表現したのでは、何が何だかなので、クリックしたところだけ単語を表示することにしますと、こんなんなりました。（ちなみに右クリックで固定解除）
#image(graph05.gif,center)
#center(){意外とモゾモゾしてておもろいです。}
・作り方
(1) 同様に先ほどのプログラム中、Nodeクラスのdraw() を以下のように書き換えます。
#highlight(c){{ void draw(){
if (fixed){
fill(nodeColor);
stroke(0);
strokeWeight(0.5);
rectMode(CORNER);
float w = textWidth(label) + 10;
float h = textAscent() + textDescent() + 4;
rect(x - w/2, y - h/2, w, h);
fill(0);
textAlign(CENTER, CENTER);
text(label, x, y);
}
else {
fill(nodeColor);
stroke(0);
strokeWeight(0.5);
ellipse(x, y, 6, 6);
}
}
}}
----
＊Processingでgraph 02
『ビジュアライジング・データ Processingによる情報視覚化手法』
#amazon(4873113784)
を見ながらグラフを書いてみようと思います。
参考：pp.239-245
&bold(){使うもの：}Processing
----
・ここでは、ハックルベリーフィンの物語に用いられている単語を視覚化します。単語と単語が隣同士の場合に、エッジを描きます。
出来上がりはこんなんです。ゴチャゴチャしています。
#image(graph03.gif,center)
・作り方
(1) [[http://www.benfry.com/writing/graphlayout/huckfinn.txt]]からダウンロードしたテキストを、
(2) 「Sketch」＞「Add file...」で選択します。
(3) 前回のプログラムにちょっと変更を加える。
→プログラムは[[こちら>proce55ing-gr02/pg01]]
・はまりやすい？エラー
"phrase"を"phrases"と書いてるのに気付かなかった…
----
#center(){◆ ◆ ◆}
----
・次に、ノードを四角の中に単語名を記述するのではなく、単なる丸で表現します。こんなんなります。シンプル、だけど何を表しているのやら。
#image(graph04.gif,center)
・作り方
(1) 先ほどのプログラム中、Nodeクラスのdraw() を以下のように書き換えます。これは一番下にあります。
#highlight(c){{void draw(){
fill(nodeColor);
stroke(0);
strokeWeight(0.5);
ellipse(x, y, 6, 6);
}
}}
----
#center(){◆ ◆ ◆}
----
・単なる丸で表現したのでは、何が何だかなので、クリックしたところだけ単語を表示することにしますと、こんなんなりました。（ちなみに右クリックで固定解除）
#image(graph05.gif,center)
#center(){意外とモゾモゾしてておもろいです。}
・作り方
(1) 同様に先ほどのプログラム中、Nodeクラスのdraw() を以下のように書き換えます。
#highlight(c){{ void draw(){
if (fixed){
fill(nodeColor);
stroke(0);
strokeWeight(0.5);
rectMode(CORNER);
float w = textWidth(label) + 10;
float h = textAscent() + textDescent() + 4;
rect(x - w/2, y - h/2, w, h);
fill(0);
textAlign(CENTER, CENTER);
text(label, x, y);
}
else {
fill(nodeColor);
stroke(0);
strokeWeight(0.5);
ellipse(x, y, 6, 6);
}
}
}}
----
