ブラウザーで大量の硬貨を表示する

ドイツのベルリン美術館には，500,000個の硬貨が所蔵されており，紀元前7世紀に小アジアで硬貨が鋳造され始めてから21世紀の現在に至るまでの幅広い種類の硬貨があることで有名です*1．

f:id:atsuhiro-me:20210720192222j:plain

この膨大な所蔵品で戯れることが可能なWebサイトを紹介します．

uclab.fh-potsdam.de

硬貨の一覧

全ての硬貨を国別で表示した様子です．

f:id:atsuhiro-me:20210720192612p:plain

ベルリン美術館だけあって，ドイツやイタリアなど近郊の硬貨の割合が高いことが分かります．

硬貨をクリックすると，その硬貨が中央に残されて，他の硬貨が外側に除かれ，詳細が表示されます．

f:id:atsuhiro-me:20210720192914p:plain

硬貨の情報と画像

硬貨の情報は，https://uclab.fh-potsdam.de/coins/data/csv/coins.csvにまとめられています．2021/07/20現在で26,705種類の硬貨が登録されているようです．

id,title,subdivision,diameter,weight,date_earliest,date_latest,production_country,production_region,production_minting_place,production_material,finding_country,x,y,width
00001,Tarent,"Griechen, Archaik und Klassik",22,7.88,-415,-390,Italy,Kalabrien,Tarent,Silver,,0,0,41
00002,Kaulonia,"Griechen, Archaik und Klassik",30,7.69,-525,-500,Italy,Bruttium,Kaulonia,Silver,,41,0,39
00003,So-(?),"Griechen, Archaik und Klassik",26,5.38,-525,-510,Italy,Lukanien,,Silver,Italy,80,0,40
00004,Kyme,"Griechen, Archaik und Klassik",22,7.54,-420,-380,Italy,Kampanien,Kyme,Silver,,120,0,42
00005,Thurioi,"Griechen, Archaik und Klassik",28,15.89,-400,-350,Italy,Lukanien,Thurioi,Silver,,162,0,43
00007,Metapont,"Griechen, Archaik und Klassik",30,7.99,-540,-500,Italy,Lukanien,Metapont,Silver,,205,0,40
00008,Zankle (Messana),"Griechen, Archaik und Klassik",23,5.65,-520,-500,Italy,Sizilien,Messana-Messina,Silver,,245,0,41
00009,Griechenland: 2002,Moderne seit 1900,"25,7",8.36,2002,2002,Finland,,Vantaa,Cupro-Nickel,,286,0,40
00010,Italien: 2002,Moderne seit 1900,"23,2",7.50,2002,2002,Italy,Latium,Rom,Cupro-Nickel,,326,0,40
...

実はこの画面に表示されている硬貨の画像は全て所蔵品の写真が使われているようです．coins_sprites_xx_y000_z000.pngという画像を読み込んでいます．例えばid 11000から12000の1000個の硬貨の画像はhttps://uclab.fh-potsdam.de/coins/data/images/sprites/coins_sprites_40_11000_12000.pngにまとめられていて，このようになっています．

f:id:atsuhiro-me:20210720193445p:plain

1000個の硬貨の画像を2024px * 800 pxにまとめているので，1個の硬貨の画素数は約1600pxとなります．26,000個の硬貨を表示するには，約42Mpxの画素数が必要で，PixiJSというライブラリを利用してWebGLを使って高速で描画しているそうです．このおかげで，膨大な数の硬貨を滑らかなアニメーションと共に観覧することが可能です．