canvas要素にJSでAS3のdrawTrianglesみたいなことをやってみる

trianglejs_demo.jpg

以前HTML5案件で作ったもので、canvasで上の図のようなことができるJavaScriptファイルなんですが、これをライブラリ化してみました。
まだ欠陥が多いしAPI仕様もまとまってないのですが、ひとまずこんな表現が可能です。
ソースはここにあげときました。(使い方よくわかんないけど)
ActionScript 3.0にはGraphicsクラスにdrawTriangles()ってメソッドがあります。
何をするかって言うと、ビットマップ画像をテクスチャマッピングすることが目的です。
これにより一枚の静止画をユラユラ布のように揺らしたり、3Dでは遠近感をつけたりと、画像を自由に変形することが可能になるコンピュータグラフィックの手法です。
FlashPlayerやActionScript 3.0が素晴らしいと思うのが、こういったマッピング処理の数学的な難しい処理をすでにAPIとして実装してくれています。
僕達は、頂点座標を指定して、それをどう動かすか?に専念したらいいんです。
ところが、HTML5の新要素、canvasとかでこれを表現し、アプリなどに乗せてしまうようなお仕事が来た時、「iPadだったらHTML5で出来ますよ」なんて言ってしまったらさあ大変!
そんな機能はネイティブで搭載されていません。
つまり、「無いものは作る」or「仕様を満たすライブラリを探す」or「出来ません、と謝る」という選択に迫られます。
実は色んなライブラリがもう既に出まわっていますが、いざ案件でHTMLによるテクスチャマッピングを実装するには、可能な限り自分で内容を知っておきたいという気持ちがあったので、これに挑戦してみました。
これを使ったら、ポリゴンの頂点座標のx座標やy座標をずらすと、画像もその頂点にあわせて変形できます。
頂点座標の取得はgetMesh()で、頂点オブジェクトが配列で返ってくるので、例えば


インスタンス名.getMesh()[41].x += 40; // ------------- 頂点座標の移動

インスタンス名.draw(); // ------------- 再描画実行

とかにすると、左上の頂点から41頂点目のX座標を40px右にずらします、
最後にdraw()メソッドで再描画すると、図のように表示されるというものです。
getmesh.jpg
メッシュの表示、非表示
あくまで、今出ている黒い線(メッシュ)は、制作者が分かりやすいように引いているガイド線のようなものなので、案件で納品するときは消さないといけないケースがあります。
以下のようにstroke()メソッドを用意したので、引数にtrue / falseを与えてください。


インスタンス名.stroke(false);

これで再度draw()すると、メッシュは表示されなくなります。(今回のデモ図版では、わざとtrueに設定しましたが、デフォルトはfalseです。)
GitHubに置いた、今回のサンプルは波のように揺らしてますが、これは三角関数を使って、X座標を行ったり来たりさせてます。メッシュ非表示にするためにstroke(false)にしたときの結果、こんな感じになります。
chibikoro_wave.png
欠点として、一部、ポリゴンの隙間が出来ることもあるということや、
ふちはジャギーが出て汚い、ということです。
場合によってアニメーションで見せる場合、そこまで気がつかずごまかせることもあるけど、
その場合かなりパフォーマンスが低下するので、注意が必要です。
何か案件で使えそうな時は自己責任でご自由にお使いください。

HTML5-WEST.jp 勉強会「HTMLでつくるカメラ&落書きアプリ」フォローアップ

2011-09-24 15.11.25.jpgのサムネール画像

始まって2回目のHTML5-WEST.jp勉強会なんですが、50人も集まりました。

みなさんお疲れさまでした。
僕は「HTMLでつくるカメラ&落書きアプリ」というセッションでお話をさせてもらいました。

スライドはこちらです。

