K. Ishida

kazuhoishida.github.io_two-playground_typefinder_.png

Typography Memory Game

Screenshot 2022-10-31 at 5.17.40.png

Canvas Eraser

ezgif.com-gif-maker.gif

AI powered hand recognition with fingerpose

Hand Recognition

chrome-capture-2023-0-23 (2).gif

Tic Tac Toe

kazuhoishida.github.io_three-playground_astronaut_.png

Neil Armstrong

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

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

Pile of Images

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

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

Variable Font

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

GLSL water ripples

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

Collage

react-three-gpu-pathtracerを使用したPath Tracing

右上のlevaのパネルからパラメーターを変更できる。PathTracer Enabledにチェックを入れるとPath tracingでレンダリングが開始する（そこそこ重い処理になります）。

使用したライブラリ
https://github.com/pmndrs/react-three-gpu-pathtracer

参考
https://tympanus.net/codrops/2021/10/27/creating-the-effect-of-transparent-glass-and-plastic-in-three-js/

captures_chrome-capture-2023-0-21-_3_.jpg

Pathtracer test

（参考） https://typefinder.bigbump.fr/

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

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

Neil Armstrong floating in the space alone.

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

カラーチップでオブジェクトの色を変更する

カラーチップをクリックするとチェアのカラーが変わります。ECサイトなどでバリエーション選択をするときのようなイメージ。

captures_chrome-capture-2023-0-22 (6).png

Chair Color Picker

海面に浮いているように揺らぐテキスト。

左下のテキストボックスから任意のテキストを入力することができる。また右上のポップアップからタイポグラフィを変更することができる。

captures_chrome-capture-2023-0-22.png

Floating Texts on the surface of the Ocean

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

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

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

Floating Letters

Screenshot 2022-10-31 at 2.56.23.png

Image Following Cursor

Tic Tac ToeをR3Fを使用して制作した。白いボックスをクリックして遊べます。

このウェブサイトは、WebブラウザでプレイできるTic Tac Toe（「noughts and crosses」または「X's and O's」とも呼ばれる）の簡単なゲームです。ゲームはReact.jsフレームワークを使用して実装され、別の人間と対戦することができます。ゲームボードは3x3のグリッドで、水平、垂直、または斜めの行に自分のマークを3つ置くことができたプレイヤーがゲームの勝者となります。ゲームもリセットすることができます。

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

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

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

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

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

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

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

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

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

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

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

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

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