この記事ではThree.jsのBufferGeometryの基本的な使い方を紹介します。 See the Pen Three.js BufferGeometry Sample by Imai (@imai1) on CodePen. バージョン非互換が激しく過去の解説記事が当てにならなかったり、公式ドキュメントがあまり充実していなか…

ビル群をプロシージャル生成するプログラムをJavaScript+Three.jsで書いてみました。 See the Pen [WIP] procedural generation for buildings by Imai (@imai1) on CodePen. 既製品の商用ライブラリにもっと凄いのがありますが、自分で作ってみたくなったの…

2022年4月に以下のツイートが一部界隈で話題になったようです。筆者は今更知りました。A City in a Bottle 🌆

Three.jsでミニチュアの箱庭？っぽいものを作ってみました。 See the Pen Untitled by Imai (@imai1) on CodePen. コード解説 準備 高度マップの生成 海の生成 人の配置 環境設定 テクスチャ読み込みと実行 将来課題 コード解説 準備 以下のライブラリを読み…

Diamond-Squareアルゴリズムで生成した高度マップをThree.jsで描画してみました。 See the Pen Untitled by Imai (@imai1) on CodePen. Diamond-Squareアルゴリズムの解説 実装 Diamond-Squareアルゴリズム Three.jsによる描画 Diamond-Squareアルゴリズムの…

森をプロシージャル生成するJavaScriptプログラムを作成しました。 See the Pen Procedural Generation of 2D Forest by Imai (@imai1) on CodePen. 細かいところをちょこちょこいじってはいますが、本質的には前に作成した花畑生成のプログラムの画像リソー…

花畑をプロシージャル生成するJavaScriptプログラムを作成しました。 See the Pen Flower Garden by Imai (@imai1) on CodePen. アルゴリズムの解説 花の配置 描画処理 素材について アルゴリズムの解説 花の配置 自然に見えるよう描画時に位置を崩していま…

シェリングの分居モデルをJavaScriptで実装しました。 ランダムに配置されたエージェント達が初めは移動を繰り返していますが、だんだんと同種のエージェント同士でカタマリを作って定住するようになっていきます。だいたい数十秒で収束しますので、しばらく…

ちょっとしたコードスニペットやCodePenなどを公開する際に、画像リソースの置き場所に困ることがあるのではないでしょうか。この記事ではJavaScriptファイル内やCodePenに画像を直接埋め込む方法を紹介します。といっても特別なことは何もなく、フロントエ…

身近なのによく考えたら不思議だな・面白いなと筆者が思った物事について、紹介・説明しているWebページのリンク集をまとめました。 食べ物が固くなるのは何故？ 電子レンジに殺菌効果はある？ 細菌はどのように増える？ 二日目のカレーが美味しいって本当？…

迷路を自動生成してcanvasに描画するプログラムを作成しました。 See the Pen Untitled by Imai (@imai1) on CodePen. 四角マップ状の迷路を生成 迷路の構造 迷路のデータ構造 迷路の描画 迷路の接続の自動生成 迷路生成部分 ランダムな全域木の生成 素集合…

身近なのによく考えたら不思議だな・面白いなと筆者が思った物事について、紹介・説明しているWebページのリンク集をまとめました。 消化の働き タンパク質って何？ 吸収の仕組み 疲労の原因は何？ 糖質って何？ 食物繊維って何？ 脂質って何？ ビタミンって…

身近なのによく考えたら不思議だな・面白いなと筆者が思った物事について、紹介・説明しているWebページのリンク集をまとめました。 大量のご飯はどうやって炊いている？ マヨネーズやケーキに使う卵の殻ってどうしてるの？ 雨の量ってどうやって測るの？ 非…

この記事では、HTMLのcanvasタグのサイズ設定と、それを更にBootstrapと組み合わせてレスポンシブデザインにする方法を説明します。 See the Pen Untitled by Imai (@imai1) on CodePen. 発端：JavaScriptでちょっとローグライクゲームでも作ってみようかな…

