web6047 - 2026年 3月

プログラミング　人体描画システム６

1. 人体描画システムを知恵袋で活用し始めた
2. 吹き出しのしくみ
3. VBA 矢印図形の注意点
4. しかし知恵袋の衰退

1. 人体描画システムを知恵袋で活用し始めた

私が今かかりきりで作っている「人体描画システム」。

知恵袋の回答の添付画像でさっそく使い始めましたね。

SAVE/LOAD 機能でポーズを呼び出すと、吹き出しはそのままにポーズだけが変わりますね。

たとえばこう、

▼寝ながらめんどくさそうに。

知恵袋の質問者たちを見ていると、こういう気楽なスタイルの方が良いのかもしれません。

▼やれやれポーズなのに言葉が逆。

いるんだよなぁ、こういう回答者。頑張ろうとも言わずに。┐(´∀｀)┌ﾔﾚﾔﾚ

▼お願いポーズで言われると…

こういう感じのシングルマザーとかたくさんいそうだな。

2. 吹き出しのしくみ

以上、どのようなポーズに切り替えても、吹き出しは自然な位置を保っています。

吹き出しのデータは Excel で作っていて、そのときに、点線の四角形は「HTML で文字を表示する部分」を示しており、

赤い矢印が「吹き出しの "尾"（話者に向けられた尾状の印）の方向」を示しています。

Excel の図は、Excel VBA で操作することが可能で、点線の領域の位置とサイズ、矢印の位置と方向などをテキストファイルに落とすことができます。（図形自体は .png へ落とすメソッドがあります。私が使っている Excel 2010 では図を一度グラフの枠に入れて、グラフの枠に .png へ落とすメソッドがあるのでそれを利用します。最新の Excel ではたぶんグラフでなくても標準で .png へ落とすメソッドがあるんじゃないかと思います）

1. テキストファイルに落とすときに、ファイル名を .js にして、内容を JavaScript にすれば、インターネットのページで使う JavaScript とすることができ、
2. キャラの口の位置（実際やっているのは頭の中心です）の 3 次元座標を 2 次元座標へ投影（変換）し、
3. 吹き出しの矢印の延長線上にその 2 次元座標が来るように、吹き出しの位置を調整すれば、吹き出しは自然な位置を保つことができる、

というしくみになっています。

3. VBA 矢印図形の注意点

しかし、Excel の図形で「直線の矢印」を作り、それを VBA で内部データを見ると、矢印の方向を示すデータは見当たりません。矢印の矢がどっちを向いているのか分からないと困ります。

なぜ方向データが無いのかというと、、

このような矢印を、

上下反転すれば、

左右反転すれば、

上限反転＋左右反転すれば

…のようにすべて表現可能です。

微妙な角度は縦横サイズが変わることで おのずと表現されます。

だから「左上の開始点」と「矩形のサイズ」で直線の形を表現し、そして「上下反転する/しない」、「左右反転する/しない」というデータで「線の方向」を示しています。

だから矢印の方向を示すデータはないんです。

この説明をここに書かないと、私の記事を読んで「VBA で直線データを使おう」と思った人が、いざやってみると分からなくて困る、、ということになるので書いておきました。

4. しかし知恵袋の衰退

3D キャラ画像を知恵袋で活用し始めた、という話をしましたが、アメリカの「プログラミング知恵袋」である「Stack Overflow」は

下図グラフの左端が 2008 年 同サイト発足、

＞Jeff Atwood and Joel Spolsky launched Stack Overflow for the public in 2008 as a programming Q&A website.

（ジェフ・アトウッドとジョエル・スポルスキーは、2008 年にプログラミングに関する Q&A ウェブサイトとして Stack Overflow を一般公開しました。）

ピーク時には 20 万件の質問を受付けていましたが、2022 年 11 月に ChatGPT が公開され、放物線を描くような落ち方を見せて、その後は斜め 45 度の降下が続き、グラフ右端の 2026 年では言葉通り「雀の涙ほど」となっています。

これが日本の「Yahoo！知恵袋」でも同様だとすれば、「知恵袋、知恵袋」と話題にするのも、なんだか時代遅れという感じもします。残念ですね。。

• 初心者に厳しい、
• 重複する質問が多すぎる、
• うかつなことを言うと叱責や罵倒が飛んでくる

（下記窓の杜の記事より）

という文化が知恵袋には多かれ少なかれあるので、それが ChatGPT 以前の若干の降下原因のひとつと言われています。

