Skip to content

ピクセルからサイコロへ:サイコロアートのアルゴリズムを徹底解説

アートとアルゴリズムの出会い

普通の写真が、何百・何千個ものサイコロで構成された立体アートに変わったら、どんな気持ちがするでしょうか。サイコロアートジェネレーターが実現するのは、まさにそれです。そして、その裏側にあるのは、ブラウザ上で動く一連の画像処理アルゴリズム。シンプルながら、驚くほど精緻な仕組みです。

写真をアップロードすると、数秒のうちに変換が完了します。画像のリサイズ、各ピクセルの明るさの解析、サイコロの目への割り当て、そしてプレビューと制作図面の生成。このプロセスを、ひとつひとつ丁寧に見ていきましょう。

ステップ1:画像のリサイズとピクセルサンプリング

グリッドサイズの選択

アルゴリズムが最初に決めるのは「何個のサイコロを使うか」です。この数が、作品の精細さとコストのバランスを左右します。

  • 小サイズグリッド(例:30×40): サイコロ少なめ・コスト控えめ、抽象的でアート感のある仕上がり
  • 中サイズグリッド(例:60×80): 細かさとコストのちょうどいいバランス、多くの場合はこれがおすすめ
  • 大サイズグリッド(例:100×150): 細部まで忠実に再現、必要なサイコロ数も増加

グリッドサイズを決めると、サイコロモザイクジェネレーターはバイリニア補間アルゴリズムを使って元画像をそのピクセル数にリサイズします。ギザギザのない滑らかな縮小が可能な、定評のある手法です。

カラーから明るさへ

カラー写真の各ピクセルは、赤(R)・緑(G)・青(B)の3チャンネルで構成されています。サイコロの目に変換するために、まずこれを一つの「明るさ」の値に変換します。

明るさ = 0.299 × R + 0.587 × G + 0.114 × B

この重みは人間の視覚特性に基づいています。人の目は緑色に最も敏感で、青色に最も鈍感。このバランスを反映した式を使うことで、変換後のグレースケール画像が、元の写真の明暗感を自然に保つことができます。

ステップ2:DiceArtの核心イノベーション――7段階グレースケール

従来手法の限界

標準的なサイコロは1〜6の目しかありません。つまり、従来のサイコロモザイクで表現できるのは6段階の明暗のみです。一方、通常のグレースケール画像は256段階。256段階を6段階に圧縮すると、明暗の情報が大幅に失われ、作品の立体感や細部表現に限界が生じます。

DiceArtはこの問題を、シンプルかつ独創的な方法で解決します。それが「0の目を追加する」というアイデアです。

0の目とは、ピップ(点)がまったく見えない面のこと。白サイコロ(白地に黒点)なら、1つの点を白で塗りつぶした完全な白面。黒サイコロ(黒地に白点)なら、1つの白点を黒で塗りつぶした完全な黒面。これにより、既存の6段階に新たな極値が加わり、7段階へと拡張されます。

このたった1段階の追加が、グレースケール表現力を16.7%向上させ、特にハイライトや微細なトーンのある部分で大きな違いを生み出します。

7段階の明るさマッピング

アルゴリズムは明るさの全範囲を7つの均等なゾーンに分け、各ゾーンをサイコロの目に割り当てます。

サイコロの目のマッピング(白サイコロの場合、明るい順):
- 0の目(白面、最も明るい): 明るさ 約86〜100%
- 1の目:                       明るさ 約72〜85%
- 2の目:                       明るさ 約57〜71%
- 3の目:                       明るさ 約43〜56%
- 4の目:                       明るさ 約28〜42%
- 5の目:                       明るさ 約14〜27%
- 6の目(最も暗い):           明るさ 約0〜13%

各ゾーンが均等な範囲をカバーすることで、特定のサイコロが偏って使われるのを防ぎ、自然なトーン分布が実現します。

サイコロの種類について: DiceArtは白サイコロ(白地黒点)と黒サイコロ(黒地白点)の両方に対応しています。上記のマッピングは白サイコロの例です。黒サイコロの場合は明暗の対応が逆になり、0の目(完全な黒面)が最も暗い影の部分を、6の目(白点が最も多い面)が明るいハイライト部分を担当します。

ステップ3:コントラストと明るさの調整

調整が必要な理由

撮影した写真がそのままサイコロ変換に最適なことはほとんどありません。多くの写真は明暗が中間域に集中しており、そのまま変換すると、全体がグレーがかったのっぺりした印象になりがちです。

量子化の前に、アルゴリズムはユーザーが設定した調整を反映します。

  • 明るさ調整: 全体の露出を上下に移動させ、適切な明暗バランスに整えます
  • コントラスト調整: 明るい部分をより明るく、暗い部分をより暗く引き離すことで、7段階をフルに活用できる分布に近づけます

高コントラスト設定では、0の目と6の目が多用される「ドラマチックな」モザイクに。低コントラスト設定では、写真の自然な階調を活かした繊細な表現になります。

輪郭のシャープネス

