デザイナー/フロントエンジニア

K. I.

kazuhoishida.github.io_two-playground_typefinder_ (1).png

Type Finder

Screenshot 2022-07-29 at 18.42.59.png

Canvas Eraser

kazuhoishida.github.io_three-playground_astronaut_.png

Neil Armstrong

kazuhoishida.github.io_two-playground_wadf_ (1).png

煩雑に積み上げられた写真、紙束

WADF

variable-font-experiment.netlify.app_ (1).png

Variable Fontを用いたアニメーション

Variable Font

ezgif.com-gif-maker (1).gif

GLSL water ripples

参考サイトにvariable fontのアニメーションを追加した。

variable fontは、lightやboldなどの異なるウェイトを読み込むより、ファイルサイズが軽いのがエンジニア的なメリット。

微調整できるのがデザイナー的なメリット。特に言語によって文字数とかが大きくことなる場合は便利。

kazuhoishida.github.io_three-playground_chair_ (1).png

Chair Playground

shaderMaterialをglslで書きました。（マウスインタラクション以外のglslはコピペ、です）。

マウスホバーでgsapと連携して、波エフェクトがかかるようになっています。

waterエフェクトはこれを参照。

https://tympanus.net/codrops/2020/03/17/create-a-wave-motion-effect-on-an-image-with-three-js/

inspired by https://typefinder.bigbump.fr/

フォントを用いた神経衰弱です。シンプルなコードなので、これをベースとして遊び心のあるLPを制作するときに使えるかもしれません。
左側のアイコンからカードデッキは2タイプ（欧文・和文フォント）を切り替えることができます。またクリアすると間違えた数に応じて、異なるメッセージが表示されます。
結果をSNSでシェアする機能などを追加していくことで、より多くのユーザーに遊んでもらえるUXになるかもしれません。

物理演算にはmatter.jsを使用しました。

kazuhoishida.github.io_two-playground_vivamontreal_ (1).png

VIVA

Screenshot 2022-07-29 at 19.30.31.png

Image following cursor

シンプルな3Dオブジェクトとカーソルのインタラクションです。ライトがカーソルに追従します。

bootstrapped with https://github.com/andypotato/fingerpose

（glbはfingerspelling.xyzから借りました）。

カメラでリアルタイムに手話を認識して、画面左側のモデルが動きます。

認識する手の形はfingerposerというプラグインを使用して定義しています。

LAB

K. I.

Works

VOGUE VALENTINO BEAUTY