Large Display Size Middle Display Size Small Display Size

2015 年 8月 の日記

2015/8/23(日)


▲はんだなんだ。そうなんだ。
昔描いた はんだの画像です。
はんだとは関係ないですが、今3DCGのプログラミングの方法の説明のページを作っていて、近々公開予定です。
それで、その説明ページというのが、今年2015年の1月あたりから製作を続けていて、何度も完成間近になるのに、繰り替えし1からやり直しをしています。5,6回くらいやり直したかな。どうしても、気に入らなかったり、まとまらなかったり、なんとなくだったり。
で、まとまらない理由について考えていたんですが、絵を描くときと、説明など話を作るときとはどちらも似ていることに気付きました。
絵は骨格を知らないで描くと、細部は描きこんでも全体を見るとどこか傾いている…と言う場合が多いです。これは骨格を意識すれば直ります。骨格を先に描くと、それ以上傾きようがなくなるのでまとまりやすいんです。
同じように、説明も先に骨格を作れば、まとまるかなと。
会社でも説明が下手な人って、部分部分を支離滅裂に話すことはできても、全体を話すことがまずできない。(私のことですが)
骨格さえできてしまえば傾きようがない…
これでまとまるかな~

最近自分の話下手の表現でこれはいいなと思ったのがあるんですが、それは、
”自分は生まれてから今まで、日本語を話した量よりも、プログラミングした構文の量のほうが、いい勝負で、多いかもしんない”
あと、自分がコンビニ弁当ばっかり食べていることをこんなふうに表現することがあります。
”自分の体の90%はコンビニ弁当でできている!”


2015/8/10(月)


▲JavaScript
JavaScriptによる3DCG描画その2です。
複数の形状に対応しました。
左の画像をクリックすると、新しいウィンドウでJavaScriptのページを開きます。
ブラウザの表示を拡大したり全画面表示にしたりして、調整して、 入院してベッドから動けない人や、子供さんに見せてあげたら喜びそうだな。

2015/8 /2(日)


▲わたしんちのWindows10画面
Windows10にしました。
「予約」というしくみが用意されていたので予約しましたが、公開当日にインストールは完了したものの、何か 失敗したらしく「以前のシステムに戻します」と言われて、アンインストールが始まり、その後の再インストー ルで完了できました。1回目はいろいろ周辺機器をつけっぱなしで始めてしまい、2回目はそれらを全部外して 行いました。そういう原因かはわかりませんが…。

誰かに勧めるときに問題になりそうな悪い点:
  • エクスプローラーの右クリックメニューを便利にカスタマイズしていましたが、Windows10にした らそれらがすべてリセットされてしまいました。「送る」のメニューは残っていましたが、レジストリをい じって実現するような右クリックメニューは消えてしまいました。そういう設定が無い人には問題は起きま せん。
  • 通常使うブラウザがFirefoxからEdgeに強制変更されていました。これにはFirefox のメーカーのMozillaも文句を言ったみたいです。通常ブラウザは設定で直せます。
  • 多少の不具合。たとえば、うちで使ってるウイルスソフトがメッセージを出してくるのですが、その メッセージをクリックすると今まで(Windows8.1)は何かしら動きがあったと思いますが、 Windows10では不具合のせいか、何も起こらない。
  • ウィンドウの配色に白が多く、他のウィンドウとの区別がつきにくい。
良い点:
  • Windows8よりも細かい動きやデザインが洗練された印象がある。もしかしたら Windows7よりも良いかもしれない。
  • 当たり前と言われそうだが、タスクバーのアプリごとのジャンプリストのピン留めがきちんと自分が設 定したものが残っていた。右クリックメニューはリセットされたものの、Windows10に変更したこ とを感じずに、今まで通りの作業が続けられるという印象がある。
  • Windowsストアアプリがデスクトップ上で単独のウィンドウで表示できる。これは良い。
  • CTRL + WIN + 左右キー で、デスクトップを移動できる。様々な作業の各ウィンドウが1つのデスクトップ上でごちゃまぜになるのを回避できそうだ。よくわからないところもあるが便利かも しれない。

2015/8 /2(日)

