情報処理学会 インタラクション 2019
IPSJ Interaction 2019

1D-63
2019/3/6

Twitter ユーザー情報によるジェネラティブアート生成の試み
中村 翔太†1 菊池 司†2
概要：近年，コンピュータ技術の発展により高速な計算を短時間で行うことができるようになったことにより，コンピュータを用いてアート作品を生成するメディア・アートと呼ばれる分野が誕生した．また，インターネット上では様々な情報のやり取りがされており，中でも SNS の一つである Twitter は日本国内で 4500 万人以上のユーザーが日々情報をやり取りしている．本研究では，ユーザーが日常生活でどれくらい Twitter でやり取りをしているか，普段のインターネット利用では視覚的に得ることができない情報を可視化することで，Twitter のユーザー情報をメディア・アート作品として視覚的に知ることができるこれまでに無いジェネラティブアートを生成することを試みた．

1. はじめに
近年，インターネット技術の発展により様々な情報がやり取りされるようになった．また，コンピュータ技術の発ルゴリズムに自然現象をジェネラティブアート生成のための乱数として付加することで，今までに無い新しい生成手法を提案している．
(2) ジェネラティブアートによる髪の流れの表現

展により高速な計算を短時間で行うことができるようにな

厚木らの研究では，髪の毛の動きをコンピュータグラフったことにより，コンピュータを用いてアート作品を生成

ィックス(CG)で再現し，その動きを複数フレームを重ねてするメディア・アートと呼ばれる分野が誕生した．メディ

描画する[4]．しかし，髪の毛の動きを重ねるため，髪の本

ア・アートという名称は，一般的にはコンピュータをはじ

数が多すぎると個々の動きを視認することが困難になるためとする同時代のメディア・テクノロジーを使用した美術

め，髪の毛の間引きを乱数とすることによってジェネラテ作品を総称するものとして使用されている[1]．中でも数学ィブアートらしい表現を実現している．

的かつ無作為的かつ自律性のあるアルゴリズムによって生成する芸術作品として，ジェネラティブアートと呼ばれる

3. 提案手法ものがある[2]．ジェネラティブアートは，基本的なアルゴ

3.1 基本構成

リズムに加え何かしらの乱数を付加することによって偶発的に生まれる美を追求する作品であり，既存作品の多くは生物学的な事象や物理学的な事象を乱数として付加する作品が多く存在する．
本研究では，インターネット上でやり取りされている情報の中でも日本国内で 4500 万人以上のユーザーが日々やり取りを行こなっている SNS である Twitter[3]のユーザー

図 1 基本構成

情報に着目し，その情報からジェネラティブアートを生成
す る ．こ れ に よ り ，ユ ー ザ ー が 日常 生 活 で ど れく ら い

本研究ではビジュアライズに TouchDesigner を使用した.

Twitter でやり取りをしているか，普段のインターネット利体験者は作品専用の Web サイトから Twitter に OAuth 認

用では視覚的に得ることができない情報を可視化すること証を行う．認証後にアクセストークンが発行され，Twitterで，Twitter のユーザー情報をメディア・アート作品としてAPI にユーザー情報取得のリクエストを行う．Twitter API

視覚的に知ることができるこれまでに無いジェネラティブから取得した情報を WebSocket 通信を用いて JSON 形式アートを生成することができるのではないかと考えた．

で TouchDesigner へ送信し，取得したデータからジェネラ

2. 関連研究

ティブアートの生成を行った（図 1）．
3.2 バックエンドの実装(1) Sootoid: 煤によるジェネラティブアート生成の試み

バックエンドの実装には JavaScript の中でもサーバーの羽田らの研究では，蝋燭によって生じる煤を描画に利用

実装用に開発された Node.js を使用した．フレームワークする手法を提案している[2]．予めプログラミングされたア†1 東京工科大学 メディア学部†2 東京工科大学© 2019 Information Processing Society of Japan392

