1. TOP
  2. BLOG
  3. EVENT
  4. 芸術科学会 NICOGRAPH 2019で可視化の研究を発表して優秀ポスター賞をいただいた話

芸術科学会 NICOGRAPH 2019で可視化の研究を発表して優秀ポスター賞をいただいた話

2019.11.14


こんにちは。
エンジニアの遠藤です。

自分は大学時代に、HCIやインタラクティブメディア、メディアアート分野の研究室を出ているのですが、
卒業後も休日に研究や制作を継続しています。
今回は名古屋で開催された、NICOGRAPHという学会で発表した際に、
優秀ポスター賞をいただいたので、発表内容について書いていきたいと思います!
あと、できるだけ軽い感じで書いていきたいなと思っているので、軽い気持ちで読んでいただけたら嬉しいです。

NICOGRAPHとは

iOS の画像 (6)

NICOGRAPHとは芸術科学会という学会が主催している大会です。
現在は年に一回、11月上旬に開催されています。
発表される研究分野はこんな感じです。

CG、形状モデリング、レンダリング、アニメーション、ゲーム、可視化、CAD/CAE/CAM、画像処理技術、音声処理技術、音楽処理技術、ヒューマンインタフェース、バーチャルリアリティ、エージェントシステム、CG システム、マルチメディアシステム、音楽コンテンツ、インタラクティブアートコンテンツ、アニメーションコンテンツ、メディアアートコンテンツ、インスタレーションコンテンツ、モダンアートコンテンツ、アート評論など

自分は去年に引き続き2回目の参加でした。
今年は名古屋での開催だったので「手羽先をつまみながらビールを飲みたい!」という思いで
原稿執筆とポスター制作を頑張りました。
会場となった名古屋市立大学の北千種キャンパスは、周りも落ち着いていて、とても綺麗なキャンパスでした。

発表内容

発表内容は「緋色の習作: 色彩語に用いられる漢字と色彩語が表す色の関係性に関する可視化手法の提案と考察」という、
ものすごく長いタイトル(今回発表された研究の中で最長)になってます。
色彩語に使われる漢字に関する可視化作品を制作して、考察する形で研究としてまとめました。
作品はN0. 1からNo. 3までの3つの作品で構成されています。
こちらで公開してるので、よかったら触ってみてください(環境によっては少し重いと思います)。
一応、原稿に書いていた「はじめに」の内容はこんな感じです。

色を表記する方法として,色彩語を用いることがある.
たとえばRGB値で(194, 0, 36)と表される色は,深緋(こきあけ)という色彩語で表される.
上記の値から暗く濃い赤色だということは想像できるが,色を数値で扱う習慣がなければ難しいと考えられる.
しかし,深緋という色彩語が,「深」と「緋」の二つの漢字から構成されていることに注目すると,
日本語話者には「深」という漢字からは暗さや濃さ,
「緋」という漢字からは赤に近い色のような感覚が想起されると考えられる.
そこで,本研究では色彩語を漢字に分解することで,
色彩語に用いられる漢字と色の関係性を可視化した作品「緋色の習作」を制作し,その関係性について考察する.

研究の背景としてはこんな感じですが、
この記事では技術ブログらしく、実装について書いていきたいと思います。
ただ、各ライブラリの使い方について書いてしまうとすごい量になってしまうので、大まかな流れの説明になります。
公式サイトへのリンクを貼っておくので、ご興味がある方はそちらをご覧ください。

実装

データの保存や分析、整形はPythonで実装しました。
最終的な可視化作品は、静的に公開したのですが、
Webフレームワークを使ってWebAPIを実装しながら試作しました。
使用したライブラリと用途はこんな感じです。

データ収集

まず、Oratorを使って、Wikipediaのデータを元に、色彩語と漢字のモデルを実装します。
Wikipediaのデータから「色彩語」と「色彩」「色彩語を分解した漢字」をDBに保存します。
Wikipediaのデータでは、一つの色彩に対して複数の色彩語が割り当てられているので、これらは一対多の関係とします。