セッションの中でお話しましたけれど、まだ現在では、HTMLやJavaScriptベースでカメラを使ったWebアプリは作れません。
これは各ブラウザがまだこの機能をサポートしていないからです。
ただ、テストとして唯一Operaの特殊なビルドがそれを可能にしています。
Webの未来という意味では面白い試みだったと思います。
もうすでにW3Cのワーキングドラフトに上がっているので、「Webでこういったことが将来出来るようになる」ということを示唆するものなんですね。
1行のHTMLと簡単なJavaScriptのサンプルでカメラアプリが作れるデモを実際披露すると、色んな人の反応が多くて楽しかったですね。
getUserMedia()というJavaScriptのメソッドは、カメラやマイクを取得する機能ですが、仕様はまだあやふやでこれからもう少し整備されていくでしょう。
最後にアイデアネタとして「変顔カメラアプリ」として画像がウネウネ動いていたのは、実はとても頑張って作ったんです。
将来はもうちょっとアレをアプリっぽくしますのでご期待ください!!
スクリーンショット(2011-09-24 17.34.21).png
デモでお見せしたテクスチャマッピングによる画像を変形させて撮影

canvasを使って知識ゼロから独学してみた「エセ」テクスチャマッピング入門以前編

赤い点をドラッグしてみてください。

あくまで基礎中の基礎なので、もっと詳しい方はこちらのほうがおすすめです。
「2009-02-11 – 最速チュパカブラ研究会」
http://d.hatena.ne.jp/gyuque/20090211#1234364019

■画像を3D的に遠近感を出すには?

例えば正面を向いている画像が上を向いているように見せるにはどうすればよいでしょう?
それは、画像を台形にして上辺が狭くなれば、立体的に上を向いているように見えますよね?

【画像(写真)が上を向いているように見せたいとき】

今回はcanvas要素を使ってこういった画像を変形させることにします。
しかし、現在仕様が固まりつつあるcanvasの2Dレンダリング方式では、こういった画像に奥行を与える直接的な機能を持っていません。
つまり長方形のカタチから台形に変形させるのは簡単にできないというべきです。
Flash Playerはvar10からムービークリップ等を3D的に回転させたりすることが可能になりましたが、canvasの場合は何らかの方法で実現しないといけません。
(canvas、ではなく、正式には「CanvasRenderingContext2Dというcanvas内のオブジェクト」なんですが、便宜上canvasと言うことにします。)

■canvasでできる変形の基本

画像が3D的に見えるように台形に変形させる前に、canvasでできる変形とはどういうものか、おさらいしておきましょう。

ここでいう「変形」というのは、以下のとおりで、これらは全てcanvasに直接備わっているので簡単に変形が可能です。

【これらはcanvasで直接変形が簡単】

しかし、先ほども言いましたとおり、台形みたいに、あるいはもっと不規則な四角形に変形する命令(メソッド、といいます)は直接canvasには備わっていません。
例えば以下のような台形や不規則な形状の変形は簡単にはいきません。

【これらはcanvasで直接変形はできない】

よって、直接できないこれらの変形は次の方法を使うことで実現できます。

■2つの三角形に画像を割って個別に変形させる

1枚の長方形を台形に変形させるには、左上と右下で三角形を作って2つに割ってしまいます。
三角形はマスク領域となり、左上と右下のそれぞれの三角形にクリッピングマスクするように画像を処理していきます。

なぜこういうことをするかというと、2つの三角形にそれぞれ別の変形を与えると、おおよそどんなカタチの四角形でも作ることが可能になります。
下図では、それぞれの三角形に対し、拡大または縮小、傾斜、移動といった、canvasで簡単にできるメソッドを使って別々の変形を与えてます。

【2つの三角形に別々の変形を与えると、どんな四角形でもつくれる】

■左上の三角形の画像をまずは変形させてみる

【必要な座標の情報は4箇所。】

まずは呼び方、座標のルールから決めましょう。
左上の三角形を「セグメント1」、右下の三角形を「セグメント2」と呼ぶことにします。
セグメント1、セグメント2の頂点は当然それぞれ3箇所あります。(三角形ですから)
この中で2つのセグメントは2つの頂点を共有しないといけません。
どこでしょう?
右上と左下ですね、これがくっついているべきですよね?
便宜上、ポイント0を左上、ポイント1を右上、ポイント2を左下、ポイント3を右下、
と、呼ぶことにしましょう。
ここまでが呼び方と座標のルールです。
そして今回使う画像のサイズは横400px、縦300pxとしましょう。