身近なのによく考えたら不思議だな・面白いなと筆者が思った物事について、紹介・説明しているWebページのリンク集をまとめました。 ものが燃える仕組み 電子レンジ・オーブン・トースターの仕組みや違いなど 冷やす家電 ガスで温める仕組み 陶磁器を焼く理…

身近なのによく考えたら不思議だな・面白いなと筆者が思った物事について、紹介・説明しているWebページのリンク集をまとめました。 液体の分離 水と油の乳化 洗剤の仕組み ボディソープと泡の関係 消臭の仕組み アルコールの作り方 ガラスが透明な理由 色ガ…

この記事ではJavaScriptのグラフ描画ライブラリの一つであるChart.jsを紹介します。 See the Pen Untitled by Imai (@imai1) on CodePen. 基本的な使い方 サンプルコード Chartクラス canvasのサイズ グラフの種類 前置き 棒グラフ 折れ線グラフ 円グラフ（p…

この記事ではOpenStreetMapをWebページ上に表示するJavaScriptライブラリをいくつか紹介します。 Leaflet 公式ページ 基本的な使い方 OpenLayers 公式ページ 基本的な使い方 ArcGIS（概要のみ） OpenStreetMapの利用規約について ライセンス表記 タイルサー…

この記事では、Bootstrapでフォームにスタイルを設定する方法について紹介します。 See the Pen Bootstrap Form Samples by Imai (@imai1) on CodePen. 上記のCodePenのフォーム要素には送信先等の設定はありません。Bootstrapの機能紹介のためのガワだけし…

この記事では、Bootstrapでページのレイアウトを制御する方法について紹介します。 See the Pen Untitled by Imai (@imai1) on CodePen. Bootstrapのコンポーネントについて知りたい方は、次の記事もご覧いただけたら嬉しいです。また、Bootstrapを触ったこ…

もう何番煎じかわかりませんが、自分の備忘録としてBootstrapの使い方をまとめました。この記事では特に単体のコンポーネントについて紹介していきます。 See the Pen Bootstrap Sample by Imai (@imai1) on CodePen. はてなブログにタグを直接埋め込むこと…

この記事ではconsole.logだけではない、consoleの様々な便利な機能を紹介します。同じテーマについて他に良い記事がいくつもあるのですが、自分の備忘録も兼ねて記事化しました。また、CodePenで動的に操作できるので静的なサイトよりも触って理解しやすいか…

この記事では、ビジュアルプログラミング言語のBlocklyで、カスタムブロックを定義する方法を紹介します。 See the Pen Blockly on CodePen 2 by Imai (@imai1) on CodePen. なお、Blocklyの基本的な使い方について知りたい方は前の記事をご覧いただけたら嬉…

この記事ではビジュアルプログラミング言語の一つであるBlocklyの基本的な使い方を紹介します。 See the Pen Blockly on CodePen by Imai (@imai1) on CodePen. ワークスペースの設置 Blocklyのライブラリの読み込み ワークスペースを注入するタグの作成 タ…

この記事ではライフゲーム（Conway's Game of Life）の拡張の一種である、Life-like Cellular AutomataのJavaScript実装を紹介します。 See the Pen LifeLikeCellularAutomaton B35678/S5678 by Imai (@imai1) on CodePen. Conwayのオリジナルのルールでは、…

何番煎じかわかりませんが、JavaScriptでライフゲームを実装してみました。 See the Pen Game of Life by Imai (@imai1) on CodePen. 筆者のJavaScriptの文法・機能の把握のための習作ですが、既に世にある実装例よりも設計にもこだわってみました。ライフゲ…

CodePenは、ブラウザ上で書いたコードをそのままプレビューでき、それをWebで共有もできたりする有名サービスです。 See the Pen CodePen Sample by Imai (@imai1) on CodePen. この記事では、CodePenで作成したPen（コードのこと）をはてなブログで共有する…