HTML5でできる！あんなこと、こんなことニコニコ事業本部 企画開発部 ろーじー

#1 前回の宿題

前回の宿題

HTML5を有効活用しているサイトを探そう

3件来ましたhttp://jsdo.it/

http://arandomurl.com/2010/07/25/html5-pacman.html

http://www.patrick-wied.at/static/nudejs/

jsdo.it

ブラウザ上で書いたコードがそのまま動くサービス

HTML5 + CSS3 + Javascript

みどころ！

最新技術のサンプルの宝庫

HTML5で出来ることや面白いテクニックを探すならココがオススメ

CSS3でうごく地獄のミサワ！！！

HTML5 Pacman

HTML5のCanvasで作られたゲーム

本物のパックマンみたいな挙動

みどころ！

ちゃんと効果音が付いてる！(FlashではなくHMTL5のAudio要素で実現)

ぬるぬる動く！

Nude.jsえっちなのはよくないとおもいます

っていうかHTML5と違う！

改めてnude.js

渡された画像がヌードか判定できるJavascript

Javascriptで画像の判定やってるのがすごい

期待してもサンプルは出ませんよ

#2 みゆっきの宿題

実際に何かつくってみる

って話だったよね

とりあえず

みよう

DEMO

動画にフィルタ

モノクロ

モザイク

パズルっぽく

モノクロ処理

(R + G + B) / 3 じゃ実はダメだったり

モノクロフィルタって？

みゆっきが採用した方式はRGB→YUVに変換してY(輝度)のみを取り出す方式

他の方式だとNTSC係数を利用するものや、HDTV係数を利用した加重平均など

ちょっとそれて色のお話

ディスプレイひとつでも色味が変わったり

「赤い丸」と「青い丸」では大きさが違ったり

色覚の錯覚を利用したトリックアートなんかも

モザイク処理

N x Nマスの平均を取ってモザイク

実はこれにも種類があったり

3つめのデモも広義のモザイクに入ります

可逆と非可逆

モザイク処理には可逆と非可逆が存在してます

非可逆がデモのような平均値を取るもの(えっちなビデオなどで使うのがこれ)

可逆がデモ右下に出ていたようなもの

モザイクの復元

テレビドラマであるような復元は無理

基本的には単に画素数が落ちている状態なので、画素数を上げる補完処理を施せばそれっぽくはなる

HTML5に戻って

やってることとしてはVideo→Canvasにコピー

Canvas上でフィルタをかける

Canvasの中をいじる

ビットマップ領域に直接RGBAを書き込める

動画も瞬間を抜き出せば一枚絵なので、画像にかけるようにフィルタできる

処理の重さ

1ピクセルごとに処理をしているのでやっぱ重いし遅い

3つも同時にフィルタをかけるとがくがく

レビュー

2週間でよく頑張りました！

コードまだ直すところありそう

重い！！！！！！！

みゆっきの

感想

#3 次回予告

今月はここまで

来月からはテーマが変わって先生も変わるよ

HTML5をやってみようかな？さわってみようかな？という気分にはなっていただけましたでしょうか

来月からは……

Smart Phone