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番目)にアクセスして値を入れ直す必要があるので



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

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

[大阪DTPの勉強部屋]9/25(土)開催!スクリプト特集に出演!?

大阪DTPの勉強部屋 第6回目の勉強会が開催されます。
↓内容はこちら(引用です〜)

第6回勉強会の開催が決定しましたのでお知らせいたします。
今回は市川せうぞー氏をスピーカーにお招きします。
Session-1では、InDesignの正規表現について、
Session-2では、スクリプター4人によるスクリプトについてのディスカッション。


で、この日のメインはやっぱりこの人、市川せうぞーさん。
DTPの勉強会でAppleScriptやJavaScriptのプログラミングの話が出てくるとは、結構新鮮な気持ちは僕だけで、実は皆さん相当なプログラミング猛者だったりします。

今、開催の内容について色々打ち合わせているのですが、なんと、DTP系の制作会社の中には、自前でInDesignの自動化スクリプトをプログラミング出来る人が1人はいるとかいないとか。。(噂)

さらにクラスベースとかプロトタイプとかやろうか?って言われたら間違いなく入門者レベルの話ではなくなりそうな気がしますが、そんな無茶をやろうとする大阪DTPの勉強部屋、いったいどうなるのでしょうか?
いや、きっと面白くて終わるに決まっている、と勝手に思っていますが、そんな中、
このSession-2になんと僕が含まれています。。

なんと私、、、

司会。

AppleScriptわかりません・・・

いや、面白いまま終わるに違いありません、、、って責任持てないよ、えむさん(主催者の方です。)。

まあ、楽しくやりましょう、せうぞーさんのアツいトークが楽しみです!!

■内容(予定)
Session-1
InDesign者のための正規表現入門

【概要】
InDesignを使って正規表現の基礎と実例を学べるワークショップ

【ターゲット】
正規表現を使ったことがない方
使ったことはあるが、ちょっと自信がない方

【ゴール】
正規表現を学び始めるきっかけになる
テキストの自在感を感じられる

スピーカー:市川せうぞー氏(ShowTime+one)(名もないテクノ手

「InDesign者のための正規表現入門」の電子書籍をePubで執筆中。
会場内でCD販売の予定です。

Session-2
ディスカッション

秋葉秀樹〈司会進行〉←なんと私!?
市川せうぞー氏
たけうちとおる氏(たけうちとおるのスクリプトノート
akane_neko氏(ちくちく日記
上記の方達のスクリプト談義や参加者の質問に答える等を予定しています。


市川せうぞーさんはこの業界、知らない人はいまい、そんな方。
たけうちとおるさんは、今年6月、東京表参道のAdobe Station5で開催されたDTP Booster
で共演させていただいた方、自作のスクリプトを多数公開している方。
あかねさんは、遠いところに(南の方)お住まいのとても素敵な女性の方です。

今回、東から南から、素敵なゲストばっかりのイベントになります。
楽しみ、そして、、、どうしよう。。

せうぞーさんの日記はhttp://d.hatena.ne.jp/seuzo/

あと、関係ないけど、ASとJSって言われた時、
僕的にはActionScriptとJavaScriptって見えるんだけど、どうやらASはAppleScriptなんですね、感覚的に。

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

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

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

HTML5-WEST.jpロゴマークをデザインしました。

html5westlogo.jpg

以前京都で開催されたオーブンソースカンファレンス2010に、HTML5-WEST.jpコミュニティとして僕も出演させていただきました。

そのときに、関西のHTML5勉強会をしていこう的な目的でこれから活動を始めるということですが、コミュニティのロゴマークを作りました。
コンセプトはこんな感じです。
  • 親しみ、という目的を動物を用いて表現したいため、日本人( jp)の多くが愛着を持つネコをモチーフにしてみた。
  • 活動指針の1つとして、デベロッパーだけのものではなく多くのデザイナー・クリエイター層にも親しまれたい。
  • 発足時の2010年あたりにたまたま「ネコ鍋」が流行り、YouTube等動画サイトに多く登場したこともあり、地球を鍋に見立て、私たちWeb制作者、またはエンドユーザが世界を見渡す様をロゴマークにし、発足の歴史も伺わせるようにしてみた。
  • 「愛らしさ」から男性だけでなく女性のクリエイター、デベロッパーもしくはエンドユーザにも目を向けて欲しいという願いも込めている。
  • 文字のフォントに関しては「Garamond Premier Pro」を使用。
これからは僕は教えてもらいたいことがたくさんあるので、大阪でもとても小規模だとは思うけれど「読書会」とかゆるくやっていきたいなあと。。。
そんな感じです。
サイトはまだですが、そのうち立ち上がると思います!!
またここでも紹介しますね、ではでは。

CSS3グラデーション作成サイト-Grad? Gradient!-作ってみました

ひとまず、この手のCSS3のプロパティや値を表示してくれるジェネレータは結構見かけますが、一番CSS3で取っ付きにくいその一つとしてグラデーションだと思う方も多いでしょう。

レンダリングエンジンによって書き方も変わってくるグラデーションはなかなか憶えにくいので、少なくともそこだけ作れたら良いなと思って、なにか作ってみようと思うのがキッカケでした。
1.jpg
(↑そろそろちゃんとサイトを持ってそこで運営しないとなあ、と思ってます、ひとまず個人ブログで。)
JavaScript始めたばかりといってもいいので、ソースはとんでもない事になってますが、FireFox, Safari, Chrome(どれもMac版)でしか確認とれてませんが、テストで上げてみます。
習作ということでご理解ください、たまにおかしなCSSソースを吐くかもしれません。。
2.jpg

縦のグラデーションスライダーは、PhotoshopやFireworksなどでも可能な、色の追加が可能です。クリックすると、そこにスポイトみたいなのが現れます、ダブルクリックでカラーピッカーが出ますので、色を選択してOK。
3.jpg
左下のボタンは、サンプルとして使えます。
クリックすると、そのボタンのグラデーションの状態が左上スライダーにも反映されます。
このサンプルグラデーションからさらに加工ができます。

5.jpg

右下にはCSS3コードが出てきます、ただし、この「Grad? Gradient!」はCSS2の知識がある方に向けて(つまり僕みたいな)作ってあるので、font-weightやpaddingといったプロパティは吐きません。
(そこまで作るのも大変、、、)
4.jpg
ただし、右上のtext-shadowなど、ここは練習のため、自分で書くようにして憶えましょう!
(その方が自分のためだと思って...)
あくまで無責任に作ってある習作なので、いかなる責任も負えません(笑)