<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
 
 

top page, english, japanese


タイル画の設計の為に――

タイル画には大別して二つのアプローチがある。
ひとつは、数十色の出来合い乃至は用意されたタイルセットを壁面に貼って絵画(壁画)に仕立てあげる方法で、もうひとつは、個々のタイルは絵を構成する一部として予め特定の絵柄を彩色され填め込まれる方法である。
後者が圧倒的に多く、タイルを貼った上から彩色するだけのものも実は多い

中世ヨーロッパのイコンやアラブの幾何学的な抽象タイル画も後者のアプローチである。イコンは一枚のタイルに聖書のワンシーンから取られた題材が描かれ、抽象タイル画は特定の模様が描かれたタイルを組み合わせ抽象的なパターンを創出する。
つまりタイルをキャンバスとして扱っている。ジクソーパズルの様なもので個々のタイルは絵画のパーツとして特殊化されている。
日本でタイル画と言えば、温泉や銭湯の浴室壁面の富士山なのだが、これも同様に、タイルを壁面に貼った上から彩色して描いてあるものがほとんどである

右画像は熱海のとある温泉の壁面を飾るもので、近景の水車小屋から中景の山麓,遠景の富士山まで奥行感のある構図がとてもよく出来ている。これは出来合い乃至用意された数十色のタイルセットによって構成されたタイル壁画で、このような作り方をされたものは実は少ない。因みに右画像は絵ではなくタイル壁画の写真である。
このアプローチは、汎用的なタイルセットを使ってタイル画に仕立てるという事である

ここで紹介するソフトウエアが支援するタイル画のアプローチは、数十色の出来合い乃至は用意されたタイルセット、つまり汎用的なタイルセットを使ってタイル画に仕立てあげる方法である

元の画像は写真でもイラストでも何でも構わない。それを任意のパレットを使ってタイル画にした場合の画像を得る事が出来る。
パレットの設定も自由度が高く、元画像をより忠実に表現する任意の色数のカラーセットを抽出する事も出来るし、ユーザが設定した恣意的なカラーセットをあてはめる事も出来る。目地(Slit)を任意のピクセル幅で入れる事も出来る。
要するに、タイル画のシミュレータである

左画像は北斎の富士を元画像にタイリングしたもの。カラーパレットにはセーフカラーを使ってみた

より少ない色数のパレットを使うと、ノイズ的なタイルが現われ、タイル画としての面白みが出たりする場合がある。この辺りは後述する

そして、タイルのサイズや縦横の枚数、各々のタイルの色番号乃至RGB値を出力する事が出来る。デザインデータ,設計図書である。
ウィンドウでの表示の他に、CSVファイルで出力する事も出来るので、何等かの集計も表計算ソフトなどを使って簡単に出来るだろう



また、画像処理ソフトとして、基本機能は備えてある。完成されるべきタイル画に応じて、クロップやリサイズはもちろん、何等かのエフェクトを行なう事もあるだろう

右画像は同じく北斎の富士を元画像にして、一度白黒の線画にエフェクトしたものを(右)、タイリングしている(左)

エディットやエフェクト,フィルタリング等の基本的な機能を追加しているうちに、そこそこ便利な画像処理ソフトになったかと思う。と言っても、あくまで基本的な機能のみで、細やかなレタッチ機能は無い。但し、品質だけは最高品質で処理する事を目指した

例えば、インターポレーション(補間,interpolation)にはバイキュービック(bi-cubic)やエリア平均法(area averaging)と其の共用(変形の為)、
減色の為にLUV変換に依るメディアンカット(median cut)や誤差拡散法(error dispersion)、
ポスタリゼーションやヒストグラムではRGB個別の数値設定、
フィルタリング(スムージング,エッジ保存,尖鋭化,エッジ抽出,ノイズ除去,ユーザー設定)には40余りの評価されているオペレータを網羅的に実装した

とは言え、この手のエフェクトをするのなら、フォトショップや多機能なフリーソフトが他に沢山あるので、そういうのを使えばいいと思う

減色及びカラー変換を目的としたパレットとしてユーザが作ったCSVファイルを手軽に呼び出す事が出来るのですが、これも元々はタイル画作成の為の機能で、例えば、手持ちのタイルセットを想定してRGB指定で予めパレットファイルを作っておいて、写真やイラスト画像をタイリングすれば、出来上がりをシミュレートし、そして、そのデザインデータも出力出来る。
パレットは2以上256以下の色数を設定出来るので大抵のタイルセットに対応出来るだろう