サイコロはひとつひとつ独立したブロックなので、緩やかなグラデーションはモザイク上では"ぼやけ"として現れやすいです。コントラストを高めに設定することは、自然なシャープニング効果も兼ねており、人物のシルエットや文字・ロゴなど、輪郭の認識が重要な題材で特に効果を発揮します。

ステップ4:プレビューレンダリングと制作図面

リアルタイムプレビュー

量子化が完了すると、アルゴリズムは2種類のプレビューを同時に生成します。

  • グレースケールブロックプレビュー: 各サイコロの位置を7段階の灰色の正方形で表示。全体の構図を素早く確認できます
  • リアルサイコロプレビュー: 実際のサイコロ画像を使ってレンダリング。完成後の物理的な見た目に限りなく近い状態で確認できます

0の目を含むすべてのサイコロ面は、実際の画像アセットから描画されるため、プレビューがそのまま完成品のイメージになります。

物理制作のための図面

サイコロアートを実際に作りたい方のために、DiceArtジェネレーターは以下をエクスポートできます。

  • グリッド図面(CSV形式): 各位置に置くべきサイコロの目の数(0〜6)を記載
  • 材料リスト: 目の数ごとに必要なサイコロの数を一覧化
    • 0の目(特別処理が必要なもの)の個数
    • 1〜6の目それぞれの必要個数
  • サイズ参考: 標準16mmサイコロを基準とした完成品の実寸計算

ステップ5:7段階 vs. 6段階システムの比較

特性従来の6段階(1〜6の目)DiceArt 7段階(0〜6の目)改善度
グレースケール段数67+16.7%
1段階あたりのカバー幅約43単位約37単位より精細
ハイライト・明部の表現(白サイコロ)限定的大幅に改善++
全体の階調感良好優秀++

効果が際立つ題材

ポートレート写真: 肌のトーン変化、瞳の白、ハイライトの反射など、顔の細部に恩恵が大きく出ます。

空・明るい背景: 雲のグラデーションや青空のトーンは、6段階では"段差"が生まれやすい部分。7段階ではより自然なつながりで表現できます。

ロゴ・テキスト: 白いエリアが多いグラフィックは、0の目によるエッジの鮮明さが際立ちます。

7段階グレースケールを最大限に活用するコツ

アルゴリズムの仕組みを理解すると、制作前の準備で大きな差がつきます。

  • コントラストの強い写真を選ぶ: 明暗の幅が広い写真ほど、7段階全体をバランスよく使えます。平坦な光の写真はどうしても"のっぺり"しがちです。
  • アップロード前に調整する: サイコロクリエイターの明るさ・コントラストスライダーを使って、変換前に画像の明暗バランスを整えましょう。
  • 大きなグリッドほど細部が出る: 100列のグリッドは30列と比べて、はるかに多くの情報を保持できます。
  • モザイクの個性を楽しむ: 7段階という制約は、サイコロアートならではの表現言語。むしろシンプルで力強い構図が、最もインパクトのある作品になることも多いです。
  • 0の目を戦略的に使う: 0の目(白サイコロの場合の白面)は、作品の中で最も明るい"光"を表現します。白い背景や空、顔のハイライトなど、明るく開いた印象を出したい部分に0の目が集まるように、明るさを調整しましょう。

0の目のサイコロを作る方法

白サイコロ(白地黒点)の場合:

  1. 空白面入りのセットを選ぶ: 空白面が含まれるサイコロセットを販売しているメーカーもあります
  2. 修正液・白い塗料ペン: 不透明な白い塗料で黒点を塗りつぶし、白地に溶け込ませます
  3. 白い丸シール: 小さな丸形の白いシールで黒点を隠すシンプルな方法
  4. カスタムサイコロを注文: 空白面入りのカスタム品を直接注文する方法。単価は高めですが、均一性が最高です

黒サイコロ(黒地白点)の場合:

  1. 黒の油性マーカー: 永久ペンで白点を塗りつぶし、黒地に馴染ませます
  2. 黒い丸シール: 黒いシールを貼って白点を隠します
  3. マスキング+スプレー塗装: 他の面をマスキングして白点部分を黒でスプレー塗装。大量制作に向いています

仕上げの品質を揃えるために

  • 塗りつぶした部分は周囲の面と同じ高さに。段差があると並べたとき目立ちます
  • 色味はサイコロの地色にできるだけ合わせましょう。わずかな色ムラも近くで見ると目に入ります
  • 大量に作る前に数個試作して、仕上がりの品質を確認してから本番へ

まとめ:シンプルな仕組みが、予想を超える美しさをつくる

サイコロアートのアルゴリズムは、実はとてもシンプルです。リサイズ、明るさへの変換、調整、7段階への量子化、レンダリング。ひとつひとつのステップは明快で、隠し技もありません。

それでも美しいサイコロモザイクが生まれるのは、7段階グレースケールシステムの力です。6段階では届かなかった光のニュアンスを、たった1段階の追加が埋めてくれる。その違いが、見る人の目に"ちゃんと伝わる"作品をつくります。

あなたの写真がサイコロに変わったら、どんな顔を見せてくれるでしょうか。ぜひDiceArt制作ページにアクセスして、写真をアップロードしてみてください。変換はリアルタイムで確認できます。