Kazuho Ishida

kazuhoishida.github.io_two-playground_typefinder_.png

Type Finder

Screenshot 2022-07-29 at 18.42.59.png

Canvas Eraser

ezgif.com-gif-maker.gif

AI powered hand recognition with fingerpose

Hand Recognition

kazuhoishida.github.io_three-playground_astronaut_.png

Neil Armstrong

K. Miyazato

kazuki-miyazato-anice.github.io_customize-3d-color-with-r3f_.png

Color Picker

Screenshot_2022-07-08_at_13.18.38.png

Virtual Living Room

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

inspired by https://designworkout.readymag.com/task-8/

kazuhoishida.github.io_two-playground_readymag_ (4).png

Readymag

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

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

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

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

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

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

クリアするとポップアップが表示されます

Neil Armstrong floating in the space alone.

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

inspired by https://typographyprinciples.obys.agency/many_thanks/

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

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

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

kazuhoishida.github.io_three-playground_chair_.png

Chair Playground

inspired by http://vivamontreal.org/2019/

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

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

VIVA!

T. Sasamori

Blenderからモデル、アニメーション、カメラ位置のインポートを行いました。

ボタンタップでアニメーションの変更ができます。

モデルとアニメーションはこちらから拝借

https://qiita.com/nemutas/items/a2265fae7e9dea82553b

https://qiita.com/nemutas/items/6202b3f8458376ab79b6

思ったこと、モデルのサイズが重いので圧縮しないと実務では使えない

DRACO圧縮たるものをしないといけないらしい。

https://zenn.dev/kaito_takase/articles/61624a17440143

react-anim.vercel.app_ (2).png

3D Animations

Screenshot 2022-07-29 at 19.30.31.png

Image following cursor

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

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

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

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