web6047 - 2025年 9月
ここは個人の趣味のページです。
私がプログラミングを好むわけは、プログラミングは私の「物づくり」に対する探求心と創造性を十分に満たしてくれるからです。
- 探求心：
ファミコン版「ドラゴンクエスト」に衝撃を受け、憧れて、そのための断片的なプログラムを作ることを楽しんできました。
断片的なプログラムとは、「マップを描画するだけ」とか、「プレイヤーキャラを動かすだけ」とかです。
そういう憧れに向かうステップ（探求）に、心躍る喜びがありました。 - 創造性：
この創造性とはアイデアを形にする喜びのことです。
もともと自分のアイデアを形にする「ペーパークラフト」や「木工」などのモノ作りが好きだったので、プログラミングとの相性が良かったようです。
ここの管理人、
AI の利用やめるってよ。
AI の問題点：
- 自分で考えずに AI を利用することで、考える力が減退する。
- 人と人との交流（教わる）が減る。
- 創作物のオリジナリティが無くなる。（自分の力で作ることの喜びが減る）
- 犯罪に使われている。
- AI のハルシネーションにより、人間が間違った知識を AI から学んでしまう。（2025年8月9日追加）
これらが向こう１０年解決されないだろうと見込んで、やめることにしました。（2025年5月23日～）
私は AI に頼らず「自分の力」を大切にしたいです。
…とはいえ、人間は新しく見つけた技術を手放すということは基本的にやらないと思います。
だから私も後々 AI を利用することにはなると思います。
でも上記の問題点は確かなもので、将来 AI ロボが私の家の扉をコンコンと叩いて
「市からの要請で、お手伝いするため おうかがいしました」
と言うまでの間は、この AI 技術を導入せず、頑張ってみようと思います。
でもこの考え方、キツイと思うのでマネしなくていいです。
- Special Documents -
特別な記事へのリンク
サンプル動作環境の作成方法
ゲームコーナー
（↑, ↓, ←, →）
（←, →, ↓, z, x）
その他 単発のアプリ
- 以降は日記です -
2025年9月2日
知恵袋 カテゴリマスターになりました。
知恵袋での私のアカウント名は「平行四辺形」ですが、
（私の本名＞D.K＞"台形"＞ (いくつかの図形を経て) ＞"平行四辺形" となった）
今までも何度かカテゴリマスターになりましたが、今度は「HTML、CSS」カテゴリのマスターですね。
週刊「カテゴリマスター」創刊 ――― !
…という感じで、今週が終わればまた「平・回答者」に戻ります。
今週中、頑張ってベストアンサーもらわないと、維持できない種類のカテゴリマスターなんですよね。
カテゴリマスターになるほどベストアンサーもらったっけな…というのが正直なところです。
（訪問者のどんなニーズと この記事がつながるか）
- 日記を読みたい
2025年9月6日
知恵袋 ある知恵袋
高校の頃に私を知っていた人たちには楽しい回答だと思います。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11319388156
私が自分が通って中退した「高専（工業高等専門学校）」を「高校に通っていた」とか「高校生のころ」と表現するのは、「高専」、「高専生」と言ったときにすぐに「高校の一つの形態」だと一般の人は気づけないからです。分かりやすさのためですね。
（訪問者のどんなニーズと この記事がつながるか）
- 日記を読みたい
2025年9月7日
プログラミング 「クォータニオン」はじめました７
人体モデルをページ上に配置するプログラムの進捗です。
今回はサンプルはありません。
下図の緑のフキダシのものはこれまでもできていた機能です。
青いフキダシのものは今回の成果です。
この図の赤緑青の直方体の連なりが１つのキャラクターを表します。
試作段階なので、人体にはしないで、単純な直方体の連なりにしています。
ページ上に 3DCG モデルを配置するとき、
『キャラクター１人だけだとさびしくなるかも』
と思って、２人、３人と配置できるようにプログラムを全体的に作り直しました。
上図の例で言うと、赤緑青の直方体の連なりが２つ、３つ配置できる状態にしたい、と思ったわけです。
その実現の最初の案として…
ページ全体を CANVAS タグでおおってしまえば、そういう複数のキャラクターの同居は比較的 たやすいと考えましたが、やってみると問題が出ました。
・CANVAS がページの手前にあるのでページ上のテキスト選択や、リンクのクリックができなくなる。
そこで…
キャラクターごとに CANVAS を別々にすることを考えました。しかしこれも問題が出ました。
・キャラクターたちが、たとえば肩を組んだとき、CANVAS が重なるが、２つの CANVAS 上にあるポリゴン同士の重なりが表現できない（肩が組めない）。
しかたないので…
CANVAS どうしが接触するとき、片方の CANVAS を消去し、もう片方の CANVAS は２つのキャラをおおうように拡大し、２つのキャラを１つの CANVAS に同居するようにしました。
それでできたのが今回のプログラムです。
たとえば、
あるキャラクターが CSS の position : fixed で「画面上」に固定されていて、
あるキャラクターが CSS の position : static で「ページ上」に固定されており、
ページスクロールにより、２つのキャラが接触する場合も、リアルタイムで接触を感知して融合するようなプログラムになっています。
ぜいぜい。大変でしたけど、なんとかできました、と。
こんなに頑張っても、将来 HTML のバージョンアップとかで、
「デスクトップマスコットがページ上で作れるようになりました」
とか言って、私が作ったものよりも良い物が出来るでしょうけど、まぁ、今はまだそれはないので、それまで楽しめれば良いかなと思います。
（訪問者のどんなニーズと この記事がつながるか）
- 画期的なインターネット技術の取り組み
- プログラミングの話
- 日記を読みたい
2025年9月10日
プログラミング 「クォータニオン」はじめました８
新しいプログラムに人型モデルを持ってきました。
一つ前の記事で「2つのモデルが重なると融合する」という話をしましたが、上図の2つのモデルは「パースが異なる」ので融合しません。
「望遠レンズを付けたカメラで撮影した風景に写る人物」と、「目の前で見ている人物」が、同じ画面に同居することは考えられないので、融合しません。
白のブラウスに灰色のパンツと茶色の革靴をはいてる女の子はこの娘↓と同一人物なんですけど、
 |
 |
 |
