MonoSalon商品紹介#12:MonoCoaster Circle

Monovation株式会社は、あなただけの「カタチを創る」オーダーメイド製品のオンラインショップ「MonoSalon」を2017年3月7日にリリースしました。
MonoSalonのサイトはこちら
リリース案内はこちら

前回まで「MonoLight DepBall」「MonoCup TriangleCut」「MonoStamp Square」「MonoStand Wave」「MonoClock Circle」「MonoPhone iPhone」「MonoRest Twist」「MonoMarker Triangle」「MonoUmbrella Ring」「MonoText CapitalAlphabet」「MonoClock 3DCircle」を紹介してきました。第12弾の本日は「MonoCoaster Circle」を紹介します。
商品ページはこちら

「MonoCoaster Circle」は、シンプルな円形のコースターです。天面に好きな写真・イラスト・文字を入れて世界に一つのあなただけのコースターを作れます。記念品やプレゼントに、来客用に、デスク周りを個性的に、世界に一つのコースターで特別なティータイムを演出してみてはいかがでしょうか。コースターの素材には透明アクリル、木、コルクをご用意しました。思い出の写真を入れてもよし、お名前や会社名を入れてもよし、お気に入りのイラストやフレーズを入れてもよし、あなただけのコースターをお楽しみ下さい。

これまでもオリジナルコースターを作れるサービスはありましたが、完成のイメージが分からず、出来上がるまで不安という方もいらっしゃったと思います。MonoSalonではオンラインプレビューで完成イメージをその場で確認しながら、オーダーメイドのコースターを作成することができます。また、レーザーカッターを活用することで一点モノのコースターを手ごろな価格で実現しました。価格は980円(税別・送料別)です。また、透明アクリル、コルク、木と多様な素材をご用意しましたので、お好きな質感のコースターがきっと見つかると思います。

透明アクリルにビーチの画像と文字を入れてみました。透明コースターはスタイリッシュな印象です。

コルクに個性的なイラストを入れてみました。(知人の方に描いて頂きました)

以下はコルクをレーザーカッターで造形しているところです。徐々に出来上がっていくのは見ていて楽しいです。

少女と犬と猫の写真を木のコースターに入れてみました。人間や動物などの繊細な画像も独自のアルゴリズムでキレイに白黒に変換して、焼入れすることができます。

以下が元画像で、これを独自に白黒変換しています。

上記の画像を白黒に変換し、木にレーザーで焼入れしているところです。

是非、MonoSalonであなただけのコースターを手軽に作ってみて下さい。

CanvasとJavascriptで画像処理 – 二階調化

前回は、CanvasとJavascriptで画像処理を行うための下準備として、canvas要素の導入とそのcanvasに対する画像の読み込みを行いました。

今回は、前回のコードをベースとして、読み込んだ画像を二階調化する処理を行いたいと思います。二階調化とは、画像の各ピクセルをその輝度に従い白か黒かどちらかの色に変換し、全体としてモノクロの画像にする処理です。

各ピクセルの色の取得

各ピクセルの輝度を算出するには、まず各ピクセルの色を取得する必要があります。その色は、0から255までの値をとるRGBの組み合わせで定義されています。例えば黄色であれば、赤と緑を混ぜ合わせるので(255, 255, 0)という具合です。

canvas上の各ピクセルの色を取得するには、canvasのcontextのgetImageData()メソッドを使用します。getImageData()はImageDataオブジェクトを返し、そのdata属性が各ピクセルのRGBの値を含んだ配列となっています。

getImageDataの引数は、取得する範囲の起点のx座標、y座標、幅、高さです。data配列は、一つ目のピクセルのR成分、G成分、B成分、透明度、二つ目のピクセルの…という順番で構成されているため、全体で画像の画素数の4倍の長さを持ちます。ピクセルの順番は画像の左上から右方向に一つずつ進み、右端まで行くと、二行目の先頭に戻る形で付けられます。

輝度の計算

輝度は色の明るさの指標の一つですが、RGBの単純平均ではなく、RGB各色に対する人間の視覚の感度を加味して計算されます。採用する色空間にも依りますが、以下の計算式が使われる場合が多いです。

二階調化

各ピクセルの輝度が計算できたので、これを閾値と比較して、大きければ白、同じか小さければ黒に変換します。閾値には、輝度の範囲0~255の中間である127が採用される場合が多いです。

全体のコード

以上を組み合わせると、CanvasとJavascriptでカラー画像を二階調化させるコードは以下になります。

計算した輝度に基づき、data配列のRGBを直接白(255, 255, 255)または黒(0, 0, 0)変更しています。最後に、data属性を更新したimageDataをputImageData()メソッドを使って再びcontextに反映させています。カラーのmono.jpg画像は、以下のような白黒画像に変換されると思います。

CORS (Cross-origin Resource Sharing)対応

上のコードをローカルPCで実行した場合、元のカラー画像がそのまま表示され、開発者ツール等で確認すると

といったエラーが表示されているかと思います。これはブラウザのクロスドメイン通信を拒否する実装によるものです。いやいや、どこのサーバーにもアクセスしていないだろうと思われるかもしれませんが、セキュリティ対策からすべてのローカルファイルは別オリジンであるとみなされます。

これを乗り越える方法としては、Google Chromeであれば「–allow-file-access-from-files」という起動オプションを付けて起動するという方法もありますが、一番手っ取り早いのは簡易サーバーをローカルPC上に立ててしまうことです。ローカルサーバーを立てるソフトウェアは色々ありますが、「Web Server for Chrome」というChromeのアドオンが非常に使いやすいと思います。

閾値の調整

