Large Display Size Middle Display Size Small Display Size
there is no canvas.

2017 年 2月 の日記

2017/2/19(日)

fig.
▲表示されたコントロールポイントを左右にゆっくりと動かすと、図形同士の位置関係が微妙にずれてしまう。(画面は拡大された状態で表示されているが、その拡大がうまくいっていない)
Google Chrome: OK
Firefox: OK
IE: OK, Edge: OK, Opera: OK

プログラムで何かを作る際の大きなミスの一つです。

HTMLの要素のサイズをベースにして図形システムを作り始めてしまいました。

現在、拡大縮小の処理で行き詰っています。

サイズはリアルのサイズ(実寸)をベースにすべきでした。

プログラムを知らない人や図形のシステムを作ったことがない人には何のことかわからない話題だと思います。

少しわかりやすく言うと、図形のシステムって、画面の見た目でサイズ計算するのではなく、画面とは別に「本物」のサイズをデータとして別に持っていて、その「本物」のサイズをもとにして画面の見た目を作るのが普通だと思うんです。

ところが、今回、HTMLの要素(つまり見た目)をもとにして結構いいところまで作ってしまいました。「本物」のサイズについては「ああそういえばそんなのもあったっけ」とあとから気づいて実装(プログラムへ組み込み)し始めて、「うまくいかない、しまった」と思ったわけです。

表示サイズの拡大縮小、図形自体の拡大縮小、それらをグリッドスナップ(1ドットで動くのではなく、8ドット単位などのマス目に合わせて動く機能)で動かした際、それぞれの図形のサイズが大きくなったり小さくなったりして挙動がおかしいです。

左の画像リンクをクリックするとそのJavaScriptを起動します。


どうもサイズを割ったり掛けたりする際の小数点以下の扱いが甘いみたいで…。

後悔先に立たずで、今から直すのが大変…。

このように最初の設計が甘いと いろいろ後から行き詰ることになります。最初に設計しないのが趣味のプログラミングの面倒くさくない良いところなんですが、それなりの結果が待っているとも言えるかな…。

今回のこの図形のシステムで設計が甘くて後から慌てて直した点は以下の通り。(設計と言ってもソフトを設計らしく設計したことなんてありませんよ)

甘い設計1 グループ化
原因
図形のグループ化についてあまり考えていなかった。
結果
図形のグループ化、グループ化された図形をまとめて移動、拡大縮小、グループ内での図形のコピーなどをプログラムする際に行き詰った。
対策
それまでなかった「ディレクトリ構造」を図形データ群に持たせて、すっきり解決した。
甘い設計2 コマンドライン
原因
普通に必要な処理を書けばいいと思って作り始めた。
結果
図形のさまざまな処理が煩雑(はんざつ)になってしまい、苦しい。
対策
それまでなかった「コマンドライン」をシステムに持たせて、すっきり解決した。内部コマンドの組み合わせで処理を実現するので、プログラム本体が複雑化・巨大化するのを防ぐことができます。
甘い設計3 実寸サイズベース(今回の話題)
原因
HTML要素がお手軽で使いやすかったので、あまり考えずにHTML要素のサイズプロパティを中心(ベース)に図形システムを作り始めた。
結果
画面の拡大縮小がうまくいかない。見た目がずれているのを直すのが困難。どこを直せばいいのか収集付かない。
対策
最初から作り直せば良いけど、そうもいかない。
「実寸」と「表示サイズ」を分けて考える試作プログラムを作り、それを参考に本番プログラムを直す。

上の画像リンクはすぐに作ってしまったその試作プログラムです。(なんとかうまくいった感じです)
図形をドラッグするとスナップされながら動かせます。動かした後、スライダで拡大率を変更すると、ずれたりしないで拡大されます。実寸データを主体にプログラムしてあります。

以上のように、「実寸」、「ディレクトリ構造」、「コマンドライン」などなど、図形システムにあったほうがいい設計のキモみたいなものが最初から頭にあれば、こんなに苦労しなくて済むんです。(去年2016年11月からこのプログラムに取り組んでいます)

私の今回のプログラミング日誌を今回特別に掲載します。プログラマーの人には多少面白いかもしれません。自分用の生(なま)の日誌なので「こんなやり方やってるんだぁ…」みたいに思うかも。

今回のプログラミング日誌

あと今回のソースコードです。

今回のソースコード

ホームページでは、あれができた、これができた、という内容よりも、こんな失敗をした、という内容のほうがニーズがあるかなと思いました。



2017/2/11(土)

fig.
▲「キャラクターモデリング造形力 矯正バイブル第2版」(¥4000+税)

人物を3DCGでモデリングするための教本を買いました。

左の画像リンクをクリックすると写真を拡大します。



fig.
▲本の中のあるページ。

人の頭の形というのは、3DCGで簡単に作成できません。

こういう教本を用いて習得することにします…。

左の画像リンクをクリックすると写真を拡大します。




2017/2/8(水)

fig.
▲関節で回転している

画像と画像を腕みたいに関節で回転させる例です。

時間がなくて、あまり親切な説明はありませんのであしからず。

ソースコード

左の画像リンクをクリックするとJavaScriptを実行します。

これで何ができるかというと…



fig.
▲水島~!
去年の11月にこのページを飾った手を振る女の子のJavaScriptとか…


fig.
▲絵を描くには - 関節で回す

「絵を描くにはその3」で説明している内容をプログラムで実現したりできます。

サイドビューのRPGのキャラとか、この方法で作れそうです。




2017/2/6(日)

fig.
▲ブラウザ上で図形を操作する

JavaScriptによる「図形の扱い」。

週末につきっきりで作っています…。

ソースコード

左の画像リンクをクリックするとJavaScriptを実行します。









ページ制作 homepage6047



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