「3Dお姉さん」という名前で、このサイトのオリジナルキャラなんです。
私が 3DCG をプログラミングで描けるようになって、その方法を説明しようとしたときに、適当に描いたのがこの娘でした。
この図↓が本当の一番最初の「3Dお姉さん」の登場シーンです。
キャラというのは「育つ」んですよね。
育つと、作者の手を離れて、勝手にしゃべり始めます。
それは創作者にとってはうれしいことです。
特別な設定もなく、使い勝手がいいので、育ちやすいんですかね。
 |  |  |
福笑いみたいにいろいろ表情を変えるだけで育ってきた感じです。
のちのち、ページ上に 3D モデルで登場し、吹き出しを付けてしゃべり始めてくれると、ひと段落です。
途中にしてある RPG 開発と、
止めてある個人事業（イラストを描くとか）を再開できます。
（訪問者のどんなニーズと この記事がつながるか）
- 雑談
- 日記を読みたい
2025年9月15日
プログラミング 「クォータニオン」はじめました９
- こういうものを作っている
- ここまでできた
- 人々がやりたいプログラミング
- 今後の課題
こういうものを作っている
インターネットのページ上に人体の 3DCG モデルを出現させるしくみを作っています。
どこかおバカっぽい、のほほんとした絵柄が私の作風なのかな…
プログラミングを教えるために、ページ上でキャラクターを動かし、ページ上の図などを指さし、漫画のようにセリフを表示させ、時間を追って学習を進めていくような、そういうプログラミング教材を作ろうとしています。
楽しければおぼえも早いんじゃないかなと思うんです。
ここまでできた
ウェブページに人体を二人配置し、同じパース（構図）の二人が近寄ると、CANVAS はこのように１つに融合します。
前々回の記事では説明のための「模式図」だけで説明し、前回は「キャラと赤緑青の図形の共存」の様子でした。
そして今回はとうとう人体２つでの表示を行った、というわけです。
こんなふうに密接にキャラ同士が接触しているところを表現できます、ということです。
人々がやりたいプログラミング
この部分が今回一番面白かったプログラミングでした。（難しい内容です）
設定として描いたパス（面に描いたパス描画 
←これのことです。）は、最初は「正面」を向いているパスとして描いてるわけですが、正面にしか描けない状態では表現の自由度としては低すぎます。
正面以外の面、たとえば立方体などの側面にパスを描くためには、パスの一つ一つの座標をその側面、横方向の向きへと回転しなければなりません。
ちょっと寄り道して…
「3次元空間にパスを描く」というのは具体的には JavaScript の beginPath()、moveTo()、lineTo()、bezierCurveTo() などを使います。
これらは 2 次元用のパス描画の関数ですが、座標を 3 次元として計算してから引数として渡してやるとちゃんと 3DCG 描画できちゃうんですよね。
- moveTo( 100, 100 ); lineTo( 200, 200 ); というパス描画を 3 次元空間に出現させることを考える。
- 各座標に奥行である z 値 800 を仮に加えると、それぞれ、
100, 100, 800 と、200, 200, 800 - これらについて３次元の計算 s = 50; h = x * s / z; v = y * s / z; を行う。
（座標 100, 100, 800 について）
h = 100 * 50 / 800
v = 100 * 50 / 800
h = 5000 / 800 = 50 / 8 = 6.25
v = 5000 / 800 = 50 / 8 = 6.25
（座標 200, 200, 800 について）
h = 200 * 50 / 800
v = 200 * 50 / 800
h = 10000 / 800 = 100 / 8 = 12.5
v = 10000 / 800 = 100 / 8 = 12.5
これら h, v を使うが、このままだと画が小さくなるので、14.25 倍する。
（座標 100, 100, 800 について）
h = h * 14.25 = 6.25 * 14.25 = 89.0625
v = v * 14.25 = 6.25 * 14.25 = 89.0625
（座標 200, 200, 800 について）
h = h * 14.25 = 12.5 * 14.25 = 178.125
v = v * 14.25 = 12.5 * 14.25 = 178.125 - これら h, v を使って画面に描く。
moveTo( 89.0625, 89.0625 );
lineTo( 178.125, 178.125 );
以上のサンプルは以下です。リンク先の上の右側の青い「実行」ボタンを押すと実行します。
「★2D 画面で普通にパス描画する例」と「★３次元計算してからパス描画する例」を示しています。
「★３次元計算してからパス描画する例」は、上記と同じ内容のプログラムになっています。
しかし、ただの線を空間に描いているだけなので、３次元なのかどうかほとんどわかりません。
少し複雑なパスを描いて、回転させるとわかりやすいです。たとえば、、
「★本格的な例」を示しています。
2D パス描画の関数を使っているのに、正方形の板が３次元として回転しているのがわかります。
…話は戻って、側面などの違う方向の面への回転計算をやっているのが上図…再掲載して下図のプログラムです。
最後の２行でパスの各点を回転させるためにクォータニオンを使っています。
クォータニオンを「作る」には、任意の回転軸（kaitenJiku）と、どれくらい回転するのかという（nasukaku）が必要です。
この図のプログラムは、最初に kaitenJiku を求め、次に nasukaku を求め、最後にそれらを使ってクォータニオンを作成し、そのクォータニオンを使って、パスを構成する各点を回転させています。
（画像の外側、見えないところに各点を順次回す for 文があります）
簡単には説明できないので、説明はしませんが、多くの人がやりたがっているプログラミングってたぶんこういうものではないかと思います。
これができるから、ページ上のキャラの頭に顔が描かれて、それが興味深く正しく動き、見栄えがします。
みなさんはそういう「自由の翼」みたなものにあこがれているんですよね。
そういうみなさんに何か提供できないかといつも考えるんですが、そう簡単には伝授はできません。
絵の描き方もそうですが、伝授の方法、手段があまりないんです。
（その解決の一つが今回の、”ページ上でキャラが動く教材” です）
手段は無いけどせめて、ということで、、
今回のこのプログラムを おてもとで動かすための ZIP（77.8KB）を提供します。これ→●
クリックしてダウンロード、展開したら、html ファイルが２つあるのでどちらかをブラウザで開いてください。
- web6047document-24a.html
二人は固定されています。 - web6047document-24b.html
一人は画面上の中央に、もう一人はページのある位置に固定されています。
スクロールして二人が近づくと、CANVAS（黒い枠）が融合するのが分かります。
左下の「Boy meets Girl」という青いボタンを押すと二人がポーズとしてちゃんとくっつきます。
プログラム本体は、FigureSystem-24.js です。２つの html はそれを利用するサンプルです。
作り途中のものなのでプログラムはあまりきれいではありません。
プログラムの著作権についてはあまり深く考えていませんが、私の権利よりも「訪問者の方々がプログラミングを楽しむきっかけを得るわずかな可能性」に重きを置いています。
今後の課題
ブラウザの「Firefox」だと、処理が重くて良い感じの動きをしません。
「Google Chrome」なら、綺麗に動きます。
私が基本で使っているのは「Firefox」なので、処理の重さを改善しなければなりません。
そのほか、「カメラワーク」とか、「ポーズからポーズへのアニメーション」とか、「吹き出しを付けてしゃべらせて」、、とか今後やっていくつもりです。
（訪問者のどんなニーズと この記事がつながるか）
- 画期的なインターネット技術の取り組み
- プログラミングの話
- 日記を読みたい