barmamutha.net

Canvas パーティクル + shadowBlur

CanvasにはShadows、いわゆるドロップシャドウを付けるプロパティがある。

指定できるのは
・shadowColor （色）
・shadowOffsetX （横位置）
・shadowOffsetY （縦位置）
・shadowBlur （ぼかしのサイズ）
の4つ。

キャンパスに対して一律の指定しかできないので、
同一キャンパス内これは影付きでこっちは影無しとかはできない。
さらに処理負荷もかかる。

参考
http://www.html5.jp/canvas/ref/property/shadowBlur.html
http://www.w3.org/TR/2009/WD-html5-20090825/the-canvas-element.html#shadows

Comments: 0
Trackbacks: 0

Canvas Mouse Trailer

2010-05-27 (木)
html5
Canvas | globalCompositeOperation | html5

wonderfl fork第3弾。

canvas12
html（別ウインドウ）

ポイントは

context.globalCompositeOperation = "lighter";

の箇所。
これで上書き部分が加算で描画される。

参考
http://wonderfl.net/c/aFNd
http://www.html5.jp/canvas/ref/property/globalCompositeOperation.html

Comments: 0
Trackbacks: 0

Canvas 軌跡にパーティクル

2010-05-26 (水)
html5
Canvas | hsl | html5 | パーティクル

wonderfl fork第2弾。

canvas11
html（別ウインドウ）
マウスに追随するオブジェクトとパーティクルオブジェクトの
クラスはばっさりと簡略化した。

毎描画毎に表示オブジェクトを格納した配列を更新している。
この辺はaddChild/removeChildライクに出来るようなライブラリ作ったら
ActionScripterは幸せになれるかな。
visibleとかscaleとかをASライクに使える疑似Spriteクラスとか。

ちなみに今日は破の発売日らしいのでこんなのも作った。

canvas11_2
html（別ウインドウ）

CSS3ではhslで直接色を指定できる！ので
上記の実装は超簡単。

h+=10;
var col='hsla('+h+',100%, 50%,1)';
context.strokeStyle  =col ;
if(h == 360){
	h = 0;
}

こんな感じ。

あー破が見てぇ。けどオレは劇場版BOXセット var.3Dが出るまで我慢するんだｗ

参考
http://wonderfl.net/c/ybeh

Comments: 0
Trackbacks: 0

CanvasでLiquid10000

2010-05-25 (火)
html5
Canvas | html5 | パーティクル

さて、Canvasでどこまでの事が出来るのか。
ます手始めにLiquid10000をforkして
Canvasの描画性能を見てみようかと思う。

canvas10
html（別ウインドウ）

10000はさすがにムリがあるが1000程度ならまぁ何とか。
オリジナル版との違いは大きく以下の通り。

PerlinNoiseの描画

オリジナル版
ノイズ用のビットマップをperlinNoiseで生成。
Canvas版
予め外部ファイルを用意。

ビットマップからRとGの値を抽出しxy軸の加速度に変換

オリジナル版
getPixelでRとGの値を抽出しxy軸の加速度に変換する。
Canvas版
外部ファイルの色情報をgetImageDataで配列化。

残像処理

オリジナル版
ColorTransformで着色しながら暗くする。
Canvas版
全領域に半透明(alpha0.1)の黒を重ね塗りする。

やってみてわかったがCanvasのアニメーションはwonderflのパーティクル系と
非常に相性が良い。
というより、他に向いていないというべきか。

参考
http://wonderfl.net/c/4yyT

Comments: 0
Trackbacks: 0

Canvasのアニメーション

2010-05-24 (月)
html5
Canvas | html5

まずは基本から。
Canvas自体にはタイムラインの機能がないので
一定間隔でCanvasを再描画することでアニメーションを作成する。

その際用いるのがsetInterval と setTimeout 関数と言うことだが
setTimeoutは設定した時間後に1回しか実行されないので
基本的にはsetIntervalを使用することになる。