PythonのORMだとSQLAlchemyが有名だと思いますが、今回はOratorを使用することにしました。
日本語の記事だと、SQLAlchemyの情報が多いのですが、
前々からSQLAlchemyで書くとコード複雑になって使いにくいと思っていました。
そこで、いくつかのORMを調べてみたところ、PeeweeとOratorを発見し、
OratorはLaravel風のORMということもあったので試しに使ってみました。
実際に触ってみると、わからない所はコードを読んだり、
Laravelのリファレンスを読んだらなんとかなったので、とても使いやすかったです!

データ分析

保存できたらあとは、NetworkX、SciPy、scikit-learn、PyClusteringを使って分析した結果を、
ひたすらMatplotlibで可視化しました。
観察した内容は「RGB値を使ったクラスタリング結果」や
「 同一の漢字を使ってる色彩語のグラフ構造」、「漢字の平均色」などです。

k-meansを使ったクラスタリングはscikit-learnでもできるのですが、
x-meansを使って、クラスタ数を自動推定してみたかったので、PyClusteringを使ってみました。
x-meansについては、こちらの記事で詳しく紹介されているので参考にさせていただきました。
クラスタ数を自動推定するX-means法を調べてみた

ちなみにグラフの特徴を観察する際にはNetworkXの機能が便利です。
例えば、媒介中心性はbetweenness_centrality()を使うことで計算できます。
他にも色々な特徴量が簡単に計算できます。

データ整形

面白そうな結果が見られたら、作品用にWebAPIを実装して、試しにJSを使ってWebブラウザで可視化してみました。
今回は「同一の漢字を使っている色彩語のグラフ構造」と「漢字が使われている色彩語の平均色」をJSONで出力しました。
「同一の漢字を使っている色彩語のグラフ構造」のフォーマットは以下のようになってます。
linksのsourceとtargetがnodesのidを指しています。
今回扱うのは無向グラフですが、便宜上sourceとtargetとなってます。
nodesのbetweenness_centralityは媒介中心性です。

{
  "links": [
    {
      "source": 1, 
      "target": 2
    }
  ],
  "nodes": [
    {
      "betweenness_centrality": 0.0, 
      "color": "#60B49F", 
      "id": 1, 
      "name": "青磁色"
    },
    {
      "betweenness_centrality": 0.0, 
      "color": "#60B49F", 
      "id": 2, 
      "name": "青瓷色"
    }
  ]
}

次に「漢字が使われている色彩語の平均色」のフォーマットは以下のようになってます。
RGBの16進数表記は、RGBと被ってしまいますが、
HTMLでレンダリングすることを考えた結果、そのまま16進数表記も返すことにしました。
hlsとhsvは名前の通りHLSとHSVです。
Pythonの標準ライブラリcolorsysを使って、RGBから簡単に変換することができます。

{
  "kanjis": [
  {
    "hex": "#0A0017",
    "hls": [266.0869565217391, 4.509803921568627, 100.0],
    "hsv": [266.0869565217391, 100.0, 9.019607843137255],
    "name": "漆",
    "rgb": [10, 0, 23]
    }
  ]
}

可視化の実装

可視化部分はThree.jsやTween.js、D3.jsなどを使って実装しました。
こだわった箇所は、No. 1では漢字が常にカメラに対して正対する点や、
No. 2とNo. 3では同じデータ構造でも違ったデータの見え方にした点です。
Three.jsでカメラに正対するようにするコードはobj.lookAt(camera.position)みたいな感じで実装できます。

一番、悩んだのは配色です。
情報可視化の際には、情報提示のための要素として、
「位置」「大きさ」「形」「色」「動き」などを使うと思いますが、
今回の作品はテーマとして「色」を扱っていることもあり、
「背景色を単色にしたら各要素が見えにくい」「背景色によって各要素の色の見え方が変わる」
などといった問題がありました。
背景色については今でも思うところがあるので、
次の制作の際にはもう少し違った見せ方をしていきたいと思ってます。

フロントのソースは、GitHubで公開してます(雑なコードですみません)。

まとめ

nico2019

今回は学会と名古屋を満喫できただけでなく、素晴らしい賞までいただき、とても充実した学会発表でした。
可視化作品、可視化研究という形で現状の考えを整理して発表できたのは良かったなと思います。
また、学会でも様々な方からご意見を頂くことができました。
今後も楽しみながら、この研究を発展させていきたいなと思っています。
写真は懇親会が行われた料亭 松楓閣さんです。

長くなってしまいましたが、今回はこの辺で。
ではでは。