Skip to content

Instantly share code, notes, and snippets.

@d3x0r

d3x0r/Area-Perimeter-Edge-Ratios.jpg

Last active May 2, 2020 00:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save d3x0r/b80dd787cdf1a5a07ddb039b6c323ea0 to your computer and use it in GitHub Desktop.
Save d3x0r/b80dd787cdf1a5a07ddb039b6c323ea0 to your computer and use it in GitHub Desktop.
Download ZIP
Compares triangle area vs perimeter
Raw
triangle-test-area-perim-max.html
<HTML>
<BODY>
<CANVAS WIDTH=500 height=500 ID="testSurface" style="width:100vh;height:100vh"></CANVAS>
</BODY>
<SCRIPT >
const canvas = document.getElementById( "testSurface" );
const ctx = canvas.getContext( '2d' );
// area of a triangle
// sqrt(A)/L is a value between 0-MagicScalar.
// 1/ 0.3102016197 = 3.22370979547
//
const MagicRange = Math.sqrt( Math.sqrt(3) / 18 );
const MagicScalar = 1 / Math.sqrt( Math.sqrt(3) / 18 );
function drawLines() {
function cross(o,a,b) {
o[0] = a[1]*b[2]-a[2]*b[1];
o[1] = a[2]*b[0]-a[0]*b[2];
o[2] = a[0]*b[1]-a[1]*b[0];
}
var o = [250, 250];
var px = 50;
var py = 50;
const p1 = [-0.43,-0.93];
const p2 = [0.13,0.79];
//const p1 = [-0.025,-0.025];
//const p2 = [0.025,0.025];
const del1 = [0,0,0];
const del2 = [0,0,0];
const del3 = [0,0,0];
const realp1 = [0,0];
const realp2 = [0,0];
var maxVal = 0;
var maxVala = 0;
var maxVala2 = 0;
var maxValx = 0;
var maxValy = 0;
var minVal = 100;
var tVal = 0;
var count = 0;
for( var y = -1.0; y < 1; y += 0.01 ) {
for( var x = -1.0; x < 1; x += 0.01 ) {
if( f(x)*f(x)+f(y)*f(y) > 9 ) continue;
count++;
function f(n) { return n * 2.5};
del1[0] = p1[0] - f(x);
del1[1] = p1[1] - f(y);
del2[0] = p2[0] - f(x);
del2[1] = p2[1] - f(y);
del3[0] = p1[0] - p2[0];
del3[1] = p1[1] - p2[1];
var c = [0,0,0];
cross( c, del1, del2 );
var a;
// this is the PROPER calculation.
a = Math.sqrt( c[0]*c[0]+c[1]*c[1]+c[2]*c[2] )/2;
// for THIS TEST... the inputs are all in a plane.
// so the result is just the absolute value (sqrt(c[2]*c[2]))/2
a = Math.abs(c[2])/2;
// scale to same space as length ... length of the unit -squared
a = Math.sqrt(a);
// var a = Math.sqrt( Math.abs(( (f(x)*(del1[1]-del2[1]) + del1[0]*(del2[1]-f(y)) + del2[0]*(f(y)-del1[1]) ) )))/2;
;
var l1 = Math.sqrt( del1[0]*del1[0]+del1[1]*del1[1] );
var l2 = Math.sqrt( del2[0]*del2[0]+del2[1]*del2[1] );
var l3 = Math.sqrt( del3[0]*del3[0]+del3[1]*del3[1] );
var l = l1+l2+l3;
var l4 = 1/Math.cbrt(l1*l2*l3);
if( a > maxVala2 )
maxVala2 = a;
if( a/l > maxVal ) {
maxVala = a;
maxVal = a/l;
maxValx = x;
maxValy = y;
}
tVal += a/l;
if( a/l < minVal ) {
minVal = a/l;
}
const nA = a / l * MagicScalar;
var b = a*255;
var r = Math.log( (1/Math.sqrt( ((nA)-1.0) * ( (nA)-1.0))) );
r = r*r*r * 140;
//console.log( "x,y", x, y, "r : ", r, a/l, 0.3101987828561266*2 - a/l );
ctx.fillStyle = `rgb(${r|0},${40*l},${b})`;
// ctx.fillStyle = `rgb(${(128+128*x)|0},${0},${128+128*y})`;
//console.log( "RED:", 1024*a/l -150);
ctx.fillRect( a*250, 100+ l*40, 1*2, 1*2 );
ctx.fillStyle = `rgb(${r|0},${(l3 > 52?255: l3*2 )},${(Math.log(a/l3)+7)*255})`;
if( ( Math.abs(f(x)-p1[0])<f(0.01) && Math.abs(f(y)-p1[1])<f(0.01) ) || ( Math.abs(f(x)-p2[0])<f(0.01) && Math.abs(f(y)-p2[1])<f(0.01) ) )
ctx.fillStyle = 'white';
//ctx.fillStyle = `rgb(${0},${20*l*l*l},${0})`;
ctx.fillRect( x*100+100, 100+ y*100, 1, 1 );
if( nA > 0.1 ) // < 0.8 ratio is 'elongated'; should be considered as a fold between and a vertical intersection plane for the point... the normal
// should be the difference in the sides, and the origin the average between the points.
if( nA < 0.9 )
ctx.fillStyle = `rgb(${0},${r|0},${nA*255 })`;
else
ctx.fillStyle = `rgb(${0},${r|0},${255})`;
else
ctx.fillStyle = `red`;
if( ( Math.abs(f(x)-p1[0])<f(0.01) && Math.abs(f(y)-p1[1])<f(0.01) ) || ( Math.abs(f(x)-p2[0])<f(0.01) && Math.abs(f(y)-p2[1])<f(0.01) ) )
ctx.fillStyle = 'white';
ctx.fillRect( x*100+300, 100+ y*100, 1, 1 );
const dl1l2 = (l1<l2?l1/l2:l2/l1);
const dl2l3 = (l2<l3?l2/l3:l3/l2);
const dl1l3 = (l1<l3?l1/l3:l3/l1);
ctx.fillStyle = `rgb(${ (l3/l)>(0.1)? ( (dl1l2) *255):128},${l1/l*300},${(l2/l)*300})`;
if( l < 0.9 )
ctx.fillStyle = 'gray';
else if( nA < 0.1 )
ctx.fillStyle = 'black';
else
if( (l1/l) < (l2/l) )
{
if( l1/l < l3/l )
{
ctx.fillStyle = 'red'; // l1 least, l2 or l3 are biggest
}
else // l3 smallest
ctx.fillStyle = 'blue'; // L3 is smallest also l1 < l2 L2 IS biggest L1 is mid
} else {
if( l2/l < l3/l ) { // l2 is smallest, L1 or L3 is biggest
ctx.fillStyle = 'green';
}
else // l3 smallest L1 is largest, L2 is medium.
ctx.fillStyle = 'blue';
}
//ctx.fillStyle = `rgb(${0},${20*l*l*l},${0})`;
if( ( Math.abs(f(x)-p1[0])<f(0.01) && Math.abs(f(y)-p1[1])<f(0.01) ) ){
realp1[0] = x;
realp1[1] = y;
ctx.fillStyle = 'white';
} else if( ( Math.abs(f(x)-p2[0])<f(0.01) && Math.abs(f(y)-p2[1])<f(0.01) ) ) {
realp2[0] = x;
realp2[1] = y;
ctx.fillStyle = 'white';
}
ctx.fillRect( x*100+300, 300+ y*100, 1, 1 );
}
}
console.log( "maxval : ", maxVal, maxVala, maxVala2, minVal, tVal/count );
ctx.strokeStyle = 'white';
ctx.beginPath();
ctx.moveTo( 100+realp1[0]*100, 100+realp1[1]*100 );
ctx.lineTo( 100+maxValx*100, 100+maxValy*100 );
ctx.lineTo( 100+realp2[0]*100, 100+realp2[1]*100 );
ctx.stroke();
}
drawLines();
</SCRIPT>
</HTML>
Raw
triangle-test-area-perim.html
<HTML>
<BODY>
<CANVAS WIDTH=500 height=500 ID="testSurface" style="width:100vh;height:100vh"></CANVAS>
</BODY>
<SCRIPT >
const canvas = document.getElementById( "testSurface" );
const ctx = canvas.getContext( '2d' );
// area of a triangle
function drawLines() {
var o = [250, 250];
var px = 50;
var py = 50;
//const p1 = [-0.1,-0.1];
//const p2 = [0.1,0.1];
const p1 = [-0.01,-0.01];
const p2 = [0.01,0.01];
const del1 = [0,0,0];
const del2 = [0,0,0];
const del3 = [0,0,0];
for( var y = -1.0; y < 1; y += 0.01 ) {
for( var x = -1.0; x < 1; x += 0.01 ) {
if( x*x+y*y > 1 ) continue;
del1[0] = p1[0] - x;
del1[1] = p1[1] - y;
del2[0] = p2[0] - x;
del2[1] = p2[1] - y;
del3[0] = del2[0] - del1[0];
del3[1] = del2[1] - del1[1];
// var c = cross( del1[0] * del2[1] - del1[1]*del2[0] );
var a = Math.sqrt( Math.abs(( x*(del1[1]-del2[1]) + del1[0]*(del2[1]-y) + del2[0]*(y-del1[1]) )/2) );
var l1 = Math.sqrt( del1[0]*del1[0]+del1[1]*del1[1] );
var l2 = Math.sqrt( del2[0]*del2[0]+del2[1]*del2[1] );
var l3 = Math.sqrt( del3[0]*del3[0]+del3[1]*del3[1] );
var l = l1+l2+l3;
ctx.fillStyle = `rgb(${(1024*(a/l))|0},${40*l},${2*512*a})`;
// ctx.fillStyle = `rgb(${(128+128*x)|0},${0},${128+128*y})`;
//console.log( "RED:", 1024*a/l -150);
ctx.fillRect( a*1200, 200+ l*50, 1*2, 1*2 );
ctx.fillStyle = `rgb(${(2*1024*(a/l)-100)|0},${40*l},${512*a})`;
ctx.fillStyle = `rgb(${(1.5*759*(a/l))|0},${0},${0})`;
if( ( Math.abs(x-p1[0])<0.01 && Math.abs(y-p1[1])<0.01 ) || ( Math.abs(x-p2[0])<0.01 && Math.abs(y-p2[1])<0.01 ) )
ctx.fillStyle = 'white';
//ctx.fillStyle = `rgb(${0},${20*l*l*l},${0})`;
ctx.fillRect( x*100+100, 100+ y*100, 1, 1 );
ctx.fillStyle = `rgb(${0},${0},${2*512*a})`;
if( ( Math.abs(x-p1[0])<0.01 && Math.abs(y-p1[1])<0.01 ) || ( Math.abs(x-p2[0])<0.01 && Math.abs(y-p2[1])<0.01 ) )
ctx.fillStyle = 'white';
ctx.fillRect( x*100+300, 100+ y*100, 1, 1 );
ctx.fillStyle = `rgb(${0},${40*l},${0})`;
//ctx.fillStyle = `rgb(${0},${20*l*l*l},${0})`;
if( ( Math.abs(x-p1[0])<0.01 && Math.abs(y-p1[1])<0.01 ) || ( Math.abs(x-p2[0])<0.01 && Math.abs(y-p2[1])<0.01 ) )
ctx.fillStyle = 'white';
ctx.fillRect( x*100+300, 300+ y*100, 1, 1 );
}
}
}
drawLines();
</SCRIPT>
</HTML>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment