Point in Triangle
Includes a point in triangle test, taken from urruka's fiddle at http://jsfiddle.net/PerroAZUL/zdaY8/1/
HTML
<p>Click on canvas to generate a random triangle</p>
<pre id="info"></pre>
<canvas width="300" height="300"></canvas>
CSS
body {
cursor: crosshair;
}
Babel + JSX
"use strict";
class Triangle {
constructor(maxWidth, maxHeight) {
this.randomize(maxWidth, maxHeight);
}
randomize(maxWidth, maxHeight) {
['a', 'b', 'c'].forEach(vertex => {
this[vertex] = {x: randomInt(-maxWidth, maxWidth), y: randomInt(-maxHeight, maxHeight)};
});
}
contains(p) {
let a = this.a, b = this.b, c = this.c;
let twoA = b.x*c.y - b.y*c.x + (c.x-b.x)*a.y + (b.y-c.y)*a.x;
let sign = twoA < 0 ? -1 : 1;
let s = (a.y*c.x - a.x*c.y + (c.y-a.y)*p.x + (a.x-c.x)*p.y)*sign;
let t = (a.x*b.y - a.y*b.x + (a.y-b.y)*p.x + (b.x-a.x)*p.y)*sign;
return s > 0 && t > 0 && s+t < twoA*sign;
}
toString() {
return [this.a, this.b, this.c].map(p => `(${p.x},${p.y})`).join('-');
}
draw(ctx, highlighted) {
ctx.fillStyle = highlighted ? "#39ff14" : "#999";
ctx.beginPath();
ctx.moveTo(this.a.x, this.a.y);
ctx.lineTo(this.b.x, this.b.y);
ctx.lineTo(this.c.x, this.c.y);
ctx.closePath();
ctx.fill();
}
}
const canvas = $('canvas')[0];
const ctx = canvas.getContext("2d");
const mouse = {x: 0, y: 0};
const triangle = new Triangle(canvas.width, canvas.height);
$(canvas).mousemove(e => {
mouse.x = e.pageX - $(canvas).offset().left;
mouse.y = e.pageY - $(canvas).offset().top;
updateView();
});
$(canvas).click(e => {
triangle.randomize(canvas.width, canvas.height);
updateView();
});
function updateView() {
const inside = triangle.contains(mouse);
$("#info").text(
`Triangle = ${triangle}\nCursor = (${mouse.x},${mouse.y})\nInside = ${inside}`
);
clearCanvas();
triangle.draw(ctx, inside);
}
function clearCanvas() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
updateView();