右画像は北斎の富士をセーフカラーでタイリングした際のデザインデータ。以降、デザインテーブルと呼ぶ事にする

サポートしている画像ファイル形式は、bmp, jpg, png, gif, tiffの5種類です

先ずは動かしてみて下さい
 


 
tilingPicture, タイル画作成ソフトウエア
last updated on 7th January 2024 since 11th June 2005
Download ver.0.84.03 for Windows x86 -- it may be worked on Windows XP, 7, 8.x, 10 (32 bits)
Download ver.0.84.03 for Windows x64 -- it may be worked on Windows XP, 7, 8.x, 10 (64 bits)
 
使い方概要
 
1. File
2. View
3. Edit
4. Effect
5. Filtering
6. Tiling
 
chapter1: Edit
 
1-1. Undo
1-2. Crop
1-3. Resize
1-4. Rotate
1-5. Flip
 
chapter2: Effect
 
2-1. Color Processing
2-2. Gray Scale
2-3. Black and White
2-4. Invert(Negative)
2-5. Posterization
2-6. Histogram Modify
 
chapter3: Filtering
 
3-1. Smoothing
3-2. Edge PreServing
3-3. Sharpening
3-4. Edge Detect
3-5. De Noise
3-6. User Filter
 
chapter4: Tiling
 
4-1. Tiling
4-2. Express Table
4-3. Save As CSV File
4-4. こんなのも
 


使い方概要


サポートしているファイル形式は、bmp, jpg, png, gif, tiffの5種類で、bitmapに於けるPixel Formatは、1bppIndexed,4bppIndexed,8bppIndexed,24bppRGB,32bppRGBの5種類で、16bpp及びARGB,PARGBはサポートしていない

プルダウンメニューのOpenで画像ファイルを開く。ドラッグ&ドロップによるファイルオープンはうっかり忘れました。次のバージョンで実装します。
Closeでファイルを閉じます。Closeの他に、Save, Save Asでファイルを保存すると、Undo機能は使えなくなります

ウィンドウのタイトルバーにファイル名と表示スケール(%)、ステータスバーに画像サイズとbppが表示される
 



Fit Windowでウィンドウ内に画像全体を収めるスケールにフィットして表示する

Zoomのポップアップメニューで、5〜1000%までの中からスケールを指定して表示出来る

Zoom Up, Zoom Dnで、Zoomで選択可能なスケールを一段階づつ変化させて表示する

Ctrl + Shift + Zにより、100%表示する
 



Undoで、何等かの改変を無効化する。要するに元に戻す。ドライブに余裕がある事が前提であるが、直近100回分の変更を無効化出来る

Cropで、画像のトリミングを行なう。ありがちな手法はマウスで選び取る範囲を指定する方法であるが、敢えて数値指定により選び取る範囲を決定する。1ピクセル単位で指定したい場合にはこの方が簡便な場合が多い

Resizeで、拡大,縮小,変形を行なう。縦横いずれかの数値を変更した後で、keep ratioボタンをクリックすると、縦横比を元画像に合わせた数値にする。その場合は最後に変更した数値を基準にする
インターポーレーション(補間)については、拡大にバイキュービック(bi-cubic)、縮小にはエリア平均法(area averaging)により補間される。縦横で拡大と縮小が混在する変形の場合は、これらのメソッドも混用される。
インターポレーションを利用する場合は、改変後のbitmapは24bppとなる
インターポレーションを行なわない(チェックを外す)場合には、ニアバイ法が採用され、bitmapの場合にはオリジナルのbppとトゥルーカラーとしての24bppの選択が可能になる

Rotateで、回転させる。90度単位はプルダウンメニューを用意した。Arbitraryで任意の角度を入力して回転させる。90度単位の場合はオリジナルのbppを継承するが、それ以外の角度では24bppとなる

Flipで、左右乃至上下を反転させる。Verticalで上下を、Horizontalで左右を、反転させる
 