先ほど、canvasで簡単にできる変形として、拡大または縮小、傾斜、移動などがあると言いましたが、実はこれらを一回で行うメソッド、今回はsetTransformというメソッドを使います。

こちらにて解説されています。
http://www.html5.jp/canvas/ref/method/transform.html

計算方法は基本的な算数なので、苦手な僕でも何とか理解できました。
では実際画像を描画してみましょう。

セグメント1の「変形の基準点」、つまりどこを中心に変形していくかを決定するのはとても重要です。
これができないと、カタチ自体は変形できても、三角形の外にはみ出したりします。
セグメント1の「変形の基準点」はポイント0の位置にします。
その指定のやり方は、setTransformの第5,6番目の引数に、ポイント0のXとY座標を指定します。
例えば、画像のポイント0(左上)の位置がcanvasの左上からXが80px, Yが40pxだとしたら、
画像のdrawImage(img, 0, 0)にしておいて、setTransform(1, 0, 0, 1, 80, 40)とします。
ここ、大事です。
間違ってdrawImage(img, 80, 40)にすると、変形の基準点がポイント0基準になりません。
drawImageする座標は、canvasの左上の座標にしましょう。
setTransformによって 80px, 40pxの位置にちゃんと移動してくれます。

【画像の横の伸縮率を変更】

もしもポイント1(右上)が右に動いたら、セグメント1の画像の横方向の拡大縮小率を上げます。
例えば、横幅400pxの画像があり、ポイント1(右上)の座標が右に120px動いたとしましょう。
そうすると、120÷400 = 0.3となり、原寸の1と足して1.3が拡大率になります。

setTransform(1.3, 0, 0, 1, 80, 40)

とすることで、画像の横の長さがポイント0から移動後のポイント1まで拡大されます。
この計算方法を使って、画像の縦の拡大および縮小率も応用することができます、値はsetTransformの第4引数にいれます。

■傾斜に対応させたらセグメント1は完成

setTransformの第2,3引数を変更

セグメント1はあと傾斜させて完成です。
ポイント1(右上)が下に40px動いたとします。
この時点で画像は右下下がりに傾斜しないといけません。
縦方向の傾斜の計算方法はこれだけです。
40(移動距離) ÷ 400(画像の横幅) = 0.1
この結果をsetTransformの第2引数にいれます。

この流れで横方向の傾斜も行ってみましょう、縦方向の傾斜と考えは同じです。
例えばポイント2(左下)が左に60px動いたとしましょう。
横方向の傾斜の計算方法は、移動距離が左(負の方向)なのでマイナスとなり、
-60(移動距離) ÷ 300(画像の縦の長さ) = -0.2
これをsetTransformの第3引数にいれます。

これで変形完了です。

■画像をクリッピングする

三角形にするので、Illustratorでおなじみ「クリッピングマスク」と同じような機能をもつ、clip()というメソッドがあるので、それを使います。
canvasでパスによる図形を描くことができますので、moveToやlineToなどのメソッドで三角形を描いたあと、clipを実行してsetTransformで変形させて最後にdrawImageすると、画像は三角形の形で切り取られた格好になります。
原則、clipメソッドを使うときは、処理の前後にsaveメソッドとrestoreメソッドを使います。
例えばrestoreしないと、clip領域(マスク領域)が解除されません、状態をsaveメソッド実行時に戻すという繰り返しを行いましょう。

ここまでの結果にするには、以下のようなコードになります。


ctx.save(); //描画状態を記憶しておく(※1)
ctx.beginPath(); //パスを描画開始
ctx.moveTo(80,40); //ポイント0の座標
ctx.lineTo(600, 80); //ポイント1の座標
ctx.lineTo(20, 340); //ポイント2の座標
ctx.closePath(); //パスを閉じる、三角形の形が決まる
ctx.clip(); //上記のパス領域をクリッピング領域とする
ctx.setTransform(1.3,0.1,-0.2,1,80,40); //変形を実行
ctx.drawImage(img,0,0); //画像(写真)を描画、すでに変形されている
ctx.restore(); //クリップ領域を解除(※1)
ctx.strokeStyle = "red"; //線の色を赤にする(最終的に不要)
ctx.stroke(); //三角形の「線」を描く(最終的に不要)(※2)

