第9回 インタラ会 資料

テーマは「conic-gradient」


サンプルファイルはこちら↓↓ github.com

新しいグラデーション手法conic-gradient()関数

  • Google Chrome 69からサポートされたCSS
  • 円錐上に色を指定してグラデーションを作る
  • 工夫次第で今までcanvas使って面倒臭いなっていう表現がcssでできる
  • 特に円形グラフと集中線ができるのはすごい便利

ICSさんのサイトで丁寧な解説のってるので参考に ics.media

※ 以下Chrome69~限定で動作

円形グラフ

See the Pen intr9 sample1 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

集中線

See the Pen intr9 sample2 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

repeat-conic-gradient使った変わりダネ

See the Pen intr9 sample3 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

シンプルに

See the Pen intr9 sample4 by ikeryou (@ikeryou) on CodePen.

【仕事】BLEACH ENDLESS MEMORIES

www.j-bleach.com

記憶に残ったBLEACHのシーンを使って映像をジェネレートしていくスマホ限定webコンテンツ「BLEACH ENDLESS MEMORIES」が公開されました。

僕はジェネレートされた映像の実装を担当しております。
映像チームが作成した映像をWebGLを使って再現しました。

選択したシーンによって様々な演出を用意しています。
BLEACHの名シーンを思い出しながらぜひ体験してみてください。

第8回 インタラ会 資料

テーマは「ランダム」


サンプルファイルはこちら↓↓ 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.

ソースはこちら

SVGをランダムに

See the Pen intr8 sample4 by ikeryou (@ikeryou) on CodePen.

ソースはこちら




インタラ会とは?

ikeryou.hatenablog.com