VCA Shape Maker

画像に合わせて玉形を作り、VCA(OMA / DCS)ファイルにします。商品ページのフレームの写真などから、その形を再現した VCA をブラウザの上で作れます。

vca-guide(VCA通信の解説)・vca-ptn-converter(玉形の変換)・vca-lens-simulator(厚み・コバ・ヤゲンの計算)の仲間です。書き出した VCA は VCA Lens Simulator にそのまま読み込めます。

写真から形を「それらしく再現する」ための道具です。寸法は入力した玉形幅(A 寸)に合わせて決めるだけなので、フレームトレーサで測った値の代わりにはなりません。

使い方

index.html をブラウザで開きます。サーバーもインターネットへの接続も要りません。

設定は画面の左にあり、タブ(画像・形・寸法・穴・VCA)で切り替えます。上の帯にはいまの条件、下の帯には玉形の寸法と、保存・コピーのボタンが出ます。

1. 画像: 画像を置くか、選ぶか、貼り付けます(Ctrl+V)。写真が傾いていれば「傾き」で水平に直します。画像を使わずに白紙の上で作ることもできます。
2. 形を置く:
   • クリックで自動抽出: レンズの内側をクリックすると、リムに囲まれた範囲を取り出して形にします。背景とつながってしまうときは「色の許容値」を下げます。
   • 箱を描いて作る: レンズを囲むように箱をドラッグすると、四隅の丸みに合わせた形を作ります。
3. 手直し: 点をドラッグ、箱の四隅と辺で伸び縮み(Shift で縦横比を保つ)、箱の中をドラッグで移動、線をダブルクリックで点を追加、点をダブルクリックで削除。四隅の丸みのスライダーは、今の箱に合わせて形を作り直します。Ctrl+Z で元に戻せます。
4. 寸法: 玉形幅 A とレンズ間距離 DBL を入れます。商品ページの「52□18」なら A = 52、DBL = 18 です。玉形高さ B は形の縦横比から決まります。
5. 穴(縁なし・ツーポイントのフレーム): 写した眼の穴を、玉形の箱の中心からの位置(mm)と径で入れます。正面から見て右が +x、上が +y で、右眼は +x 側、左眼は -x 側が鼻側です。長穴は、もう一方の端を「終点」に入れます。
   • 「穴を足す」で鼻側に 1 つ足し、数値で直します。「画像の上で置く」を押すと、画像の上をクリックした位置に置けます。置いた穴はドラッグで動かせます。
   • 写真から取った位置は目安です(A 寸 52 mm を数百画素で写すと、1 画素がおよそ 0.1-0.2 mm)。フレームの寸法がわかれば数値で合わせてください。
   • もう片方の眼の穴は、x の符号を変えて(左右反転して)作ります。穴の中心(長穴は終点も)が玉形の外にあると知らせます。
6. 書き出し: 画面下の「保存」で .vca ファイルを保存します。「コピー」で中身をクリップボードに写せます。

画像はブラウザの中だけで扱い、保存も送信もしません。書き出す VCA には形の数値だけが入ります。他社のサイトの画像は、そのサイトの利用条件に従って使ってください。

書き出す VCA

REQ=FIL
JOB=SHAPE-001
DBL=18.00
HBOX=52.00;52.00
VBOX=35.99;35.99
CIRC=153.40;153.40
FCRV=4.00;4.00
DRILLE=0             (穴が無いとき。穴があれば下の形)
TRCFMT=1;360;E;R;F
R=2600;2601;…        (1/100 mm、15 個ずつ)
ZFMT=0               (サグ(Z)なし)
TRCFMT=1;360;E;L;F
R=…
ZFMT=0

• 玉形は等角度(TRCFMT=1;360;E)で、半径は玉形中心(書いた点の外接箱の中心)から測ります。点の数は 360・400・1000・1440 から選べます(既定 360)。DCS では点の数は加工機との取り決めなので、使う加工機が受け付ける数を選んでください。
• 向きは、検者が装用者を正面から見た状態で、0° が 3 時方向、反時計回り(DCS と同じ)。右眼は +x 側が鼻側です。
• 写した眼の形をもとに、もう片方の眼は左右反転(角度 a の半径 = 180° - a の半径)して作ります。
• JOB は DCS の limited 型で、半角の英数字と記号の 12 文字までです。区切りなどに使う文字(; = , * ? |)と制御文字は使えず、入れると誤りを知らせて書き出しません。空にすると不明値の JOB=? を書きます。
• 穴は DRILLE に、基準 C(玉形の箱の中心)で書きます。右眼の穴を先に、1 か所 1 行です。

  DRILLE=R;C;22.50;3.00;1.40               眼;基準;x;y;径(mm)
  DRILLE=R;C;-24.00;4.00;1.20;-21.00;4.00  長穴は終点の x;y を続ける
  DRILLE=L;C;-22.50;3.00;1.40              反対の眼は x の符号を変える
  DRILLE=L;C;24.00;4.00;1.20;21.00;4.00
  

  穴が無いときは DRILLE=0(穴なし)を 1 行書きます。書式は vca-guide のパーサーの drillRecords と同じで、取付面(前面)・深さ(貫通)・角度(前面の法線)は省略しています。