二階調化は、画像の各ピクセルを単純に白か黒に変換するため、写真に適用させると上の画像のように原型が分からなくなってしまう場合が多いと思います。暗い色ばかりや薄い色ばかりで構成された画像はそれが顕著です。その場合、閾値の値を画像全体の輝度に合わせて調整すると良いと思います。単純に各ピクセルの平均をとる場合は以下のように行います。

少しはましになったでしょうか?

次回はグレイスケールについてお伝えしたいと思います。

MonoSalon商品紹介#11:MonoClock 3DCircle

Monovation株式会社は、あなただけの「カタチを創る」オーダーメイド製品のオンラインショップ「MonoSalon」を2017年3月7日にリリースしました。
MonoSalonのサイトはこちら
リリース案内はこちら

前回まで「MonoLight DepBall」「MonoCup TriangleCut」「MonoStamp Square」「MonoStand Wave」「MonoClock Circle」「MonoPhone iPhone」「MonoRest Twist」「MonoMarker Triangle」「MonoUmbrella Ring」「MonoText CapitalAlphabet」を紹介してきました。第11弾の本日は「MonoClock 3DCircle」を紹介します。
商品ページはこちら

「MonoClock 3DCircle」は、円形の時計盤に立体的な三角形のアワーマークを付けたスタイリッシュなデザインの壁掛け時計です。時計盤に好きな画像・イラスト・文字を入れて世界に一つのあなただけの壁掛け時計を作れます。記念品やプレゼントに、会社の受付に、世界に一つの壁掛け時計で特別な時間を演出してみてはいかがでしょうか。時計盤の素材には白・黒・赤・青・黄・緑のプラスチックをご用意しました。お名前や会社名を入れてもよし、お気に入りのイラストやフレーズを入れてもよし、あなただけの時計で特別な時間をお過ごし下さい。

これまでオリジナルの文字やイラストを立体的に入れられる壁掛け時計は、ありそうで無かった商品だと思います。Monovationでは3Dプリンタを活用することで、立体的なオーダーを手ごろな価格で実現しました。価格は7980円(税別・送料別)です。デザインも3Dプリンタらしい立体感のあるアワーマークが付いていますので、壁に掛けると立体感がより際立ってインパクト十分です。また、カラーバリエーションも豊富で、時計盤には白・黒・赤・青・黄・緑の6色を、時計針は白と黒をご用意していますので、お好きな色とデザインであなただけの壁掛け時計を手軽に作ることができます。

白の時計盤・黒の時計針で、Monovationのロゴと社名入りの壁掛け時計を作ってみました。

同じくMonovationのロゴと社名を、時計盤は赤・時計針は白で作ってみました。

ネコのイラストと名前を入れて、時計盤は緑・時計針は黒で作ってみました。

是非、MonoSalonであなただけの壁掛け時計を手軽に作ってみて下さい。

CanvasとJavascriptで画像処理

前回までは、ブラウザ上で3Dモデルを扱うことができるライブラリであるthree.jsについてお伝えしてきました。今回は、少し脱線して、ブラウザ上での二次元画像の処理について書きたいと思います。

タイトルにあるCanvasとは、HTML5で導入された二次元画像を描画するための要素で、Javascriptと組み合わせることで、ブラウザ上でのアニメーション表示や画像の加工など様々なことができます。

MonoMediaでは、数回にわたって、CanvasとJavascriptを用いて、画像ファイルに対してグレイスケールやハーフトーン処理等の様々な画像処理を行う方法についてお伝えしていきたいと思います。(図形の描写やアニメーション等は特に触れません。)今回は、その下準備として、Canvasに画像ファイルを読み込むところまで行いたいと思います。

Canvasの準備

まずcanvasを追加します。canvasはHTMLの要素ですので、他のタグと同様に<body>タグ内に追加します。その際、widthとheight属性で幅と高さをピクセル単位で指定します。(widthとheightはJavascriptからも変更することができますが、今回の連載では512pxに固定したいと思います。)また、Javascriptからcanvas要素にアクセスしやすいように、id属性も指定すると良いと思います。

Javascriptの準備

Javascriptは外部ファイルとして読み込んでも大丈夫ですが、今回は分かりやすいように<head>タグ内に記述します。また、HTMLのDOM要素がすべてロードされてから実行されるように、Javascriptによる処理はinit()と名付けたメソッド内に記述し、そしてinit()メソッドを<body>タグのonload属性に指定します。

Canvasへの画像のロード

本連載では、画像処理を加えるベース画像として、カラフルが分かりやすい弊社製品ごちゃ混ぜ写真を使用したいと思います。ファイル名はmono.jpgとし、コードを記述するindex.htmlと同じフォルダに配置してあります。

以下が、mono.jpgをCanvasへロードするための全コードになります。

まず、documentオブジェクトのgetElementById()メソッドを用いて、「canvas」とIDを付与したcanvas要素を取得します。次にcanvasからcontextオブジェクトを取得します。canvas上の画像の操作を行う場合、通常このcontextを通じて行うことになります。

その次に、Imageオブジェクトを作成し、そのsrcプロパティに画像ファイルのパスを指定することで、画像を読み込むことができます。画像の読み込みには時間がかかるため、非同期で処理が行われ、読み込みが完了するとonloadプロパティに指定した関数が実行されます。(image.onloadはimage.srcの先に来る必要があります。)

最後に、contextのdrawImageメソッドを実行し、引数に指定したImageオブジェクトをcanvasにロードします。第2、3引数には読み込んだ画像を配置するキャンバス上のx座標、y座標を指定できます。

こちらが、今回のコードでロードされた画像です。事前に画像のサイズを512 x 512pxに加工してあったため、キャンバスにぴったり収まりましたが、キャンバスより大きい画像を指定した場合、はみ出した部分はカットされますし、小さい場合は白い余白が表示されると思います。

次回以降は、この画像に対して色々と処理を行っていきたいと思います。