triangles way

triangles for triangles

by Konstantin Cryman

HTML

<script src="https://rawgit.com/tnormandao/tnr/master/dist/tnr-vec2.js"></script>

CSS

canvas {
  border: 1px #000000 solid;
}

JavaScript

function sign( p1, p2, p3){
    return (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y);
}

function PointInTriangle( pt, v1, v2, v3){
    var b1, b2, b3;
    b1 = sign( pt, v1, v2 ) < 0;
    b2 = sign( pt, v2, v3 ) < 0;
    b3 = sign( pt, v3, v1 ) < 0;
    return ( (b1 == b2) && (b2 == b3) );
}

var img = new Image();
var canvas1 = document.createElement('canvas');
var canvas2 = document.createElement('canvas');

    canvas1.width = 256;
    canvas1.height = 256;
var ctx1 = canvas1.getContext('2d');

    canvas2.width = 256;
    canvas2.height = 256;
var ctx2 = canvas2.getContext('2d');


let TriaPoint = ( function(){
	
  function TriaPoint( x, y, color ){
  	this.position = new Vec2( x || 0, y || 0 );
    this.color = color || '#ff00ff';
  }
  
  return TriaPoint;

})();


let trianglePoints = [ 
	new TriaPoint( 0, 0, '#ff0000' ), 
	new TriaPoint( 0.5, 1, '#00ff00' ), 
	new TriaPoint( 1, 0, '#0000ff' )
];


let trianglePoints2 = [ 
	new TriaPoint( 0.1, 0.2, '#00ff00' ), 
	new TriaPoint( 0.13, 0.8, '#ff0000' ), 
	new TriaPoint( 0.8, 0.6, '#0000ff' )
];


document.body.appendChild( canvas1 );
document.body.appendChild( canvas2 );

function getPath2D( ctx, pointsArray ){

  var nextPath = new Path2D();
  
  nextPath.moveTo( pointsArray[0].x * ctx.canvas.width, pointsArray[0].y * ctx.canvas.height );
  nextPath.lineTo( pointsArray[1].x * ctx.canvas.width, pointsArray[1].y * ctx.canvas.height );
  nextPath.lineTo( pointsArray[2].x * ctx.canvas.width, pointsArray[2].y * ctx.canvas.height );
  nextPath.closePath();
 
 	return nextPath;
}


function getCenterOfPoints( pointsArray ){
    return new Vec2( 
    	(pointsArray[0].x + pointsArray[1].x + pointsArray[2].x) / 3,
    	(pointsArray[0].y + pointsArray[1].y + pointsArray[2].y) / 3
    );
}

function redrawImage(){
		canvas1.width  = img.width;
		canvas1.height = img.height;
    ctx1.drawImage( img, 0, 0, img.width, img.height );
}

function drawCircle( ctx, point, radius, color ){
  ctx.beginPath();
 ...