• R の行は 15 個ずつです。値が 5 けたになって 1 行が 80 文字を超えるときだけ、80 文字に収まるように分けます。
• 改行は CR LF です。
• HBOX・VBOX・CIRC は、R レコードに書いた半径(1/100 mm に丸めた値)を等角度の点に戻して計算します。DCS の決まりどおり、書いた半径データの形と一致します。画面に出る寸法も同じ値です。

形の作り方

1. 自動抽出: クリックした点の色から、似た色(許容値の範囲)を上下左右に塗り広げます。リムで止まった範囲をレンズの内側とし、映り込みなどの穴は埋めます。範囲が画像の端に届いたら「閉じていない」として止めます。範囲の重心から 720 方向へ縁までの距離を測り、少しならして輪郭にします。
2. 箱から作る: 四分円ごとのスーパー楕円 |x/a|^n + |y/b|^n = 1 です。n が 2 で楕円、大きいほど角ばります。
3. 画面の形: 制御点を通る閉曲線(セントリペタル Catmull-Rom)です。角でも膨らみや輪ができにくい曲線です。
4. mm への換算: 画像の y を上向きに直し、溝の補正を足したあとの幅が玉形幅 A になるように縮尺を決めます。
5. 溝の補正: 写真に見えるのはリムの内側の縁ですが、トレースする位置は溝の底(ヤゲンの山が入る位置)です。その差(既定 0.5 mm)だけ、形を法線の向きに外へ広げます。
6. 半径: 玉形中心から 360 方向へ線を引き、形との一番外側の交点までの距離を半径にします。点と点の間にある角は測られないので、書いた点の外接箱の中心が玉形中心に来るまで、中心を合わせ直します(とがった角のある形で 0.05 mm ほど動く)。

できないこと

• 写真は平面なので、フレームカーブ(立体のそり)は取れません。フレームカーブは入力した値(FCRV)を書くだけで、立体データ(Z)は書かず、ZFMT=0(サグなし)を書きます。
• 斜めから撮った写真のゆがみ(台形のゆがみ)は直しません。正面から撮った写真を使ってください。
• 縁なし(リムレス)やナイロール(ハーフリム)は、リムで囲まれていないので自動抽出できません。「箱を描いて作る」で合わせてください。穴は「穴」のタブで入れられますが、画像から自動では見つけません。
• 穴は基準 C(箱の中心)の丸穴・長穴だけです。矩形の切り欠き、穴の深さ・角度、縁や外接箱を基準にした指定(E・B)は書きません。

ファイル

ファイル	内容
index.html	画面
shape.js	形の計算(閉曲線、スーパー楕円、溝の補正、半径、穴の内外の判定、VCA と DRILLE の書き出し)
extract.js	画像からレンズの内側を取り出して輪郭にする
tests/shape.test.js	計算のテスト
tests/conformance.test.js・tests/spec.js	書き出す VCA が規格(DCS v3.14)の決まりを守るかのテスト
tests/ui/	画面の検査(Chrome をヘッドレスで動かして操作する)
tools/trace.js	規格との対応の表とテストを突き合わせる
tools/mutate.js	実装をわざと壊し、テストが見つけるかを確かめる(ミューテーションテスト)
docs/test-items.md	テスト項目の一覧
docs/conformance.md	規格との対応(どの決まりをどう守るか)

テスト

npm test

閉曲線が制御点を通ること、スーパー楕円が箱に収まること、半径と溝の補正、左右反転、VCA の寸法と書式、穴(DRILLE)の書き出し、画像からの輪郭の取り出し(映り込みの穴埋め、リムが切れているときの検出)を確かめます。穴は、隣に置いた vca-guide(../vca-guide)のパーサーで読み直して確かめます(無ければその 2 件は飛ばします)。

書き出す VCA が規格の決まりを守るか(ファイルの 1・2 行目、JOB の文字、左右のレコード、TRCFMT と R の書式・向き・原点、DRILLE の欄)は、tests/conformance.test.js で確かめます。どの決まりをどのテストが確かめているかは docs/conformance.md と docs/conformance-tests.md にあります。次のコマンドで突き合わせ、テストの無い決まりがあれば失敗します(GitHub Actions でも動かします)。

node tools/trace.js --check

テストが確かめているはずの処理を本当に確かめているかは、実装をわざと壊して試します(壊し方の一覧は tools/mutate.js にあり、1 つでもテストが通ってしまえば失敗します)。

npm run mutate

画面は、Chrome をヘッドレスで動かして確かめます(Node.js 22 以上)。リポジトリのフォルダで実行し、画像は OS の一時フォルダの vca-ui-check に置きます。

node tests/ui/cdp.js index.html tests/ui/steps.js

確かめている項目は docs/test-items.md にまとめています。

ライセンス

MIT License