正方形がどのように傾いているか、を正方形上に矢印で示したい

Question

どこのブランチに投稿すればよいかわからないのですが、とりあえずお尋ねします。当方、文系フロントエンドエンジニアで、数学と物理には少し弱いのを承知下さい。

x、y、zのJSONデータを、plotly（グラフ作成ソフト）で、type=等高線（contour）で描画しています。x軸は0〜20まで、y軸は0〜20まで、z軸は標高を表してます。

参考

https://plot.ly/javascript/contour-plots/

このグラフにグリッドを表示させると、20 X 20の400個のマス（タイル）が出来ます。交差する点がx,y,zの座標を表します。(0, 0, 2.0)、(1, 0, 2.0)、(1, 1, 6.0)、(0, 1, 6.0)で、四隅に座標を持った一つの正方形タイルになります。

等高線グラフなので等高線は引けるのですが、別途canvasやGDなどを使ってもいいので、この一つの正方形タイルがどのように傾いているか、をその正方形上に矢印で示したいと思っていますが、その計算式を色々調べても難解で、方程式が組めない状況です。上記の(0, 0, 2.0)、(1, 0, 2.0)、(1, 1, 6.0)、(0, 1, 6.0)なら、真下向き（↓）に矢印を描画させたいです。また、その傾斜がきつければ矢印を長めに、傾斜が緩やかなら矢印は短めに描画したいです。

一つの正方形の四隅のz座標から、その正方形がどうのような傾きなのか、を矢印で示せる式（可能ならJavascriptかPHPで・・）を優しく解説して示していただける方、ヒントや参考サイトをご存知の方がいらっしゃったらありがたいです。

イメージ

↓	↘︎	↘︎	↘︎	→	↖︎

と言う感じでしょうか。よろしくお願い致します。

Comments

[退会済みユーザー]

あー、根本的には、プログラミングに関する質問ではないんだなぁ…。ベクトルの求め方が分からないという事なので。個人的にはそういうのも好きだけど、サイト的にどうなのかな…。

Answer 1

まずはポリゴン・法線ベクトルで調べるべし.

https://www.google.co.jp/search?client=ubuntu&channel=fs&q=%E3%83%9D%E3%83%AA%E3%82%B4%E3%83%B3+%E6%B3%95%E7%B7%9A%E3%83%99%E3%82%AF%E3%83%88%E3%83%AB&ie=utf-8&oe=utf-8&gfe_rd=cr&dcr=0&ei=R4HOWtu5O6_98Ae4wKLACQ

三点から得られたポリゴン面に垂直に立つ法線ベクトルを求め, それを真上から射影すればその方向と傾きが得られる.

---

例えばここを参考としてスクリプトを組んで見る.
http://www.dstorm.co.jp/dsproducts/developers/Technical_Data/CalcNormal.html

<canvas id="canvas" width="400" height="400" style="background-color:yellow;"></canvas>

"use strict";
{
	function getNormal(a, b){
		const vec = [
			a[1] * b[2] - a[2] * b[1],
			a[2] * b[0] - a[0] * b[2],
			a[0] * b[1] - a[1] * b[0]
		];
		const norm = Math.sqrt(vec.reduce((prev, val) => prev + val * val, 0));
		return vec.map((val, i) => vec[i] /= norm);
	}
	function plot(table){
		const ctx = canvas.getContext("2d");
		ctx.strokeStyle = ctx.fillStyle = "red";
		ctx.lineWidth = 2;
		const unit = 100, arrow = 50;
		const marker = new Path2D("M0,-5L5,0 0 5z");
		const rows = table.length, cols = table[0].length;
		for(let y = 0; y < rows-1; y++){
			for(let x = 0; x < cols-1; x++){
				ctx.save();
				//ベクトルの描画基準
				ctx.translate(unit * (x + 0.5), unit * (y + 0.5));
				//上半三角
				const normalT = getNormal(
					[1, 0, table[y][x+1] - table[y][x]],
					[0, 1, table[y+1][x] - table[y][x]] 
				);
				//下半三角
				const normalB = getNormal(
					[-1, 0, table[y+1][x] - table[y+1][x+1]],
					[0, -1, table[y][x+1] - table[y+1][x+1]]
				);
				//平均
				const normal = normalT.map((val, i) => (val + normalB[i])/2)
				ctx.beginPath();
				ctx.moveTo(0,0);
				ctx.lineTo(normal[0] * arrow, normal[1] * arrow);
				ctx.stroke();
				//marker
				ctx.translate(normal[0] * arrow, normal[1] * arrow);
				ctx.rotate(Math.atan2(normal[1], normal[0]));
				ctx.fill(marker);
				ctx.restore();
			}
		}
	}
	plot([
		[0, 0, 1, 0, 0],
		[1, 1, 1, 1, 1],
		[2, 3, 2, 4, 2],
		[3, 3, 3, 3, 3],
		[4, 3, 5, 6, 7]
	]);
}

NOTE:
途中で求めた法線ベクトル二つを足して簡易的に2で割っているけれど, 本当はもっと適した算出法があるかもしれない.(この操作が引き起こす実用上の問題は不明)

Comments

[SaintKnowledge]

ありがとうございます。既に調べたキーワードですが、再度見直してみます。

ポリゴン・法線ベクトルなど、皆さんにとっては初歩的で当たり前のことかもしれませんが、すみません、私にとっては難しいものです。。

もう少し回答も待ちたいと思います。

[defghi1977]

> 数学と物理には少し弱いのを承知下さい。
だからといって, それが免罪符となるとお考えれであれば甘すぎます.
単純なベクトル・行列演算をご自分で考えもせずコードだけを剽窃しようなど言語道断, いくらでも概念の解説, コードの実装例が検索できる以上わからないのであれば, わかるまで考えるなり調べるなりすべきなのです.

[SaintKnowledge]

ありがとうございます。印象を悪くされたなら申し訳ないです。

もちろん、自分で調べ、自分コーディングを行い、試行錯誤した結果、めちゃくちゃな結果しか出ず、そのコードを載せるのも忍びない、と思い、このような投稿となりました。内容的にも「プログラミング」にはそぐわないし「ろくに調べもしないクレクレ投稿」と思われるかも、と。。

コードサンプルまで載せてもらい、ありがとうございました。載せて頂いた「法線ベクトルの計算式」サイト、私にとって用語的にも難解ですが、Javascriptにして頂いたおかげで理解出来ました。本当に助かりました。

決してクレクレの投稿ではなかったことを、何卒ご理解下さいませ。。ここで終了とし、ベストアンサーとさせて頂きます。

[defghi1977]

> 自分で調べ、自分コーディングを行い、試行錯誤した結果、めちゃくちゃな結果しか出ず
であれば, 少なくともその経過を提示すべきでした.

> Javascriptにして頂いたおかげで理解出来ました。
本当ですか？ 私が時間を掛けて作ったコードをひと目見て理解できたと？

> 決してクレクレの投稿ではなかったことを、何卒ご理解下さいませ。
そこを問題としているのではありません. あなたの質問には余計な文言が多すぎます. わからないのであればきっぱりと「わかりません」と宣言すれば宜しい. そこに文系だからどうだの優しく説明しろだの一切無用です.

[SaintKnowledge]

大変失礼致しました。以後気を付けます。