(※1)
サンプルではこのコードが繰り返し実行されるため、クリップ領域も毎回解除しなければなりません。
saveによって、クリップ領域が存在しない状態を記憶しておき、restoreでsave時の状態に戻す作業をします。
この考え方はclipしながらアニメーションを行う際は必須のテクニックです。
(※2)
clipはstrokeして図形の線や塗りを描かないといけないと思われがちですが、closePathした時点でクリップ領域が決まるので、stroke(線)やfill(塗り)をする必要はありません。

セグメント1完成

↓↓このボタンを押して、クリップ状態と非クリップ状態を見比べてください。

■セグメント2の作成で気をつけておきたい点

セグメント2も基本はセグメント1と一緒です、応用は利きます。
ただ、大きく注意するべき点が1点、それは「変形の基準点」をどこにするか?です。

先ほどのセグメント1は分かりやすく、左上が基準点になれば良かったんですが、

『セグメント2にとってポイント0(左上)の座標は全く意味がない』

ということです。
セグメント2の持つ座標はポイント1から3までです。
ポイント0がどこに行こうが、セグメント2の三角形は影響を受けない(変形しない)というわけです。

要するにセグメント2になったら変形の基準点を別のどこかに指定し直さないといけないということです。

一番分かりやすかったのが、ポイント2(左下)の位置を基準として、そこから伸縮や傾斜を行おうと思います。
よってsetTransformの5,6引数目には、ポイント2のXとY座標をいれるのですが、ここでdrawImage(img, 0, 0)にすると、ポイント2から画像が描画されるので、ポイント2の下に画像が配置されます。
なので、drawImageの第3引数のY座標を画像の高さ分上に配置します。
つまり、今回の画像の高さが300pxなので、drawImage(img, 0, -300)とすることで、画像の左下が基準点にぴったり合った状態になります。

【画像の右下と基準点を合わせる】

これまでが、セグメント1との基準点を考える上での違いです。

■セグメント2完成

↓↓このボタンを押して、クリップ状態と非クリップ状態を見比べてください。

■セグメント1とセグメント2を表示

さて、いよいよ結果を見ることができます。
セグメント1とセグメント2にそれぞれ別の変形を与えて表示させてみましょう。

【継ぎ目に隙間が出ている状態】

これを見てどうでしょう?
満足しました?
僕はとても不満というか残念です、なんでしょう?この継ぎ目。
各ブラウザともどうやらこのような仕様になっているようで、クリップの痕が残ってしまい、継ぎ目に隙間が出ます。
三角形を継ぎ合わすだけでは解決できません。

ここは一つ、簡単な方法で解決してみましょう。
アイデアとしては、セグメント1のクリップ領域を、三角形ではなく、四角形にしようという単純なものです。
つまり、セグメント1の『左上→右上→左下』だった三角形を、『左上→右上→右下→左下』にして、四角形にしてしまい、上にセグメント2を「乗せる」ように見せて隙間をなくすという方法。

ただし、セグメント1は無駄な領域までレンダリングしてしまうので、パフォーマンス的に良いかどうかは、実用レベルだと別な方法も検討しないといけないかもしれません。

【完成】

■アプリ開発のために使いどころとして学んでおきたかった

こういったことをやってくれるライブラリはあるんですが、HTMLをベースとしたPCやスマートフォンの描画系アプリケーションの開発のためには、原理くらいはある程度おさえておいた方がいいかな?と思ってたんですが、結構難しいですね。

何でもライブラリに頼ろうとすると、案件仕様によっては実現困難になりそうなので、画像を変形させる基本中の基本だけでも学んでおきたかったわけです。

もちろん、このままでは何にもなりません。
今回は一つの画像を2個の三角形で分割しましたが、例えば、画像を布やゴムのようにグニャグニャにしたり、扇形にしたり、3D形状にしたり、となると、今回の写真をもっと多く分割していかないといけません。
すると、今回の方法から違う計算方法などを使って実装しないといけなくなるかもしれません。
とにかくまだまだ勉強することはあるってことで。

以上、夏休みの自由研究でした。

画像をモノクロ変化するjquery.monochromer.jsをアップデート

