TVアニメ『盾の勇者の成り上がり』ティザーサイトが公開されました。
僕はフロント実装全般を担当しております。
ぜひPCとスマホ両端末でご覧ください。
記憶に残ったBLEACHのシーンを使って映像をジェネレートしていくスマホ限定webコンテンツ「BLEACH ENDLESS MEMORIES」が公開されました。
僕はジェネレートされた映像の実装を担当しております。
映像チームが作成した映像をWebGLを使って再現しました。
選択したシーンによって様々な演出を用意しています。
BLEACHの名シーンを思い出しながらぜひ体験してみてください。
サンプルファイルはこちら↓↓
github.com
・みんな大好き
・実案件だとノイズ表現とかで使用する
・やりすぎると目が痛い
・作品作りの肝は何をランダムにするか
・目が痛くないギリギリを目指す
・もしくは振り切る
// ---------------------------------------- // minからmaxまでランダム // ---------------------------------------- function random(min, max) { return Math.random() * (max - min) + min; } // ---------------------------------------- // minからmaxまでランダム int // ---------------------------------------- function randomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // ---------------------------------------- // -valからvalまでランダム // ---------------------------------------- function range(val) { return random(-val, val); } // ---------------------------------------- // 配列の中ランダム // ---------------------------------------- function randomArr(arr) { return arr[randomInt(0, arr.length - 1)] } // 1 / rangeの確率でtrueを取得 // ----------------------------------- // @range : 2以上の分母(int) // return : true or false(boolean) // ----------------------------------- function hit(range) { return (randomInt(0, range - 1) == 0) } // ---------------------------------------- // minからmaxまでランダム 半分の確率で-をつける // ---------------------------------------- function random2(min, max) { var val = Math.random() * (max - min) + min; if(Math.random() > 0.5) { val *= -1; } return val; }
See the Pen intr8 sample1 by ikeryou (@ikeryou) on CodePen.
See the Pen intr8 sample2 by ikeryou (@ikeryou) on CodePen.
See the Pen intr8 sample3 by ikeryou (@ikeryou) on CodePen.
See the Pen intr8 sample4 by ikeryou (@ikeryou) on CodePen.
サンプルファイルはこちら↓↓
github.com
See the Pen intr7 sample1 by ikeryou (@ikeryou) on CodePen.
ソースはこちら
・こういうものとしてはアリだが、動きが非現実的っぽすぎて直感的ではない
(ついでに色々隠し味的なのも追加)
See the Pen intr7 sample2 by ikeryou (@ikeryou) on CodePen.
ソースはこちら
ソース抜粋
var friction = 0.3; // 摩擦係数 小さいとより引っ張られる感じに mouse.dist.x *= friction; mouse.dist.y *= friction;
・摩擦係数を追加するだけで、なんとなく引っ張ってる感がでる
・よりリアルで直感的なインタラクションになる
See the Pen intr7 sample3 by ikeryou (@ikeryou) on CodePen.
ソースはこちら
・若干の煩わしさが何度も引っ張ってみたくなるモチベーションになる。気がする。
See the Pen intr7 sample4 by ikeryou (@ikeryou) on CodePen.
ソースはこちら
・摩擦係数をランダムにすることで、それぞれ個別の生命体のように。感じるかもしれない。
(codepenで再現できないので動画と外部リンクで)
https://ikeryou.github.io/intr7/5/
ソースはこちら
株式会社Sunny.のWebサイトが公開されました。
僕はフロント実装を担当しております。
シンプルながらも、細かい演出の効いたWebサイトになっております。
ぜひPC、スマートフォンの両端末でご覧ください。