情報処理学会 インタラクション 2019
IPSJ Interaction 2019には JavaScript のフルスタックフレームワークであるExpress を使用した．

1D-63
2019/3/6

本作品を通じて，体験者が自身の Twitter アカウントの情報や存在について考えられるような作品を制作した．

本研究で利用する Twitter のアカウント情報は，フォロー数，フォロワー数，ツイート数，いいね数，直近 200 ツイートのリツイート数の合計とした．

3.5 ビジュアルの実装
3.5.1 バックエンドからのデータ取得
バックエンド側から送信されてきたユーザー情報のデー

Twitter API から取得してきたデータを TouchDesigner のタを TouchDesigner 上で扱いやすくするために，Python をConstant TOP の RGB 値を定めるパラメーターに代入する

用いて JSON 形式から Table DAT 形式にパースを行った．

ために，0~1 の浮動小数点数にパースを行う．パースを行

Table DAT 形式とは TouchDesigner 上で扱える配列のようう際に予めそれぞれの要素に対して最大値を指定し，そのなものである[5]．

範囲を元に式(1)によってパースを行った．Value はパース

3.5.2 色の生成する値，fromMin は変換前の最小値，fromMax は変換前のWebSocket 通信により取得してきたデータを元に色の最大値，toMin は変換後の最小値，toMax は変換後の最大生成を行う．RBG それぞれの色を生成するため RGB それ値を表す．

ぞれに取得したパースされたデータを代入することで色の決定を行った．生成した RGB それぞれの色を作品全体の(value − fromMin) ∗(toMax − toMin)+ toMin (1)(fromMax − fromMin)

色味を決めるためのベースカラーは Average 合成，その他の各要素は Over 合成を行いすべての要素を同様の手順で色の生成を行った．合成方法は理論に基づくものでは無く式(1)の結果を TouchDesigner で扱いやすくする為に小数第 3 位以下の丸め込みを行った．
TouchDesigner との通信には WebSocket を使用した．

演出意図で決定を行った．
3.5.3 ノイズの生成取得してきたデータを Seed 値としてノイズを生成した．

WebSocket とは，2011 年に RFC6455 で提案されたサーノイズを生成する際，作品に動きを持たせる為に，以下のバーとクライアントの双方向通信用のプロトコルであり，式(2)によって Z 軸方向の位置決定を行った．

HTTP/S 通信が確立されていれば，非同期かつ双方向の通信が可能になる． WebSocket で TouchDesigner に送信す(2)

TranslateZ = 現在のフレーム番号 ∗ 0.1

るデー タ形 式は JSON 形 式とし ，TouchDesigner とのWebSocket 通信が確立かつ Twitter API からデータ取得を行ったことを判別し，1 秒間に 1 度 TouchDesigner にパー

3.5.4 色とノイズの合成
3.5.2 で抽出した色と 3.5.3 で生成したノイズを加算合成スした値を送信した.

することでノイズに抽出した色を合成した．しかし，ベー3.3 フロントエンドの実装

スカラーとノイズを合成してしまうと作品全体の色味だけ体験者がアクセスし Twitter に OAuth 認証を行うためのWeb サイトの実装を行った．
フロントエンドの実装には，EJS を使用した．本研究では ， EJS を 使 用 す る こ と に よ っ て バ ッ ク エ ン ド 側 がSession に一時的に保存したユーザーのログイン状態やでなくノイズ形状の決定にも大きく作用する事になってしまうため，演出上各要素のノイズの重なりを表現できなくなってしまうためノイズとの合成を行わなかった．

4. 最終結果

Twitter API から取得してきたデータなどのクライアント情

本稿では表 1，2 のような情報を持った Twitter アカウン

報を簡単に参照することができるため EJS を採用した．

トを使用し，図 2，3 のようなジェネラティブアートを生また，重なり合っている各要素を個別で鑑賞できるよう成することができた．にするための UI を実装した．
3.4 作品コンセプト

