2D ベクトルのdot積とcloss積の使いどころ

 以前組んだプログラムのベクトルのコードを見直した

ドット積とクロス積の使いどころがわかった

"白"が進行方向 "緑"がターゲットへのベクトルの時

ドット積はターゲットが前方180°以内にあれば正

後方だと負になるようだ

クロス積はターゲットが右に居るか左に居るかで正負が

分かれるようだ

vector に.dot()があるが.closs()がvectorオブジェクトを返してくるので

計算式にした(計算結果は同じだった）

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<div id="p5canvas"></div>
<script>   

let posmouse; //mouse position
let postarget; //target position

let v1;		//mouse to target 
let v2;		//mouse move direction
let vdot;	//dot product 

function setup() {
	createCanvas(400, 400).parent("p5canvas");
	postarget = createVector(width / 2, height / 2);
	posmouse = createVector(mouseX,mouseY);
	v1=createVector(0,1);
	v2=createVector(1,0);
	textSize(20);
}
function mousePressed() {
	v2=p5.Vector.sub(postarget,posmouse);
	v2.normalize();	
}


function draw() {
	background(100);
	
	posmouse.set(mouseX,mouseY);	
	v1=p5.Vector.sub(postarget,posmouse);
	v1.normalize();
	
	noStroke();
	fill(255);
	
	vdot=v1.x*v2.x+v1.y*v2.y;		//dot product
	text("dot  : "+vdot.toFixed(3),10,30);
	vdot=v1.x*v2.y-v1.y*v2.x;		//closs product
	text("closs:"+vdot.toFixed(3),10,60);

	strokeWeight(4);
	noFill();	
	
	stroke(155,255,155);
	circle(postarget.x,postarget.y,50);	
	stroke(150,255,255);
	circle(posmouse.x,posmouse.y,50);
	
	stroke(0,255,100);
	v1.mult(50);	
	v1.add(posmouse);	
	line(v1.x,v1.y,posmouse.x,posmouse.y); 
		
	let v3=v2.copy();
	v3.mult(50);
	v3.add(posmouse);
	stroke(255,255,200);	
	line(v3.x,v3.y,posmouse.x,posmouse.y);
}
</script>