Color Processingで、メディアンカットによる減色,基本カラーやイーブンカラーもしくはユーザー作成のカラーパレットを使用してカラー変換を行なう。その場合、誤差拡散法(error dispersion)の使用が選択可能になる。
唯単に、24bppに変換する事も出来る。その場合は、誤差拡散法は無効になる。
誤差拡散法を使用せずに減色するという事は、ポスタリゼーションを行なうに等しい。均等配分のポスタリゼーションは、イーブンカラーを選択する事で可能になる

Gray Scaleで、2〜256階調のグレイスケールに変換する。
256階調はグレイスケールとしてはトゥルーカラーに相当する。故に、誤差拡散法は無効となる(必要ない)。128階調以下の場合は、誤差拡散法の使用が選択可能になる

Black and Whiteで、白黒の2色に変換する。
白黒の分岐には、メディアンカットとスレッショルド(閾値)指定の二つの方法がある。スレッショルド指定の場合は、事前にヒストグラムをモディファイしておく事も出来る。通常、スレッショルドのみの調整で十分だろう

Invertで、単純にカラー反転させる。所謂ネガティブにする。オリジナルのbppとトゥルーカラーとしての24bppの選択が可能である

Posterizationで、均等配分のカラー変換を行なう。RGBを全て同じ均等にする事と、RGB各々個別にレベル(段階)数を指定して均等配分する事が出来る

Histogram Modifyで、ヒストグラムを改変する。使用されている元画像のカラー範囲を指定の範囲に変換する。デフォルトは0〜255となっており、これはヒストグラム伸長に等しい。チェックを外すとそのカラーは変換されない
 



フィルタリングとは、文字通りフィルターにかけるエフェクトの事で、以下に記す様な効果を得られる。フィルターはオペレータ、また即物的にマスク、などと呼ばれる事も多い。
有名なオペレータはほとんど実装していると思う。また、ユーザが独自のオペレータを作成してエフェクトする事も出来る

smoothingは、ぼかしとも言われる様に、全体に滑らかな発色にする。ノイズもある程度除去する事も出来るのだが、エッジを潰してしまう効果もある。gaussian, mean average, weighted averageが有名でそれぞれサイズ違いを用意した。他にselected smoothingがある

edge-preservingはsmoothingの一種であるが別メニューにしてある。これはエッジを残しながら画像を滑らかにする。その基準として、レンジ,分散,標準偏差を選択出来る。通常は分散で良いだろう。というか、どれも結果に大差は無い

sharpening(尖鋭化)にはhigh-passフィルターをサイズ違いでふたつ用意した。あまりやり過ぎると不自然な画像になってしまう

edge detection(エッジ抽出)には、sobel, prewitt, kirsh, gradientの方位のあるオペレータには、vertical, horizontal, oblique, vertical + horizontalの4つの選択が可能になる。方位の無いオペレータとして、laplacian, line, nippleそれぞれ数種類を用意している

de noise(ノイズ除去)はメディアン法に限る。サイズ違いを3種類用意した

user definedとしては、3x3, 5x5の2サイズから選択出来る
 



Tilingの為の設定には、大別してカラー設定とタイル設定のふたつがある

カラー設定で、convert colorのチェックを外すとトゥルーカラーで処理される。チェックした場合は、メディアンカットに依る減色,イーブンカラー,ユーザパレットの3種のカラーパレットから選択する

減色は、256〜2色までの2の乗数から選択する。イーブンカラーは、11のプリセットパレットから選択する。ユーザパレットは、ユーザが予めCSVファイルで作成したカラーパレットファイルを選択する。
ユーザパレットはCSVファイルで簡単に作成出来る。実際のタイルセットの各色をRGB値で登録しておけば、そのタイルセットでタイル画を作った場合のシミュレータとなる

タイルの設定は、そのサイズもしくは縦横のタイル数を設定する。但し、タイル数を設定する場合は近似値になる。
更に、スリットのピクセルサイズと縦横それぞれのカラーを指定する。スリットはタイル目地を考慮したものです。スリットカラーは6段階のグレイを用意してある。トゥルーカラーの場合は指定のグレイになるが、減色をする場合には、パレットに存する最も近い色になる。

右の2つの画像は、どちらもたったの16色に減色してタイリングしたもので、左がメディアンカットによる減色、右がイーブンカラーの16色へのコンバートである

イーブンカラーで色数を少なくするとポスタリゼーション的な効果が現れる。効果の仕組みは同じです