私のように「頑張ろう」みたいなメッセージを出す人は少数派ということですかね。

このグラフはここ、

https://data.stackexchange.com/stackoverflow/query/1926661

にアクセスして、「Run Query」ボタンを押し、「ロボットではありません」の認証を行って、再度「Run Query」ボタンを押して、「Graph」タブをクリックすることで誰でも表示できます。

↑この私が書いた「グラフ表示方法の案内」を、AI が人間に代わってできるかどうか試したら、まぁ多少の操作の差異はあるものの、AI の案内通りにやってみたら普通にグラフにたどり着けましたね。

もはや「波」といえるほどの AI 波（えーあい・なみ）が人間社会に押し寄せていて、人間の仕事がなくなる勢いですね。

こうやって記事を書く意味もなくなっていくのかなぁ。

「人体描画システム」でプログラミングを教えようとしているんですけど、、

AI や他の人にはできない私なりの教え方がたぶんあると思うので、その線でやってみるか…

「Stack Overflow」について報じた各ニュース

エミュレータの「VirtualBox」で PC DOS を起動して、ファイラーの FD を起動します。

FD は Windows のエクスプローラーに相当するものです。

WORK ディレクトリに移動して、作業を始めます。

テキストエディタの「Vzエディタ」を起動しました。

PC DOS J6.1/V が英語モードなので Vz エディタも英語版が起動します。DOS が日本語モードなら Vz も日本語版。

FD も同じで、英語版と日本語版があります。

Vz エディタは最近オープンソースになりましたね。

そして、Turbo C に同梱の BGIDEMO.c を参考にグラフィック関係の設定を書き、

最後に circle( 320, 240, 240 );

と書く。円を描く命令です。

closegraph(); を最後に書かないと、実行後に画面が乱れてフリーズしました。これも BGIDEMO.c を見て学びました。

tcc -c test.c

というコマンドでコンパイルします。

tcc は「Turbo C のコンパイラ」という意味で tcc。

-c は「コンパイルだけして、実行ファイルは作らなくてよい」という意味です。test.exe ではなく test.obj が作られます。

.exe には実行するときに必要な「スタートアップ」コードと、「外部ライブラリの関数」コードが含まれているので実行できますが、.obj にはそれらが入っていないので実行できません。

そして、

tlink ^①   /x ^②   c:\tc201\lib\c0s ^③   test ^④ , test ^⑤ ,, c:\tc201\lib\cs ^⑥   c:\tc201\lib\graphics ^⑦

というコマンドで .exe の実行ファイルを作ります。

これを読んでいる人が tlink を使うことは基本無いはずですが、記事として意味不明な記述を避ける意味で、コマンドの説明を行います。

1. tlink   /x   c:\tc201\lib\c0s   test , test ,, c:\tc201\lib\cs   c:\tc201\lib\graphics
   
   tlink は「Turbo C のリンカ」という意味で、tlink。
   リンカは別々のファイルに収められたコンパイル済み関数群を１つのファイルへ結合する、という道具なんですね。
   これがあるから .exe の実行ファイルを作ることができます。
   gcc とか bcc とか lc とかのコマンドだけで .exe が出来上がるのはそれらが内部で別途リンカコマンドを呼び出しているからです。
2. tlink   /x   c:\tc201\lib\c0s   test , test ,, c:\tc201\lib\cs   c:\tc201\lib\graphics
   
   /x は「マップファイルを作らなくてよい」という意味です。
   tlink を使うと map ファイルというものが作られますが、私は map ファイルの使い方はよく知らなくて、特別いらないので作らない指定をします。
3. tlink   /x   c:\tc201\lib\c0s   test , test ,, c:\tc201\lib\cs   c:\tc201\lib\graphics
   
   次の c:\tc201\lib\c0s は .obj の拡張子が省略されており、c:\tc201\lib\c0s.obj とも書けます。
   c0 は「C言語のゼロ」（ほんとにそういう意味かは知らないけど）、つまり実行ファイルが実行を行うのに必要な「スタートアップ」のプログラムという意味で、つづく s はメモリの使い方が「small」な方式です、という意味です。
4. tlink   /x   c:\tc201\lib\c0s   test , test ,, c:\tc201\lib\cs   c:\tc201\lib\graphics
   
   続く test はこれも .obj の拡張子が省略されています。
   今回の円を描くプログラムをコンパイルしたもので、先に tcc で作った test.obj ファイルのことです。
   ここまでのカンマ , の区切りでつなげたい .obj を指定しています。