エラー:CANVASが使えません。
▲JavaScript
 これはJavaScriptによる3DCG(ワイヤーフレーム)です。
 動画ファイルではなく、プログラムで動いています。
 操作などはできません。

 すごそうに見えるかもしれませんが、3次元座標 x, y, z から2次元座標 h, v への変換は、h=x*(s/z), v=y*(s/z) という中学校数学の計算式だけでできます。
 計算式はWikipediaに載ってました☆
 ただ、回転は高校数学の sin, cos を使っています。
 計算式で h, v にする前に、3次元座標の x, z について sin, cos で回転させてから、計算式に通せば水平ぐるぐる回転が可能です。

 計算式中の s は何かと言うと、この画面を普通のカメラ 50mm レンズで写したように描くなら s=50 とし、望遠レンズ 200mm みたいにするなら s=200 とします。普通のカメラで富士山や月を撮影しても小さくなってしまうのは 50mm だからで、200mm レンズとかに変えれば大きく写せます。s はそういう意味の数値です。

 モデルの作成は、大量の頂点と大量の面について、手作業で紙に絵を描いたりして座標を考えたりするのは非常に 大変です。
 3DCG作成ソフトの「Shade3D」を使って自動車のモデルを作成し、Shade3Dのファイルメ ニュー>エクスポート>FBX ... を選び、モデルデータをFBXという拡張子のテキストファイルにします。Shade3Dでなくてもフリーウェアの「Blender」という3DCG作成ソフトでも FBXは出力できます。


▲Shade3Dでの、エクスポート>FBX ...

 このテキストファイルにモデルの頂点座標や、どの頂点を使って1つの面(ポリゴン)を描くのかといった情報が 入っているので、テキスト加工してJavaScriptのデータに直します。

 JavaScriptでは面のデータから頂点のリストを取り出し、その各頂点は x, y, z の3次元座標を持っているので、先ほどの計算式に入れて2次元座標の h, v を算出します。これで描く面(ポリゴン)毎に CANVAS のライン描画関数である moveTo( h, v ), lineTo( h, v ), stroke() などを行えば上のような3DCGが描けるわけです。

 ただ、「中学校の計算式でできます」とは言っても、つまづくポイントがいくつかあります。
  • 算出した h, v をそのまま描画関数に渡さないで、ちょっと調整が必要
  • モデルが視点に近すぎると描画が乱れる
  • モデルのサイズや s の値などのデータの数値のバランスは多少必要
  • 回転

などでつまづくと思います。ご注意です。

このページを右クリックして、「ソースを表示」などを選べば3DCGのプログラムが見られます。


以下は私が思ったことと考えたことです。

原理的な部分をちょっとプログラムすれば、上の自動車のように、ゴリっとダイナミックに動いてしまいま す。これは、小さな力で大きなものが動く「てこの原理」にちょっと似ています。自分としてはちょっとプログ ラムしただけなのに「ヲっ、動いたっ」と思い、Shadeのデータの羅列をJavaScriptに変換し実 行したら「ヲっ、ちゃんと表示されたっ」と思いました。そんなアンバランスな感覚がこの技術には存在してい ます。

先人たちが、h=x*(s/z), v=y*(s/z) という計算式を見つけてくれたから、自分はこうやって楽しめるわけですが、どんなふうに苦労してきたのかがあまり見えないので、なかなか感謝しづらいかもしれないです。で も自分の力でこれを全部やったとか思ってしまうと、あまり良いことが起こんないんでしょうねぇ…。

3DCGという魅力の技術が新鮮な魚だとして、ニャンコに渡してやると加えてササーっと物陰へ逃げて、独 り占め的にハグハグとモクモクとおいしく食べてしまう。そんなに好きなんだね。人間も同じことをやってきた のかな。最近はインターネットで魚が、いや、技術が大公開されていて、今までローカル(専門、うちわ、独り 占め)で楽しんできた人たちは、みんなが同じことをできてしまうので、残念がっているかもしれません。

土足で踏み込まずに、大したことないなどと言わずに、技術の本質(価値)をよく見て行儀よくする必要があ るかもしれない。

 なんでこの記事を書こうと思ったのかと言うと…、今月8月の最初のネタが無かったので、今自分が半年以上前か ら作っている「中学生向けの3DCGの説明ページ」からちょっとネタを引っ張り出してきた、というわけです。
 どうして中学生向けにそういうページを作るのかと言うと、計算式が中学生でもできるものだから、というのと、 私自身が中学生の頃にそういう3DCGの計算方法を知りたがっていた、の2点かな。
ページ制作 homepage6047



ページの上端へ (もくじ開く)