setInterval('animateShape()',500);
setTimeout('animateShape()',500);

参考
https://developer.mozilla.org/ja/Canvas_tutorial/Basic_animations

ライブラリもいくつか公開されている。

jcotton
http://jcotton.sourceforge.net/
メソッドチェーンで記述。

tutorialCanvas.add(
  jcotton.rect(0, 0, 50, 50)
    .animate({xposition: 100}, 500)
)

cakejs
http://code.google.com/p/cakejs/
関数で記述？

 circle.animateTo('scale', 2, 1000, 'sine', true, true)

Processing.js
http://processingjs.org/
おなじみProcessingのjs版

Comments: 0
Trackbacks: 0

Canvasを試してみる　その6　完結

2010-05-19 (水)
html5
Canvas | createImageData | createLinearGradient | createRadialGradient | drawImage | getImageData | globalAlpha | html5 | putImageData | range

つーわけでCanvasの試行がてら
TiltShift Generatorもどきを作ってきたが
一通りの機能を設定したところで完成とする。
TiltShiftかどうかすら疑わしい出来だが。

本当はfile apiも使って任意のデータを編集できるようにしたかったが
それはsafariが対応してからにしよう。

canvas09
html（別ウインドウ）

感想

HTML5 vs Flashって？

だれが言い出したんだろうか。
何から何まで（でもないが）クライアントサイドで出来てしまうFlashは優秀だ。
確かに、今回の”TiltShift Generatorもどき”作りながら
「ブラー処理ひとつ出来ぬモノにFlashの代わりが務まろうなど片腹痛いわ！」
とか自分の技術力を棚に上げて思ったりもしたが
別にブラー処理なんてクライアントサイドで実装する必要も無い。
負荷のかかる処理なんかは、それこそ雲の向こうで処理してもらって
その結果が満足に表示できれば何ら問題ないわけで。

単純なHTML5 vs Flashって事で比較すると機能面でFlashのコールド勝ちだけど
そもそもそんな単純な話じゃないので比較自体意味を成さない。

で、HTML5っていつ普及するの？

単純な疑問がここ。
Flashの最も優れた所はクロスブラウザであるところだと思っている。
個人的な意見だがFlashが爆発的に普及したのは
・ネスケとIEで同じように見える
・金額（利幅）が大きい
っていう制作側に対する恩恵が大きかったからで
ユーザーが望んだ結果と言うよりは送り手側の都合の方が大きかったからだと思っている。

僕が2000年代初めに働いていた会社では
全部のブラウザで同じ見え方にするっていう事が何よりも優先されていて
Win、Mac間のテキストの大きさとかマージンの調整とか何かと面倒が多かった（cssが普及する前だったし）。
でもFlashだったらpluginさえ入っていれば見え方も同じ、さらにレイアウトも自由自在。
「じゃFlashにしましょうよ」は魔法の言葉ｗ。
それにFlashだと一人、もしくは少人数で制作が可能なうえ、
大量のHTMLをコーディングするより金額が大きいと言う状況だった。
今考えるとベクターベースで容量が軽いとかはどちらかというと外向けの理由の様な気がする。

なのでHTML5の実装状況が各ブラウザでまちまちってのはホントいただけない。
将来的にはマシになるかと言えばどうだろう？
未だにIE6がーとかだしなー。

とは言っても

今後Flashだけで家が建てられるとか言う状況でもない。
広告費は減っているし、スペシャルコンテンツでウン百万とかいう時代は多分終わりつつある。
というかFlashはスキップされるためのオープニングとかじゃなくて
もっとFlashの機能が最大限活かされるイカした場所で使われるべきだと思う（具体例は出てこないけど）。

というわけで

まぁ色々書いては見たけど
そんなことより
次はCanvasのアニメーションを試してみたいと思う。

だってほら
「動いてる、動いてる、いいなーーわっくわくするなーー♪」
とか言いたいじゃん。