余談だけれど、顔バレしたくない画像をSNSなどにポストする際に、タイリング画像を使ったりします

ここまでやる必要は無いでしょうけれど。右画像は2色へ減色したもので、横のスリットをライトグレイ,縦のスリットをディープグレイに設定する事で、コンバートされる2色に割り振ってある

右側の画像はタイルサイズを倍に設定したもので、表情はおろか人体の輪郭もより歪になった

他に、スリットサイズを太くする事で、格子を通して観た風景の様に見せたり、いろいろ遊べると思う

右画像はイーブンカラーの16色にコンバートした時のデザインテーブルです

まず基本的なファイル情報が表示されます。次いで、トゥルーカラーの場合は、スリットと個々のタイルのRGB値のテーブルが表示され、減色した場合は、先ずは、パレットカラーのRGB値が表示されます。そして、パレットをインデックスとして、スリットカラーのインデックスと個々のタイルのインデックスが表示されます

これらの情報は、CSVファイルとして出力(セーブ)出来ます。特定のインデックス(タイルカラー)が幾つあるか(その色のタイルが何枚必要か)などの集計も、表計算ソフトで簡単に出来るでしょう、自動集計します
 




chapter1: Edit


Undoにより、何等かの改変を無効にする。要するに元に戻す。
直近100回の改変を無効化する事が出来る。
但し、新たなファイルをオープンしたり、変更後の画像をクローズしたり、セーブした場合などには、Undoは不可能になる

ショートカットキーは、Ctrl + Z
 




Cropにより、トリミング(クロッピング)をする。
ありがちな手法はマウスで選び取る範囲を指定する方法ですが、敢えて数値指定により選び取る範囲を決定する。1ピクセル単位で指定したい場合にはこの方が簡便な場合が多い

数値指定の為のダイアログボックスは、画像サイズが反映されている。leftに1、rightに幅(width)のピクセル値が示され、bottomに1、topに高さ(height)のピクセル値が示される。これらの数値を変更する事で、左右,上下を切り取る

数値を入力し、"crop size"ボタンを押す事で選び取られるサイズを確認出来る

ショートカットキーは、Ctrl + C
 



Resizeで、拡大,縮小,変形を行なう。
縦横いずれかの数値を変更した後で、keep ratioボタンをクリックすると、縦横比を元画像に合わせた数値にする。その場合は最後に変更した数値が基準となる

インターポーレーション(補間)については、拡大にバイキュービック(bi-cubic)、縮小にはエリア平均法(area averaging)により補間される。縦横で拡大と縮小が混在する変形の場合は、これらのメソッドも混用される

おそらく、拡大にも縮小にも変形にも最高のインターポレーション(補間)方法だと思う

インターポレーションを利用する場合は、改変後のbitmapは24bppとなる。
インターポレーションを行なわない(チェックを外す)場合には、ニアバイ法が採用され、bitmapの場合にはオリジナルのbppとトゥルーカラーとしての24bppの選択が可能となる

ショートカットキーは、Ctrl + R
 



Rotateで、回転させる。
90度単位はプルダウンメニューを用意した。Arbitraryで任意の角度を入力して回転させる。90度単位の場合はオリジナルのbppを継承するが、それ以外の角度では24bppとなる


Arbitraryでは、マイナスの角度を入力すると左回転となる。
インターポレーションを選択した場合は、bi-cubic法により補間する。選択しない場合は、ニアバイ法により回転させる

回転しても出来上がりの画像は長方形である。90度単位の場合は縦横が入れ替る事はあってもサイズは変わらないが、それ以外の角度の場合は、画像サイズが大きくなり、ブランクスペースが生じる。
このブランクスペースのカラーを白黒を含む6段階のグレイで指定出来る

ショートカットキーは、右90度がCtrl + 1,180度がCtrl + 2,左90度がCtrl + 3,ArbitraryがCtrl + A
 



Flipで、左右乃至上下を反転させる。Verticalで上下を、Horizontalで左右を、反転させる

ショートカットキーは、VerticalがCtrl + V,HorizontalがCtrl + H
 




chapter 2: Effect


