最近jsdo.itに投下したもの

最近ネタ色強め。次からはちゃんと一つ作るごとにこっちにも書くようにしよう。

鎖っぽい物

http://wonderfl.net/c/9CU7が面白かったのと、掃除機のコードのロジックを応用すればできそうだということで作ってみた。

fry element (HTML 9)

http://picup.omocoro.jp/?eid=909を実現してみた。途中までフライと天ぷらを勘違いしていたけど、ロケールに応じて変わりますというネタで押し切った。

effect test #2

ビデオフィードバックの実験。sizeを20にしてマウスをぐるぐる動かすのがおすすめ。

等高線っぽい描画のテスト

そのまんま。こういったものをランダムに配置して地形っぽいものを生成したかったのでそのテスト。

canvasのglobalCompositeOperationでマスク処理

貧弱すぎるcanvasのglobalCompositeOperationをマスク処理に使ってみた。clipでもマスクできるけれどもこっちだとlineWidth=20とかのstrokeもマスクに使えるし、反転もできるし。

赤いセロファンっぽいもの

印刷物とかでよくある、赤いセロファンを上にかぶせると赤い部分が消えて見える、というのをやってみたかった。単に上にかぶせると透過しない。opacityで調整しても混色方式が違う(セロファンっぽくするには乗算?)ので、z-indexで後ろ側にセロファンを配置。ただ、セロファンにドラッグ移動のコードを書いても、前面にある要素がクリックを拾うのでその辺はうまくごまかす。

span.looseはセロファンと印刷物の色が微妙に違って見えちゃってるよ!というのを表現したんだけども分かりにくかった。

緑のセロファンっぽいもの

赤いセロファンができるなら、緑のセロファンチェックペンもどきも。半透明色をうまく指定してやればうまい具合に消えてくれる。

cascading scroll

滝のような川のような感じ。-webkit-transformと-moz-transformで細切れにしたdiv要素をうまく組み合わせて、中央のスクロールイベントを取って細切れのスクロール量を調整して、といった感じ。