5. tlink   /x   c:\tc201\lib\c0s   test , test ,, c:\tc201\lib\cs   c:\tc201\lib\graphics
   ,test,, の部分は実行ファイルの名前指定 test.exe のことです。
6. tlink   /x   c:\tc201\lib\c0s   test , test ,, c:\tc201\lib\cs   c:\tc201\lib\graphics
   
   続く c:\tc201\lib\cs は .lib 拡張子が省略されており、c:\tc201\lib\cs.lib とも書けます。
   メモリの使い方が「small」な方式、、のための各種関数をおさめたライブラリです。
   各種 .obj を集めて .lib となっており、リンカはこの .lib からもコードを取り出し結合しています。
7. tlink   /x   c:\tc201\lib\c0s   test , test ,, c:\tc201\lib\cs   c:\tc201\lib\graphics
   
   最後の c:\tc201\lib\graphics はこれも .lib 拡張子が省略されています。
   今回のグラフィック関係の関数を収めたライブラリです。
   ここまでの区切りでつなげたい .lib を指定しています。
   （つなげるのは .lib 内の必要な部分のみ）

これらを毎回コマンド画面に書くのは面倒なので、まとめて m.bat に書いて、

m と書いて Enter キーを押すだけでこれらのコマンドが実行され、test.exe ができる、という感じにしてあります。

m は make の m です。

実は以上と全く同じことが、以下のコマンド１つで行えます。

tcc test c:\tc201\lib\graphics.lib

tcc はメモリの使い方をデフォルトで small を選ぶようになっており test.c をコンパイルし test.obj を作ります。続いて tlink を適切なスタートアップコードと test.obj、tcc に指定されたgraphics.lib を指定して呼び出し、test.exe を作ります。map ファイルの出力は省きます。

リンカを自前で呼び出すことで、実行ファイルのしくみを垣間見ることができます。（とはいえ、最近の gcc などの Cコンパイラだと、リンクするスタートアップやその他のコードが複雑で難しくなっています）

メモリの使い方が small だとか large だというのは古い x86 CPU 特有の方式で、現代の intel core シリーズでは廃止されています。

test.exe を実行すると、

きれいな円が描けました。

たのしすね。

でも最初、

tcc test.c

とだけやってエラー出していました。

できないから、後から、

c0s.obj とか必要なんだっけ、、と思い出したり、

「グラフィクス関係の関数が無い」というエラーが多発して、

えーーーっと？？

と思って FD で探したら、graphics.lib があったので、これ付ければいいのか？と思って付けたら動いた、って感じです。

クールに最初から全部知ってるわけじゃないんですわ。

これは lasm（多摩ソフトの Light Macro Assembler）というアセンブラでテキスト画面をいじる関数を作って、そのアセンブリ関数を C 言語から呼び出す、ということを「どうやればいいのか」と思っていろいろ調べてやってみたものです。

こちらはアセンブラでグラフィクスを描いたところです。

これをやりたかったのは中学生～高校生の頃で、

実際にできたのは 51 歳になってからの、つい先日のことです。

エミュレーター内ではあるけど、最速の超高速で描かれるわけですね。ここに可能性と宇宙とロマンがあります。

VRAM や BIOS、ファンクションコールに、I/O など、メカ的な物が当時の古いコンピューターでは丸出しになっていて、ユーザーがいじって自由にあれこれできるんですね。

今の Windows はセキュリティでガチガチに固められていて、自由があるようで無い（宇宙が無い）んです。

左上図はまったく同じことを JavaScript でやったところです。

64bit core i5（8gen）3GHz なので、たぶん上記の VRAM アクセス（16bit、16MHzくらい）よりも速いと思います。

▼下図は関係ないけど萌えポーズ

orz　力尽きました

2026年3月8日

プログラミング　人体描画システム７

人体描画システムは昨年 2025年4月14日 の日記からずっと続けています。

小学生のころから追いかけている RPG 開発を完全停止して、付きっ切りという感じです。

「人体描画システム」の日記記事をざっと並べるとこんな感じ。。。