Color Processingで、メディアンカットによる減色,基本カラーやイーブンカラーもしくはユーザー作成のカラーパレットを使用してカラー変換を行なう。
減色またはパレット変換を行なう場合、誤差拡散法(error dispersion)の使用が選択可能になる。
唯単に、24bppに変換する事も出来る。その場合は、誤差拡散法は無効になる。
誤差拡散法を使用せずに減色するという事は、ポスタリゼーションを行なうに等しい。均等配分のポスタリゼーションは、イーブンカラーを選択する事で可能になる

メディアンカットでは、一度LUV変換をして、LUV3軸の空間を切り分けている。そしてRGBに戻してパレットを作成する。この事で、輝度に配慮した減色が可能になる

基本カラーは、CSSで策定されている16色の基本カラーセットと147色の拡張基本カラーセットをプリセットしている

イーブンカラーは、216色のセーフカラーの他に、RGB個別に均等割した11個のカラーセットをプリセットしている。基本カラーやユーザ作成のカラーパレットでは近似カラーを探索するのに比して、イーブンカラーパレットでは近似カラーを算出出来るので処理速度が圧倒的に速い

ユーザ作成のカラーパレットは、CSVファイルで作成出来る。カラー数(color used)は2色以上256色以下となる。インストールフォルダの下位フォルダにサンプルを収めてあるので、参考にして欲しい
 



Gray Scaleで、2〜256階調のグレイスケールに変換する。
256階調はグレイスケールとしてはトゥルーカラーに相当する。故に、誤差拡散法は無効となる(必要ない)。128階調以下の場合は、誤差拡散法の使用が選択可能になる

指定のスケールへの減色はメディアンカットによる

ショートカットキーは、Ctrl + G
 



Black and Whiteで、白黒の2色に変換する。
白黒の分岐には、メディアンカットとスレッショルド(閾値)指定の二つの方法がある。スレッショルド指定の場合は、事前にヒストグラムをモディファイしておく事も出来る。通常、スレッショルドのみの調整で十分だろう

誤差拡散法(error dispersion)を使う事も出来る。遠目にはハーフトーンも表現される感じになるのだが、たった2色で使うとドットの粗さが目立つ

ショートカットキーは、Ctrl + B
 



Invertで、単純にカラー反転させる。所謂ネガティブにする。
オリジナルのbppとトゥルーカラーとしての24bppの選択が可能である

ショートカットキーは、Ctrl + I
 



Posterizationで、均等配分のカラー変換を行なう。
RGBを全て同じ均等にする事と、RGB各々個別にレベル(段階)数を指定して均等配分する事が出来る

イーブンカラーパレットにコンバートした場合と同じ結果になる

ショートカットキーは、Ctrl + P
 



Histogram Modifyで、ヒストグラムを改変する。
使用されている元画像のカラー範囲を指定の範囲に変換する。デフォルトは0〜255となっており、これはヒストグラム伸長に等しい。チェックを外すとそのカラーは変換されない

イラスト等の場合には、使っていない帯域にまで伸長したり、帯域をずらす事によって明度を変化させたりする事が出来る。また、広い帯域を使用している写真画像などでも、狭い帯域に変換する事で彩度を下げたりする事が出来る

ショートカットキーは、Ctrl + M
 




chapter 3: Filtering


smoothingは、ぼかしとも言われる様に、全体に滑らかな発色にする。
ノイズもある程度除去する事も出来るのだが、エッジを潰してしまう効果もある。gaussian, mean average, weighted averageが有名でそれぞれサイズ違いを用意した。他にselected smoothingがある

ショートカットキーは、Ctrl + Shift + M
 



edge-preservingはsmoothingの一種であるが別メニューにしてある。これはエッジを残しながら画像を滑らかにする。
その基準として、レンジ,分散,標準偏差を選択出来る。通常は分散で良いだろう。というか、どれも結果に大差は無い

ショートカットキーは、Ctrl + Shift + V
 



sharpening(尖鋭化)にはhigh-passフィルターをサイズ違いでふたつ用意した。
あまりやり過ぎると不自然な画像になってしまう

ショートカットキーは、Ctrl + Shift + P
 



edge detection(エッジ抽出)には、sobel, prewitt, kirsh, gradientの方位のあるオペレータには、vertical, horizontal, oblique, vertical + horizontalの4つの選択が可能になる。方位の無いオペレータとして、laplacian, line, nippleそれぞれ数種類を用意している