表1

図 2 を生成したアカウントの情報

Twitter 上には有名人やインフルエンサーなどの莫大なフォロワー数

210フォロワーを持つアカウントや，個人がライフログとしてフォロー数207使用する個人用アカウントなど様々なアカウントが存在す

ツイート数

18534

る．これらのアカウントからツイートされる内容は多岐にいいね数

11373

わたり，ツイート頻度もアカウントによって様々である．

直近 200 ツイートの RT 数0

このように様々な情報をもつ Twitter アカウントを色とノイズで表現することによって，インターネット上には様々な情報が揺らめいていることや，やり取りされている情報の多さを表現した．

© 2019 Information Processing Society of Japan393

情報処理学会 インタラクション 2019
IPSJ Interaction 2019

表2

図 3 を生成したアカウントの情報

1D-63
2019/3/6

アンケートの結果から，本作品は概ね今までに無いジェネ

フォロワー数1414

ラティブアートを生成することができたと考える．また生

フォロー数

441

成したものを鑑賞することによって概ねの人が体験者自身

ツイート数

31347の SNS アカウントを視覚的な情報として得ることができ，いいね数

32431

その情報を元に自身の SNS 利用について考えさせること直近 200 ツイートの RT 数0ができたと考える．

6. まとめと展望
本研究ではジェネラティブアートの新しい要素を用いた生成手法として Twitter のユーザー情報を利用することを模索した．本研究では色とノイズの生成を Twitter のユーザーを元に生成することによって，体験者ごとに異なった今までに無いジェネラティブアートの生成を目指し，体験者の評価によってこれを示した．
今後の展望として，現状では作品の出力方法がプロジェクターによる平面へのプロジェクションと出力方法の観点での目新しさが無い為，透過ディスプレイやホログラムな
図2

表 1 のアカウントから生成した結果ど近代的な技術を利用したいと考える．

参考文献

図3

表 2 のアカウントから生成した結果

5. 評価・考察[1]久保田晃弘，畠中実 “メディア・アート原論”，フィルムアー
ト社，2018[2]羽田久一，中野亜希人，亀井翔，戸塚大介，“Sootoid: 煤によるジェネラティブアート生成の試み”，芸術科学会論文誌
Vol. 14, No. 5, pp. 220 – 228，2016[3]Twitter Japan, “Twitter Japan 公式アカウント”,
http://www.media.teu.ac.jp/student/project_html/thesis/thesis.
html, 2017[4]厚木麻耶，伊藤貴之，金井 崇，”ジェネラティブアートによる髪の流れの表現”， ITE technical report 42(12), 337-339，
2018[5]松山周平， 松波直秀， ベン・ヴォイト，サムワンズガーデ
ン，Visual Thinking with TouchDesigner – プロが選ぶリア
ルタイムレンダリング＆プロトタイピングの極意，BNN，
2018

今回 20 代~30 代の Twitter を利用している男女 10 名に本作品を体験してもらい評価アンケートに回答してもらった．質問項目として，1)今までに自身の SNS アカウントの情報を用いたメディアアート作品を見たこと・体験したことがあるか，2)今までに自身の SNS アカウントの情報を用いたジェネラティブアート作品を見たこと・体験したことがあるか，3) 本作品を通じて、自身の SNS アカウントの情報を視覚的に知ることができたか，4)本作品が自身のSNS 利用について考えるきっかけになったか，という 4 つの質問に対して 5 段階で回答してもらった．
結果は，1)の質問に対して 80%の人が初めて体験したと回答した．2)の質問に対して 90%の人が本作品のようなジェネラティブアート作品を初めて体験したと回答した．3)の質問に対しては 90％の人が本作品を通じて，自身のSNS(Twitter)アカウント情報を視覚的に知ることができたと回答した．4)の質問に対して 90%の人が本作品が自身のSNS の利用について考えるきっかけとなったと回答した．

© 2019 Information Processing Society of Japan394