好奇心の赴くままに。気になったことを、気ままに深掘り

  • ReactでGSAPを利用する

    ReactでGSAPを利用する

    GSAPは、ブラウザベースのアニメーションライブラリで、React、Vue、Angularなどの様々なフレームワークで使用することができます。＊Next.jsで…

  • Jupyter Notebookでリッチな表示：OpenAI APIを使ってみる（その2）

    Jupyter Notebookでリッチな表示：OpenAI APIを使ってみる（その2）

    Matplotlibでグラフ Matplotlibについて Matplotlibは、Pythonでグラフ描画を行うためのライブラリの一つです2次元のグラフはもち…

  • OpenAIのAPIを使ってみる

    OpenAIのAPIを使ってみる

    OpenAIのAPIを通じてGPT（Generative Pretrained Transformer）を利用することができます ドキュメント OpenAI C…

  • Web Workerについて

    Web Workerについて

    JavaScriptは単一のスレッドで動作しているため、コードが実行されている間そのスレッドはブロックされますそのため重い処理が行われるとブラウザがフリーズする…

  • Three.js備忘録（4）

    Three.js備忘録（4）

    環境マップ 環境マップは3D空間において環境の光や影響を表現するために使用されるテクスチャです＊周囲の光や物体の反射、屈折、散乱などの影響を反映できる 環境マッ…

  • Three.js備忘録（3）

    Three.js備忘録（3）

    ピッキング ピッキングとはユーザーがどのオブジェクトをクリックしたか、またはタッチしたかを把握するプロセスの事で、最も一般的なピッキングは「Raycaster」…

  • Three.js備忘録（2）

    Three.js備忘録（2）

    setAnimationLoop 「setAnimationLoop」についてアニメーションのループを簡単に設定するためのものです。このメソッドは、通常のJav…

  • Three.jsこと始め

    Three.jsこと始め

    Three.jsは、JavaScriptを使った3DグラフィックスライブラリですWebGLを使ってブラウザ上で3Dグラフィックスを実現することができますThre…

  • p5.js備忘録（4）3Dモデルとシェーダー

    p5.js備忘録（4）3Dモデルとシェーダー

    3Dモデル 3DCGツールで作成した3Dモデル（立体のキャラクターなどのデータ）を読み込んで表示できます ＊p5.jsでは同じドメイン内からしか3Dモデルを読み…

  • Glitchの使い方（GitHub Pagesへ移行）

    Glitchの使い方（GitHub Pagesへ移行）

    😵❗️追記（2025年7月）Glitch は、2025年7月8日をもってホスティング機能を終了しました&#x1f60…

  • p5.js備忘録（３）WebGL

    p5.js備忘録（３）WebGL

    WebGLの実装で知っておきたい基礎知識 WebGLは、ブラウザ上で高度な2D/3Dグラフィックスを描画するためのAPIです。モバイル向けのOpenGL ESを…

  • p5.js備忘録（2）

    p5.js備忘録（2）

    時計 ロードされた時の時刻を表示しています（クリックでスタートとストップを制御） 木のフラクタル図形 再帰関数（自分自身を呼び出す関数）で、再起処理をしてツリー…

  • p5.js備忘録

    p5.js備忘録

    p5.jsは、JavaScriptを使ってクリエイティブコーディングを実現するライブラリですProcessingという言語をベースにしていて、プログラミング初心…

  • iframeについて

    iframeについて

    HTML埋め込みコンテンツ iframe 現在のHTMLへ別のHTMLを埋め込む embed 外部のマルチメディアを埋め込む（プラグインが必要） object …

  • Web Animations API

    Web Animations API

    Web Animations APIはCSSアニメーションやCSSトランジションをJavaScript から操作するAPIです＊Safari 13.1のリリース…

  • CSS 3D（Transform）を実装する時の参考に

    CSS 3D（Transform）を実装する時の参考に

    基本 CSS 3D（Transform）は平面に奥行きをつけて変形させます光源をもとにして陰影をつけることはできません perspectiveの値は平面（z=0…

  • テキストのアニメーション備忘録

    テキストのアニメーション備忘録

    ＊デモはiteration-count（繰り返す回数）をinfinite（無限）にしている SVGをつかう 破線の間隔のパターン（stroke-dasharra…

  • Web制作に便利なSVGツール

    Web制作に便利なSVGツール

    SVGの最適化 Web上でSVGを軽量化してくれますわざわざファイルをアップロードしなくても「Psate markup」をクリックしてSVG要素を貼り付けること…

  • ローディングとファーストビューのアニメーション

    ローディングとファーストビューのアニメーション

    表示に3秒以上かかるページは半数近くの人が離脱するようです ローディングアニメーションを実装して待つストレスを軽減させたり導線用のファーストビューを準備してペー…

  • GSAP備忘録（その3）

    GSAP備忘録（その3）

    CanvasとGSAP 画像を複数行に分割して複数のCanvas要素で表示するdrawImage(image, sx, sy, sWidth, sHeight,…

  • Canvas API備忘録 （3）

    Canvas API備忘録 （3）

    ピクセルデータの取得と操作 ピクセルデータの取得getImageData(left, top, width, height)＊rgba（赤・緑・青・透明度）の4…

  • Canvas API備忘録 （2）

    Canvas API備忘録 （2）

    sinとcos 波線を描く ＊Math.sin(radians)を使って波を動かし、色を変化させる（「-1」~「1」の間の数）＊clearRectのかわりにfi…

  • Canvas API備忘録（1）

    Canvas API備忘録（1）

    HTML5のcanvas要素に2次元の図形を描画します 図形の描画 スクリプトで描画コンテキストを取得します＊width属性とheight属性の初期値キャンバス…

  • 朝鮮王朝 20代景宗〜27代純宗×韓国時代劇 早見表｜最後の王までドラマで一覧

    朝鮮王朝 20代景宗〜27代純宗×韓国時代劇 早見表｜最後の王までドラマで一覧

    『イ・サン』『雲が描いた月明り』『哲仁王后』『緑豆の花』——ルネサンス・勢道政治・開国に揺れた朝鮮王朝後期の180年。20代景宗から27代純宗まで8代の王をまと…