ショートカットキーは、Ctrl + Shift + E
 



de noise(ノイズ除去)はメディアン法に限る。サイズ違いを3種類用意した
広い範囲でやると、滑らかになると共にエッジが鈍化する。スキャナー画像等のどうしてもノイズが入り込んでしまう様な画像には効果がある

ショートカットキーは、Ctrl + Shift + D
 



user definedとしては、3x3, 5x5の2サイズから選択出来る

ショートカットキーは、Ctrl + Shift + F
 




chapter 4: Tiling


冒頭及び使い方概要で、タイリングの説明は一通り記した。ここでは、実際に、壁面にタイル画を施行する事を想定して、その手順を考えてみる事にする

与えられた要件は次の通りとする。思い付きで恣意的に決めた。画像は今迄使って来たもの

壁面サイズ 横幅4m,高さ3m
タイルサイズ 横幅4cm,高さ4cm
タイルカラー 140色イーブンカラー
目地の幅 3mm
元画像 横幅700,高さ490(ピクセル)

タイルカラーについては、プリセットにあるイーブンカラー140色とする。実際に製作する場合には、タイルセットのRGB値をCSVファイルにして、ユーザパレットとして使えばいい

先ず、壁面と元画像の縦横比が異なる。この問題への対処は4通り考えられる。

1. 元画像に合わせて壁面のタイル画の高さを小さくする
2. 元画像の背景がホワイトなので壁面上方を不足分としてホワイトタイルで埋める
3. 高さを合わせて元画像の横幅を切る取る
4. 壁面に合わせて元画像を変形させる

ここでは1.の方法を採用する事にする。壁面のタイル画サイズは、横幅4000mm,高さ2800mmとして製作する

次いで、元画像のピクセルと製作の為のスケールであるmmを合わせる。
もしも目地幅が2mmや4mmであれば、その幅を1ピクセルに比しても良かっただろう。しかし3mmを1ピクセルに比するとタイルサイズなどが割切れないので、単純に、1mmを1ピクセルとして処理する。
すると、タイルサイズは40ピクセル×40ピクセルとなる。
そして、壁面のタイル画サイズは4000ピクセル×2800ピクセルに相当する

これをシミュレートする為には、
元画像を4000ピクセル×2800ピクセルにリサイズ(拡大)し、タイルサイズを40ピクセル×40ピクセル、スリットサイズを3ピクセルとして、タイリングすれば良い

そうして出来た画像が右画像である。タイル画は全くこの通りに完成する
 



タイリングの後に、メニューの“Express Table”によってデザインテーブルを表示する事が出来る。ショートカットキーはCtrl + Eである。このデータは、メニューの“SaveAs CSV File”でCSVファイルとして出力(セーブ)する事が出来る

先ず最初に、基本情報が表示される。
ビットマップとしてのファイルサイズなどはどうでもよい。タイルカウントは93×66で、6138枚のタイルが必要な事がわかる

次いで、タイルセットのインデックスとRGB値が表示される。
ここではイーブンカラー140色のパレットを使ったのだが、実際のタイルセットのRGB値をユーザパレットとしてCSV Fileで作成したものを使っていれば、そのデータが表示される。
カラー別の枚数も押さえておきたい。CSV Fileに出力して表計算ソフトを使えば簡単にわかる事だが、これは次のバージョンで出力出来る様にしたい集計結果を出力する。
右図の例では、イーブンカラーを使っているので、未使用(0枚)のカラータイルもかなりある

インデックス番号は、0から始まる

そしてスリット(目地)のカラーインデックスの表示に続いて、最後に、実際に貼付けていくロケーションに合わせて、タイルのインデックス番号がテーブルとして表示される。
この通りに貼付けていく。
Vert(Vertical)は行数を示し、Horz(Horizon)は列数を示す。いずれも番号は0から始まっている

最終の行と列に於いては、当然の結果として、タイルは設定されたサイズよりも小さいだろう
 



デザインテーブルのデータをCSV Fileとして出力(セーブ)する事が出来る。ソフトウエア上で表示される内容と全く同じである

 





格子を通して輪郭が見えている感じとか



誰もが知ってる



これは家の壁面に作りたいと思っている。Paul Klee "Resting Sphinx"
たったの16色
 




御感想でもありましたら
 


e_mail to webmaster