wonderfl,jsdo.it Meetup #1 行ってきた

wonderfl,jsdo.it Meetup #1 補欠繰り上がりになったので参加させていだたきました。 僕の本業とはかけ離れた層の方々がFlash,HTML5について様々な話をしていました。 普段は地面の下を潜って水道管を整備してるような立場で仕事してるので、 今回は制作サイドの方々に感性を刺激され、モチベーションが上がっていくのがわかりました。 たぶん。 制作サイドの知識はほとんどない自分ですが、 これを機にちょこちょことFlash, HTML5について勉強していきたいと思います。 手始め…

Javascriptでカラーヒストグラム

画像のカラーヒストグラムをJavascriptで。 jsdo.it:Color Histogram using Web Workers – jsdo.it サイト内:HTML5 Color Histogram using Web Workers Web Workers を利用しています。 Workerプロセスに画像データを渡し、Worker内部で各チャンネル毎にヒストグラムを計算して返却。 通常のWorkerでは、Workerインスタンスとバックグラウンドプロセスが1対1で対応してい…

Javascriptで3D入門

>> My 3D Library Test – jsdo.it 3D表現にはあまり詳しくないのですが、Javascriptの勉強ということで3Dライブラリを書いてます。 jsdo.itの文化に合わせてビジュアル的な要素を持ったサンプルで試していこうと。 Actionscript3.0ネイティブとPapervision3DライブラリのAPIを両方参考にして書いたので、 クラス設計も曖昧で試行錯誤中ですが、そこも含めて少しずつブラッシュアップしていこうと思います。 以前、jsdo.itに…

jsdo.itで遊ぶ

jsdo.it – share JavaScript, HTML5 and CSS wonderflのHTML5版、おもしろいですね。 JavascriptだけでなくHTMLやCSSも編集できるので、制作さんのマークアップの練習にも利用できます。 wonderflとの一番の違いは、その利用者層の広さだと思っています。 前述のように制作さんでもHTML+CSSのプレイグラウンドとして利用できるし、 デベロッパのJavascriptの書き方も人それぞれで幅広く、見ていて飽きません。 手続…

CSSの解釈について

業務の合間に制作部の社内勉強会にちょこちょこ参加していろいろ学んだのでメモ。 ここではCSSの最適化について。 * ブラウザはCSSをどう解釈している? ルールを照合するとき、右端のセレクタから調べ始めて、順に左のセレクタを調べていく。 ということは、

のようなルールの場合「contents という id を持つ要素を探して、その直接の子要素が li 要素かどうかを調べる」ではなく「すべての li 要素について、その直接の親要素が…

HTML5の勉強

HTML5::Heart Surface (Firefox3.5, Safari4でのみ動作確認しています) 先日の社内コンペでHTML5を使ったすごいデモを出してきたチームがあったので、 僕もそれに刺激を受けていろいろ調べています。 以前Flashで作ったものをHTML5のcanvas要素を使って作り直したりしながら勉強。 簡単な画像処理なんかもできそうなので引き続き調べていきたいと思います。 [2010/03/21 追記] ソースコードを大幅に書き換えました。 ネイティブのJavascrip…

HTML5でSymmetric Nearest Neighbor

久しぶりの投稿; Demo: HTML5 Image Processing (Symmetric Nearest Neighbor) (Firefox3.5とSafari4で動作確認しています) HTML5でConvolutionFilterに続いて、簡単な画像処理を試してみます。 以前、ActionScriptで書いたSymmetric Nearest NeighborをJavaScriptで。 半径を大きくするとそれなりに絵画っぽくなってくれますが、やはり重いです; ・クライアント [cra…

HTML5でConvolutionFilter

HTML5のcanvasを使って簡単な画像処理をやってみます。 試してみたのは基本的な畳み込みフィルタ。 今回はAS3のConvolutionFilter風のインタフェースで作りました。 Demo: HTML5 Image Processing (Convolution Filter) 汎用的に作ろうとすると少し時間がかかりそうだったので、ひとまず畳み込みフィルタの部分だけ。 引数はAS3のものよりずっと少なく、matrix, divisor, bias の3つ。 matrixXやmatrixY…