Is point inside triangle - 2
A short algo for detecting whether point inside, on or outside triangle
by Ibrahim Tanyalcin
HTML
<div class="container">
<div id="perf"></div>
</div>
CSS
canvas {
width: 100%;
height: 100%;
display: block;
}
JavaScript
/*
w = canvas width,
h = canvas height,
dotW = dot width,
dotH = dot height,
epsilon = a percentage err margin,
to calculate whether
point is on triangle
*/
!function(w,h,dotW,dotH,epsilon){
/*################################
##############INLINES#############
##################################*/
let perf = void(0);
const perfDiv = document.getElementById("perf"),
canvas = document.body
.firstElementChild
.appendChild(document.createElement("canvas")),
halfDotW = dotW / 2,
halfDotH = dotH / 2,
dotGen = (col) => {
const canvasDot = document.createElement("canvas"),
ctx = canvasDot.getContext("2d");
canvasDot.width = dotW;
canvasDot.height = dotH;
ctx.beginPath();
ctx.arc(
halfDotW,
halfDotH,
Math.min(halfDotW,halfDotH),
0,
2 * Math.PI
);
ctx.fillStyle = col;
ctx.fill();
return canvasDot;
},
dots = {black:dotGen("Black"),blue:dotGen("Blue")},
context = canvas.getContext("2d"),
svg = document.createElementNS("http://www.w3.org/2000/svg","svg"),
raf = window.requestAnimationFrame,
set = (ctx) => (p,v) => {
ctx[p] = v;
return {
set: set(ctx),
comm: comm(ctx)
}
},
comm = (ctx) => (c,...args) => {
ctx[c].apply(ctx,args);
return {
set: set(ctx),
comm: comm(ctx)
}
};
//(g)et(B)ounding(C)lient(R)ect
let gbcr = null;
canvas._busy = false;
canvas.width = w;
canvas.height = h;
drawTriangle();
/*################################
########RENDER SCENE THROTTLE#####
##################################*/
canvas.addEventListener("mousemove",function(e){
if(canvas._busy){return}
const p = getCoord(e),
isInside = insideTriangle(
...