以前ブログにも書きましたjQuery用のプラグイン、jquery.monochromer.jsですが、ある件でこのプラグインを紹介してくださるらしく、ちょっと改良しました。

<img>画像マウスオーバーでモノクローム変化するjQueryプラグイン「jquery.monochromer.js」

色を指定できるデモとソースのダウンロードはこちらでお願いします。

どういったものかというと、img要素にこれを適用すると画像がモノクロになるというものです。
適用方法は簡単で、jQueryを読み込んだ後このプラグインを設置し、指定するだけです。

facebookプロフェッショナルガイド

一番シンプルなカタチ。
monochromerをデフォルトの状態で与えてください。
img要素がグレースケール化します。
本の画像にマウスを乗せるとカラーになります。

今回はイヤラシく、僕も執筆に参加した宣伝も兼ねて「Facebookページ プロフェッショナルガイド」のサムネイルを使います、ゴメンナサイ。


$(".demo01 img").monochromer();

改良点ですが、HTML5のcanvasを使っています。
IE8までは、「なにもしないプラグイン」というように、内部でブラウザ判定をしてます。
つまりIE6などでは、画像が表示されるだけなので、必要最低限の表示は出来ます。
新しいブラウザは機能が増え、古いブラウザはそのままで、、という感じでしょうか?

facebookプロフェッショナルガイド

今度はカラーを指定します。
monochromerのcolorパラメータに、16進数のCSSカラー値を指定します。
この例は#f00、もちろん#ff0000でもOKです。


$(".demo02 img").monochromer({color: "#f00"});

facebookプロフェッショナルガイド

しかし、いきなりページが表示されて画像がモノクロになるとおかしいですね。
通常はカラーのまま、マウスオーバーでモノクロ、という流れにしたいときには、typeパラメータを”false”にしたらOKです。


$(".demo03 img").monochromer({color: "#f00", type: false});

  • facebookプロフェッショナルガイド
  • facebookプロフェッショナルガイド

今度は二つ並べました。
こういったレイアウトをするときは、imgに親要素で囲ってください。
今回はli要素で囲み、liをfloat: leftしてます。
monochromerの指定はcolorパラメータに”sepia”と”blue”を指定しました。


$(".demo04 li:first-child img").monochromer({color: "sepia", type: false});
$(".demo04 li:nth-of-type(2) img").monochromer({color: "blue", type: false});

  • facebookプロフェッショナルガイド
  • facebookプロフェッショナルガイド

ここでaタグを付けないと指マークにならないのですが、Webアプリケーションを制作していると、どうしてもa要素ナシでマウスを指マークにしたいことがあったとしましょう。
この時、実はプラグインの内部的な都合で、CSSでimgに「cursor: pointer;」としても指マークにならないので、パラメータをひとつ追加しました。
それがCSSのcursorプロパティの名前、そのもので、以下のように追記します。
これでマウスを乗せてください、マウスの形が変わると思います。


$(".demo05 li:first-child img").monochromer({color: "sepia", type: false, cursor: "pointer"});
$(".demo05 li:nth-of-type(2) img").monochromer({color: "blue", type: false, cursor: "crosshair"});

実はcanvas要素を生成して、span要素でラップ

span.monochrome-wrapのDOM構造

内部的にcanvas要素を生成して、img要素のピクセルをcanvasに取り込み、変色させています。
img要素とcanvas要素はCSSのpositionで重ねて、その親にspan.monochrome-wrapという要素を生成しています。

レイアウトをするとき、img要素にmarginとpaddingとborderとfloatを指定すると、span.monochrome-wrapに適用します。
しかし他のCSS設定は無視されますので、例えばtransformとかで、マウスオーバーでscaleによって大きくしたり、とかが出来ません。
なので、内部的に生成されたspan.monochrome-wrapに対してCSSを当てるといいです、以下のようなCSS設定でマウスを載せると大きく見せられます。

facebookプロフェッショナルガイド

.demo06 span.monochrome-wrap {
-webkit-transition: .3s;
}

.demo06 span.monochrome-wrap:hover {
-webkit-transform: scale(1.2);
}