• 2025年 4月14日　キャラクタ　再作成
• 2025年 5月11日　プログラミング　キャラクタを 3D 化
• 2025年 5月20日　プログラミング　キャラクタ 必要な知識体系
• 2025年 5月25日　プログラミング　ローカル座標系の不備
• 2025年 6月12日　プログラミング　ローカル座標系の不備　直し
• 2025年 6月14日　プログラミング　ローカル座標系の不備　再度直し
• 2025年 6月18日　プログラミング　「クォータニオン」はじめました
• 2025年 6月28日　プログラミング　「クォータニオン」はじめました２
• 2025年 7月18日　プログラミング　「クォータニオン」はじめました３
• 2025年 7月18日　プログラミング　「クォータニオン」はじめました４
• 2025年 7月27日　プログラミング　「クォータニオン」はじめました５
• 2025年 8月11日　プログラミング　「クォータニオン」はじめました６
• 2025年 8月15日　プログラミング　プロファイラ
• 2025年 9月 7日　プログラミング　「クォータニオン」はじめました７
• 2025年 9月10日　プログラミング　「クォータニオン」はじめました８
• 2025年 9月15日　プログラミング　「クォータニオン」はじめました９
• 2025年10月 4日　プログラミング　「クォータニオン」はじめました１０
• 2025年10月 6日　プログラミング　「クォータニオン」はじめました１１
• 2025年10月19日　プログラミング　「クォータニオン」はじめました１２
• 2025年11月 2日　プログラミング　最近
• 2025年11月 8日　プログラミング　最近、その後
• 2025年11月16日　プログラミング　最近、その後２
• 2025年12月 1日　プログラミング　最近、その後３
• 2025年12月 3日　プログラミング　最近、その後４
• 2026年 1月 1日　プログラミング　人体描画システム１
• 2026年 1月11日　プログラミング　最近
• 2026年 1月11日　プログラミング　最近２
• 2026年 1月19日　プログラミング　人体描画システム２
• 2026年 1月25日　プログラミング　人体描画システム３
• 2026年 2月 8日　プログラミング　人体描画システム４
• 2026年 2月15日　プログラミング　人体描画システム５
• 2026年 3月 1日　プログラミング　人体描画システム６
• 2026年 3月 8日　プログラミング　人体描画システム７（今日の記事）

とりあえずラジオ体操をやろうということで、やり始めたらうまくいきませんでした。（2026年2月8日の日記）

動画の最後でおかしな動きを見せています。

このうまくいかない原因は、自分の認識不足でした。

人が腕を上にあげて下ろすとき、ただ肩の角度を下げているのではなく、腕を少しひねりながら下げているんですね。

じゃあということで「下ろす回転」と「ひねる回転」を１つの回転としてやろうとしたんですが、ここが間違いだったんです。

腕を下すときは肩を中心にその回転軸は Z軸。

腕をひねるときは肩を中心にその回転軸は「直立状態のときの Y軸」。

だったんです。

鉄棒で逆上がりするとき、その回転軸は鉄棒ですよね。

それと同じで腕を下すときは肩を中心に肩に前後に走る軸、Z軸を中心にして横に腕を下ろしていきます。

ひねりは腕をあげたことはちょっと忘れて、普通に立っている状態で、肩を中心に肩に上下に走る軸、Y軸を中心にして腕を回転するとひねったことになります。

それらは別々の回転だと気づかなければ１つの回転として行い、上記の動画となってしまいます。

気づいて修正をすると下の動画となります。

赤を中心に緑がひねりながら時計回りに回転しています。

そして青は緑を中心にひねりながら時計回りに回転しています。

それぞれのパーツは親のパーツの回転を自分にも適用してから、そこから自分の回転を行うので、このような複雑な回転が実現されます。

ひじを曲げたとき、その状態で肩を回すと、ひじの回転はそのまま維持されながら肩の回転が行われますよね。

それを人体モデルにも適用したところが下の動画です。

アニメを終えると GUI を表示するようにしています。

プログラムとしては今まで１つのパーツに quaternionL というプロパティを持たせていましたが、それを

quaternion1L と、quaternion2L と、ダブルで持たせるようにしました。

quaternion1L は時計回りをさせるような回転用に、

quaternion2L はひねりをさせるような回転用に、という役割です。

上の動画でも GUI 操作の画面で、KAITEN1 と KAITEN2 とに欄が分かれています。

ひねりが必要なときにだけ操作するように、KAITEN2 にはチェックボックスを設けてオンオフできるようにしてありま

うぉぉぉ！なにィィィ何だこの回転ワぁぁぁ！ちゃんとできるようなったんじゃあ、ないのかぁぁぁ！

スッ、スタンド攻撃を受けているぞッ！

動画撮影の前にツールバー隠すの忘れてた。

疲れた…

なんでそういう回転になるのか、なんとなく見当は付いているけど、、