山口大学医学部附属病院に常設されるデジタルアートを制作しました。
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/09_re-pixcells_01-1024x682.jpg)
山口県を代表する医療・研究施設である山口大学医学部附属病院の再開発事業にともない、再生、生きる力、エネルギー、命の循環を表現する多彩なアートワークで医療施設の「おもてなしの心」を発信するプロジェクトの一環として、山口県で撮影された写真を使用したデジタルアートを制作しました。
プロジェクトページ / ArtPlace Inc.
https://www.artplace.co.jp/project/yamaguchiuniv_hospital_bc_buildings/
–
山口県の自然環境や地域性を捉えた20枚の写真を使用し四季の移り変わりや循環を表現している。1ループが約25分のプログラミングによって、写真を構成するピクセルが細胞のように次々と生まれ分解され動き出し、「かさね」と「ずらし」を繰り返し、新たな形と豊かな色彩を生成する。その変化が植物の生長や自然のエネルギーを表して、人々が少しの間立ち止まり、人生の始まりと再生という力強いメッセージを感じる場所となっている。本作品はB棟1階のクロスラウンジに設置され、人びとの動きを誘導するアイキャッチとしての役割も果たしている。
制作は山口情報芸術センター[YCAM]の協力のもと、写真家 谷康弘さんをはじめ、山口大学写真部の坂口歩さん、原田誠朗さん、山本夏海さん、吉川優妃乃さんによって撮影された写真を使用している。
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/09_re-pixcells_02-1024x682.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/09_re-pixcells_03.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/09_re-pixcells_04.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/09_re-pixcells_05.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/09_re-pixcells_06.jpg)
デジタルアート / 24分40秒 / 2024
事業主: 国立大学法人 山口大学医学部附属病院
所在地: 山口県宇部市南小串1丁目1-1
協力: 山口情報芸術センター [YCAM], 山口大学写真部
撮影: 谷 康弘
Art Direction: ArtPlace Inc.
process
アニメーションについて
今回の作品は、画像ピクセルを操作・分解して、新たな絵を生成する試みから生まれました。
1枚の写真を元に、ピクセルを再構成したイメージを10~20パターンほど次々と変化させながら繋げていきます。最後までいくと次の画像になり同じように繰り返します。変化する途中にも、新たな形が生まれます。
ver. 1
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_00_base-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_01_RGB-to-Z-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_02_Displace-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_03_Double-Sort-683x1024.jpg)
a. 元画像
b. RGB to Z: ピクセルのR・G・Bの値を、それぞれ奥行きにマッピングさせ、前から見るとそれらが重なる
c. Displace: 直交座標を球面座標に変換し、中心からの距離は明度を利用した
d. Double Sort: eのソート値をさらに明度でソートした
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_04_Sort-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_05_sinBoxes-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_06_Boxes-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_07_Connect-Line-683x1024.jpg)
e. Sort: 列ごとにピクセルの色の値を色相順に並べ替えた
f. sinBoxes: オブジェクトのz座標をsin値に変換
g. Boxes: 明度順にオブジェクトを手前から描画し、前後でループするアニメーションを加えた
h. Connect Line: グリッド状に分割した画面上の点の距離の近いものを繋ぐ
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_08_Connect-HUE-1-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_09_1_3D-color-circle_-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_09_2_Hue-Circle2-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_10_1_Hue-Circle1--683x1024.jpg)
i. Connect HUE: グリッド状に分割した画面上の点を、色相の近いものでグループ化し、つないで重ねた
j-1. 3D color circle: 色相環を立体化、半径は明度、奥行きは彩度にマッピング
j-2. Hue Circle2: 8分割した色相ごとに円を形成し、y座標で並べる
k-1. Hue Circle1: 8分割した色相別ごと円を形成し、原点を中心に重ねる
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_10_2_Treemap-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_11_Colored-Fabric-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_12_3D-color-circle2_-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_13_RGB-Triangle-683x1024.jpg)
k-2. Treemap: 色相ごとにツリーマップを作成。均等に分割し選んだ順の色をで描画
l. Colored Fabric: 色相ごとに横分割し描画
m. 3D color circle2: j-1をベースに、色相ごとに円形に均等配置し、重ねる
n. RGB Triangle: 円を3等分してR・G・Bの領域とし、各領域をさらに0〜255に分割。取得したそれぞれのピクセルのRGB値で繋ぐ
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_14_Split-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_14_2-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_00_base-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_15_Flaking-683x1024.jpg)
o. Split: 任意のピクセル数おきに縦に並べ、ランダムに選んだ縦列1と縦列2を重ねて結ぶ
p. Z – Waves: 奥行きを明度にマッピングした14と元画像を重ねて回転
a. 元画像に戻る
q. Flaking: ピクセルが徐々に剥落し、次の画像が緩やかに表出する
ver.1 test animation
分解されたピクセルが個々の生き物のように意思を持って動き回り、様々な形を形成するようすは、この世界に通じるものを感じます。
最終的には、尺の関係等もあり、上記の後半を削りj-1から元のaに戻っていくようなアニメーションになりました。(ver.2)
ver.1のアニメーションは Life-forms of colors にて発表しています。(後日公開)
ver. 2
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_09_1_3D-color-circle_-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_15_Displace-Dots-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_00_base-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_15_Flaking-683x1024.jpg)
j-1. 3D color circle: 色相環を立体化、半径は明度、奥行きは彩度にマッピング
c-2. Displace Dots: cの点描
a. 元画像に戻る
q. Flaking: ピクセルが徐々に剥落し、次の画像が緩やかに表出する
c-2 → a の元画像に戻る箇所は、いくつか作成し、下記パターンの最初のものになりました。
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_15_las1-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_15_las2-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_15_las3-683x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process_15_las4-683x1024.jpg)
ver.2 test animation i以降
写真選びと制作
写真は、写真家 谷康弘さん、山口大学写真部の坂口歩さん、原田誠朗さん、山本夏海さん、吉川優妃乃さんに撮影していただきました。約500枚の中から形や全体のバランスを検討しつつ選びましたが、どの写真も素晴らしく選ぶのはとても心苦しい作業でもありました。
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process1_capture_a2-1024x866.jpg)
並行して、写真を1枚ずつ、プログラムに入れて書き出しています。分解することで、見えないけれど実は存在している「色」が表出することがあり、自分の認識と実際の存在との差異に気づかされました。
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process1_capture_b2-1024x617.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process1_capture_c-981x1024.jpg)
最終的に選ばれた写真は、春・夏・秋・冬で5枚ずつの合計20枚です。
1写真につき約1分30秒のアニメーションとなり、それが連続して繋がり循環します。
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process2_map_a-1024x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process2_map_b-1024x849.jpg)
最終的に選んだ写真と、それぞれの写真がつくる形
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process3_imgAll_01-698x1024.jpg)
![](https://blockingwood.com/contents/wp-content/uploads/2024/07/re-pixcells_process3_imgAll_02-698x1024.jpg)