将来的には、img要素に指定したCSSプロパティを全部span.monochrome-wrapに適用させたいところ。
実は試したのですが、クロスブラウザの作業でどうしてもうまくいきませんでした。
ぜひ改良したいなあ、と思います。

あと大事なことなんですが、canvasの仕様でドメインの違う画像のピクセルを操作することは出来ないことに鳴っているようです。なので、同じドメイン内の画像だけにおいて使うとよいでしょう。


やっぱりIE9でもキャッシュ有効時のimg要素はonloadを無視する件

ie9.png

今さら書くことでもないのですが、IE6〜8に引き続き、IE9でも同じような仕様なので、自分用にメモ。
JavaScriptで画像(<img>)の読み込みの完了を待ってから処理を実行する時に、キャッシュ対策としてよくやってる

var img = $(this); // <img>を指す
img.src = 画像のパス + "?" + new Date().getTime();
img.onload = function () { //読み込み完了後の処理

でもでも、、今回はちょっと違うケースで、
もう既にHTMLに書かれている以下のようなimg要素のロード完了を待つ場合、src属性の値はもう決まっているから、キャッシュ対策っていうものでもないのです。

<img src="image01.jpg" alt>

IE9の場合では、もう既に画像がキャッシュによって読み込みが完了している場合、
onloadイベントハンドラを実行しないでスルーしちゃうので、読み込み後の処理が全くされない状態でした。
ただしこれはIEだけの問題で他のブラウザは素直に処理してくれるので、
ブラウザ判定をして、「IEで見てる、なおかつ、画像の幅が0ではない」事を条件として、ロード完了後の処理を行う、
さもなくば、他のブラウザと同様の処理としてonloadを使って、読み込み完了を待つ、という処理で対応してみる。

//jQuery使用です
var img = $(this); // <img>を指す
var ua = $.browser;
if(ua.msie && img.width() !=0) {
imageLoaded();
}else{
img.load(imageLoaded);
}
function imageLoaded (){ //読み込み完了後の処理

画像が読み込まれないと、後で処理などをするときに困るので、
画像読み込みとIE9仕様の対策はこれから要るのかな?と。

<img>画像をモノクロに変換しマウスオーバーでカラーに変化するjQueryプラグインを作りました

shot.jpg

クリスマスに何してたかって言うと、jQueryプラグインを作ってました。。

サンプルはこちら。
タイトルの通り、画像をモノクロに自動で変換して、マウスが乗ったらカラーに変化するってやつです。HTML5のcanvasを使ってます。
命名「jquery.monochromer.js」
まず、どんな事が出来るかっていうと、、、
  • カラー画像をセピア調、ブルー調、コントラスト強めのグレー調など、「古い写真」のイメージに変換できる。
  • モノトーンなのですが、CSSの16進数カラー値をそのまま使う事が出来るので、ぶっちゃけどんな色でも使える(カラーのフィルターをかぶせたような感じでとらえてくださいませ)
  • 「フワッと」変移するのか「パッと」変移するのか、スピードをミリ秒で指定出来る(ここはjQueryのアニメーションでおなじみのミリ秒をそのまま)
  • 「最初にモノクローム → (元の)カラー画像」だけでなく「最初に(元の)カラー画像→モノクローム」というように、変移の順番を逆にできる。
で、HTMLコーディングは以下の通り
<ul id=”photoNav”>
<li><a href=”#”><img src=”images/image01.jpg” alt></a>
<li><a href=”#”><img src=”images/image02.jpg” alt></a>
<li><a href=”#”><img src=”images/image03.jpg” alt></a>
<li><a href=”#”><img src=”images/image04.jpg” alt></a>
<li><a href=”#”><img src=”images/image05.jpg” alt></a>
</ul>
よくある光景ですね、ただしHTML5的なマークアップなので、終了タグを省略したりしてます。
使い方は簡単です。
まず、プラグインとサンプルをダウンロードしてください。
で、解凍して、index.htmlのソースを見てください、正直HTMLが分かる方なら全然簡単です。
<head>要素内にjQueryを読み込みます。
さらにその下にjquery.monochromer.jsを読み込みます。そして<li>要素に対してmonochromer()を実装します。
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.4.4.min.js”></script>
<script type=”text/javascript” src=”js/jquery.monochromer.js”></script>
<script type=”text/javascript”>
$(function () {
$(“ul#photoNav li”).monochromer();
})
以上で動作します、ただし注意が1点。
HTML5 canvasのセキュリティ仕様の問題で、ローカル環境では動作しません、サーバに上げて確認してください。
あと、HTML5仕様なので完全にIE8以下を無視しています。
なのでその場合<![if !IE ]>〜などで対処してください。
IE8以下では普通の画像リンクで対応できるというワケです。
では、次に細かい指定ですが、上記の通り色が変えられたり、変移スピードが指定出来たり、マウスオーバーの前後の状態を逆転できます。パラメータを指定しましょう。
$(function () {
$(“ul#photoNav li”).monochromer({
speed: 300,
color: “sepia”,
type: false
});
})
◎変移スピード(speed)
 文字通り、マウスオーバーして色が変わるまでの時間をミリ秒で決められます。
 1000で1秒を意味します。デフォルトでは300ミリ秒(0.3秒)です。
◎変色させたい色(color)
 キーワードとCSSでおなじみ#付きの16進数の2種類が用意されています。
 キーワードは以下の通り。
 gray, lightgray, sepia, blue, green
color: gray
color: lightgray
color: sepia
color: blue
color: green


といった感じで、キーワードで色を指定すると、その通りに変わってくれます。
さらに、もっと細かく設定したい場合、CSSのカラー値(#ff0000で赤、など)を指定してください。
原色に近いほど効果が得られやすいでしょう。

 

color: #ff0000
color: #0033ff
color: #00ff33


最後にtypeプロパティですが、初期状態を「変色している状態で表示」か「マウスオーバーして変色か」をtrue, falseで切り分けられます、デフォルトはtrueです。 

よってこの場合▼
$(function () {
$(“ul#photoNav li”).monochromer({
speed: 300,
color: “sepia”,
type: false
});
})
li要素内の最初のimg要素に対して、
typeがfalseなので、通常時が普通のカラー画像(そのまま)でマウスオーバー時に
セピア調に、300ミリ秒で変色していく。といった感じです。

関西オープンソースフォーラムに出演したよ

daniel.JPG

すごい人の数だった。(写真はOperaのダニエル・デイビスさん)
2010年11月5日〜6日の2日間にわたって、大阪南港ATCで開催された関西オープンソースフォーラム。
僕はなぜか、HTML5のライブコーダーとして出演。

Operaのエバンジェリスト、ダニエル・デイビスさん、Googleの北村英志さんとも仲良くさせていただき、「また今度大阪で!」と伝えておきましたが、果たして伝わっているでしょうか??

さて僕のセッションは簡単ではありますが、HTML5 canvasで作るお絵かきアプリを作ってみました。
本編ではもっと簡単なんですが、ここでは「もうちょっと書いたらこんなのも出来ますよ」という、黒板付き、色をドロップダウンで選べて、線の太さもスライダーで変更出来るアプリのコードを書いておきます。
これが当日来ていただいた方に見てもらった、例のヤツです。

Operaのダニエルさんに教えてもらった大事な事。
JavaScript内にclear()というメソッドを使ったらダメだよ、予約されているから。という事でした。ありがとうございます!!

この画像をクリックしたらデモに飛ぶよ!試してみてね〜。
↓↓↓↓↓

HTML5 canvasのテクスチャマッピング「Projective」

canvasで画像を歪ませる、例えばActionScript 3.0のdrawTriangleのような、メッシュを作ってマッピングするにはどうしたらいいんだろう?と思い調べてたら、やはりありました。

ちょっと自分なりにマッピングだけ試してみます。結構簡単に出来ます。
詳しくは英語ですが
原理はcanvasのコンテキストが持つメソッドtransformメソッドを使っているようです。
各頂点にアクセスしたりして座標を入れ替え出来たら、布みたいにユラユラと揺らせたり3D表現も可能ですね、そういえば布のように画像を揺らすデモもありますね。
やはりアフィン行列変換は理解しとかないと使いこなすのは難しそう、さらに悩みは続く、、、。

HTML5 videoの「映り込み」はCSS3または<canvas>で出来る!?

たまに見かける、画像や動画の下に、反転した「映り込み」を再現する方法です。

reflect_video.jpg
一つはcanvasを使って行列を縦に反転、あとはピクセルのデータのアルファ値を徐々に下げていく方法、これはJavaScriptを使って細かに表現できます。(簡素なサンプルコードは以下)
もう一つはCSS3の「-webkit-box-reflect:」を使う方法、CSSが得意なデザイナーさん向けとも言えます。
では、両者、どのようにコーディングしていこうというわけですが、、まず、CSS3の方から。

CSS3で「映り込み」をさせるには「-webkit-box-reflect」プロパティ


さて、このコードは「-webkit-box-reflect:」の「below 1px」が結構ポイントかもしれません、「隙間」をここで調節します。
あと、グラデーションですが、このグラデーションの意味が分かりづらいって方も多いでしょうから、from、color-stop、toなどの意味を理解する事が大事かもしれません。

私が作ってみた「Grad? Gradient!-CSS3 GradientButton Generator-」でも、CSS3グラデーションが簡単に作れるので、試してみてください。

たったこれだけ、CSS3のプロパティ1つで実現出来るっていいですね?
しかし、よく見ると「-webkit-」という文字通り、これはFirefoxなどでは使えません。

canvas要素を使って、もっと自由度の高い「映り込み」

これだとcanvas対応しているブラウザなら大丈夫です。でも実際はちょっと強引な方法です。
あとiPhone対応の形式で書き出すと、クリックしたら動画が独立して立ち上がるので、この方法だと無理ですね。。。

まずはHTMLを書きます。


そしてJavaScriptです。



上記のスクリプトですが、「ctx.transform(1,0,0,-1,0,360);」ってありますよね?
これが画像を色々変形させることができるもので、4つ目の引数の-1ってので反転をしています。そのままだと枠外にいくので最後の引数「360」は縦方向に360pxずらすことで反転します、すなわち反転はこの1行ですべて終わっています。

「var idata = ctx.getImageData(0,0,640,360);」
とありますが、これは、イメージデータと呼ばれるピクセル単位の集合体がオブジェクトとなったもので、上記だと、変数idataに「data」というプロパティにアクセスすると、とてつもない長いピクセルの情報が配列として返ってきます。
たとえばこんな感じです。

「215,100,50,255……」
 ↑
これは、RGBAの値を1次元配列ですべてのピクセル情報が収まっているものです。

こんな感じでとらえます、ある意味分かりやすいですよね?
Red: 215, Green: 100, Blue: 50, Alpha: 255……

これが延々と続きます、ピクセルが続く限り。

なので、idata.dataにアクセスすると、膨大な配列が返ってくるんです。

で、毎フレーム毎にその配列のAlpha値(4番目)の値のみアクセスして、値を255から徐々に減少させていけば、だんだんフェードアウトするような形になり、「映り込み」
っぽく見えるわけです。

普通for文って



と、書きますが、4番目(配列でいうと3番目)にアクセスして値を入れ直す必要があるので



と、透明度のインデックス番号だけ狙ったらいいでしょう。

イメージデータはもっと勉強しないといけませんね。。
今日はこんなところで。

HTML5 Audioでドラムマシンを作ってみた、さてその結果は?

さて、HTML5のAudioって激しく扱うとどうなるんだろう?

例えばリズムマシンみたいに、、と思って試しに作ってみました、正直この使い方が良いのかか分かりませんが、ChromeとSafariだったらダントツでSafariが安定しました。
こちらから
HTML5 Audio RhythmBox
HTML5 Audio RhythmBox
というわけで、Safariで遊ぶのがオススメです。
各ノートごとのベロシティを調節したかったんですが、もう手軽に出来るレベルじゃなくなってひとまずこれで試してみました、各トラックのボリュームはスライダーで決められます。
正直ハットがうるさいので、あ、jQuery UI使ってます。
雑感ですが、Audioオブジェクトをこんな風に使うな!と怒られそうなくらい忙しい動きには使わない方がいいのかな??というほど、部分的にもたつきます。
今日はここまで、ではでは。。