q(キュー)サイトに学ぶ、 演出のためのhtml5
DESCRIPTION
ヒカラボ at 2014.11.4 https://atnd.org/events/56949 にてお話しさせていただいた際の資料です。 Q co.,ltd.【株式会社キュー】 http://www.q-co.jp/TRANSCRIPT
面白法人カヤック本多大和
Q(キュー)サイトに学ぶ、
演出のためのHTML5
本多大和ほんだやまと
面白法人カヤック所属
HTMLファイ部リーダー
@calmbooks
http://calmbooks.tumblr.com/
HTML5 / WebGL / Unity
自己紹介
最近つくったもの
PIXEL LAND @ 東京デザイナーズウィーク2014
ユーザーがマグネットを組み合わせてつくったピクセルアートをWebサイト
上に集め、デジタルの空間内にピクセルアートの街をつくる作品。
WebGLにより、3Dでビジュアライズ。
http://www.tdwa.com/2014/exhibitors/details/005754.html
FONTA 一人一文字みんなでつくるフォント
サイト上でユーザに1人1文字書いてもら
い、約7000人で1つのフォントをつくる
サイト。
つくったフォントはダウンロードできた
り、Webフォントとして使えたりする。
http://fonta.kayac.com/
紹介させていただく事例
Q co.,ltd.株式会社キューコーポレートサイト
広告からアパレルまで、多岐にわたる
デザインを手がけるデザイン会社Q(キュー)
赤ペンで◯を書くと動画がでるなど、
前衛的な表現を取り入れたコーポレートサイト
http://www.q-co.jp/
Canvas?
<canvas></canvas>
グラフ、画像処理、ビジュアライズ、etc.
サイト上にペンで描く!
・HTML5 Canvas 使用(ペン自体はDOM)
・mousemoveイベント時のマウス座標を利用して描画
moveTo、lineToで結ぶだけだと滑らかな線にならない...
● mousemoveのマウス座標
1. マウスの通った各座標(黒い点)の中点を算出(黄色い点)
2. 各座標(黒い点)をハンドルに、2次ベジェ曲線で結んでいく
→ 味のある滑らかな線に!
ページ上どこにでも描ける!
DOMの上にも、動画の上にも、どこにでも描ける
ドラッグ中は、Canvasがページブロック
(セクション)全面に広がっている
mouseup時に、必要なサイズにCanvasをトリミング
◯を描くと◯の中に動画!
・始点と終点が近ければどんな形でもいける
・Tumblrで社員さんが日々投稿している
・1つの動画につき2つのCanvas
1. mousemoveでの座標群を配列に保持しておく
2. 座標群を結んだパスで、動画をclip() !(マスクみたいな)
3. 線のほうは描き終わったら更新不要なので、更新が必要な
動画とはCanvasを分けた(そのほうが軽かった
スクロールで描かれる筆跡!
・スクロールに連動して描かれていく
・社長直筆の手書き文字
こんな感じの座標をまとめた配列を持っておき、
スクロール値から計算して適切な数の点を結んで描画
社員さんの手書きメッセージ
・社員さん一人一人オリジナルの手書きメッセージ
・メンバーページ(/member)にいくと、筆跡アニ
メーションが描かれる
・管理画面内に専用のツールを作成
・ドラッグで描くことで、座標を集めた配列を生成できる
・新しく社員さんが入社してもこのツールで追加できる!
☆やパックマンを描くと・・?
☆を描くと・・?
パックマンを描くと・・?
何かが起こる?
表側では使わない、上のような画像を用意
/img/common/other/check_star.png
簡易的に画像類似度を求めて検出
Thank you !!