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

カテゴリー: WEB

Web制作、プログラミング備忘録、WordPress、Blender、React Three Fiber、p5.jsを使ったデジタルものづくりの記録。

  • 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属性の初期値キャンバス…

  • clip-pathの活用

    clip-pathの活用

    clip-pathは要素のどの部分を表示するか（クリッピング領域）を作ります内側は表示され外側は非表示です 切り抜き clip-pathの「basic-shap…

  • 「脱IE」関連のことをCSSを中心にまとめました

    「脱IE」関連のことをCSSを中心にまとめました

    まだ使えないものもありますが、今後のために個人的には「Safari」がネックです^^; ＊Grid Layoutとクリッピングとマスキング（clip-pathな…

  • Grid Layoutについて

    Grid Layoutについて

    IEがサポート終了したので、そろそろGrid Layoutを使ってみよう！ Grid Layoutの基本 MDN CSS グリッドレイアウト 基本概念とポイント…

  • Dart Sassを使う準備＆gulp（備忘録）

    Dart Sassを使う準備＆gulp（備忘録）

    2022年10月でLibSass（node-sass）のサポートが終了なのでLib Sass（node-sass）からDart Sass（sass）へ切り替えを…