カテゴリー: WEB
Web制作、プログラミング備忘録、WordPress、Blender、React Three Fiber、p5.jsを使ったデジタルものづくりの記録。
-
【夏休みの自由研究】ついに完成！「万華鏡」（第5回）
第1回の「とりあえず遊んじゃおう！完成版コード」を覚えていますか？ これは、世界のクリエイターを熱狂させた Kishimisuさん の魔法です。 これまでの第1…
-
【夏休みの自由研究】増殖の魔法：forループ（第4回）
今回のテーマは、「反復（ループ）」。 たった1つのプログラムを、ロボットに「100回やって！」と命じるだけ。プログラムだからこそ描ける「圧倒的な数」。その扉を一…
-
【夏休みの自由研究】「動き」と「色」の魔法（第3回）
第2回では画面にポツンと浮かぶ「完璧（かんぺき）な丸」を描くことに成功したね。 でも、今の丸はじっと止まったまま、眠っているみたい……。 今回使う魔法は、とって…
-
【夏休みの自由研究】ロボットへの命令と座標のナゾ：丸を描く（第2回）
🌟 ここが一番の「がんばりどころ」だよ！ 第2回のテーマは、シェーダーの「ルール」と画面の住所を決める「座標（ざひょう）」のお話です。 正直に言…
-
【夏休みの自由研究】「シェーダー」の世界（第1回）
これから挑戦するのは、ふつうのプログラミングよりもちょっとだけ難しくて、でも圧倒的にかっこいい「WEBGL（ウェブジーエル）」という特別なモードなんだ。 &#x…
-
第4回クリエイティブ・コーディング：React Three Fiberでシェーダーを召喚
p5.jsの時は OpenProcessing という便利な場所がありますが、本格的なシェーダー開発では「自分の道具」を揃える必要があります。 ⤴…
-
第3回クリエイティブ・コーディング：シェーダーの魔法
第3回の主役は、シェーダー（GLSL）です。 シェーダーの世界は数学と物理の塊、一からすべてを理解しようとすると、入り口で立ち往生してしまいます。そこで登場する…
-
第2回クリエイティブ・コーディング：p5.js（CPU）の世界
第2回の主役は、「p5.js」。ブラウザ標準の Canvas 2D API を驚くほど直感的に、かつ簡単に扱えるようにしてくれる「魔法のスケッチブック」のような…
-
第1回クリエイティブ・コーディングへの招待状：数式で描くWebアートの世界
全4回にわたって、数学という道具を使って、幻想的なアートを描き出す。そんなクリエイティブ・コーディングに挑戦しようと思います。 でも、いきなり細かい話に入る前に…
-
AIでWeb制作！名前を知るだけでコードが変わる『UIパーツ＆デザイン用語』レシピ集
Webの「言葉（用語）」を知っていると、AIとの会話は劇的にスムーズ！！ AIを最強の助っ人にする「ズルい」頼み方（調理の心得） 「レスポンシブ」という合言葉を…
-
レジスタ・メモリ・キャッシュの違いを「料理」で完全攻略！なぜPCには別々の記憶場所が必要なの？
はじめに 「コンピュータの仕組みを勉強していると、レジスタ、キャッシュ、メモリ……と、似たような言葉がいっぱい出てきて混乱しませんか？」 実はこれ、「CPUとの…
-
【React初心者必見】AIに作ってもらった「旅のしおり」のコードが、モダンReactの教科書だった
来たる韓国旅行に向けて、「自分専用の最強の旅のしおりアプリ」を作りました！ 開発パートナーは生成AI。わがままな要望を投げまくって、PCでもスマホでも使えるWe…
-
【React】紙吹雪ライブラリどっちを使う？react-confetti と canvas-confetti の違いと使い分け、ハマりどころを徹底解説
Webサイトにお祝いムードを演出したいときに便利な「紙吹雪」。 Reactでよく使われるのは react-confetti と canvas-confetti …
-
React Three Fiber 備忘録
React Three Fiber.docs Three.js vs R3F コード比較 従来のThree.js（命令的）DOMの生成からループ処理まで、全て自…
-
GitHub Pagesの使い方｜無料でWebページを公開する方法【コマンド操作不要・初心者向け】
学校でHTMLを習ったり、趣味でコードを書いたりしても、それが自分のパソコンの中だけで完結してしまうのは、ちょっともったいない。 無料で、カンタンにWebページ…
-
CSS備忘録・前半（基本・レイアウト・画像の扱い・レスポンシブ）
この記事は、CSSの基本から応用までを整理した備忘録ですHTMLやJavaScriptも関連が深い部分については、適宜補足しています CSSの仕組みと書き方 ブ…
-
CSS備忘録・後半（テキスト・装飾・アニメーション・ユーザビリティ）
この記事は、CSSの基本から応用までを整理した備忘録ですHTMLやJavaScriptも関連が深い部分については、適宜補足しています テキスト関連のプロパティ …
-
Blender：カーブモデリング・スクリューモディファイア・パーティクル
カーブモデリング カーブモデリングは、滑らかな形状を描画するために、ベジェカーブやNURBSカーブを活用する技術です。それぞれ特徴があり、用途に応じて選択します…
-
Blender：リジッドボディアニメーションを頂点グループに割り当てる
3Dテキストを個別の文字ごとに落下させる動きを実装したいと考えましたしかし、各文字を独立したメッシュとして扱うと、GLTFファイルの読み込み時にメッシュの数が増…
-
Blender：シンプル変形モディファイアでカード開閉アニメーション
カードの「開くアニメーション」と「閉じるアニメーション」をそれぞれ独立したアニメーションとして作成し、GLTF形式でエクスポートしますこの形式を使用することでT…
-
Blender：3Dテキスト・クロスの物理演算・エンプティ
ハロウィン用に、3Dテキストとクロスの物理演算を使ったエフェクトを作成しましたBlenderでモデルを作成し、Three.jsで動的に表示する仕組みを実装してい…
-
Three.jsシェーダー・（3Dジオメトリ・モデル）
はじめに 備考：Three.jsシェーダーで使用される主要な変数（ uniform変数、attribute 変数、組み込み変数） 主なuniform変数（シェー…
-
Three.jsシェーダー・（パーティクル・平面GeometryとBufferGeometry）
THREE.Pointsを対象にシェーダーを適用する＊各パーティクルはカメラに面した平面で構成されている＊パーティクルではRaycasterは機能しない &#x…
