d3x0r/pointmass.html

## pointmass.html
<HTML>
<BODY>
<CANVAS width="500" height="500" ID="drawMe" ></CANVAS>


<SCRIPT>

var drawTo = document.getElementById( "drawMe" );
var ctx = drawTo.getContext( "2d" );
// something

var points  = [];
const POINTS = 800;

ctx.strokeStyle="red";

ctx.beginPath();

for( n = 0; n < POINTS; n++ )
{
	points.push( {x:Math.sin( 2*3.14159 / POINTS * n ), y:Math.cos( 2*3.14159 / POINTS * n ) } );


	if( n === 0 ) ctx.moveTo( points[n].x * 250+250, points[n].y * 250+250 );
	else ctx.lineTo( points[n].x * 250+250, points[n].y * 250+250 );
}
ctx.closePath();
ctx.stroke();
const SCAN_POINTS = 50;
var scanPoints = [];

for( n = 0; n < SCAN_POINTS; n++ ) {
	for( m = 0; m < SCAN_POINTS;m++ ) {
		var N = ( 2.0 / SCAN_POINTS * n ) - 1.0;
		var M = ( 2.0 / SCAN_POINTS * m ) - 1.0;
		if( ( Math.sqrt(N*N+M*M) > 1.01 )
		  || ( Math.sqrt(N*N+M*M) < 0.99 ) )
		{
			scanPoints.push( { x: N, y:M} );
		}
	}
}

scanPoints.forEach( testPoint=>{

//var testPoint = { x:0.8, y:0 };

var delF= { x : 0, y : 0 };
//ctx.strokeStyle="#00"+((((testPoint.x+1)/2)*255)|0).toString(16) + ((((testPoint.y+1)/2)*255)|0).toString(16) ;

// Fill with gradient
//ctx.strokeStyle=gradient;
points.forEach( p=>{

	var del = { x: testPoint.x - p.x, y: testPoint.y - p.y };
        var r = Math.sqrt( (del.x*del.x)+(del.y*del.y) )
        var gr = -0.01 / (r*r);
	del.x = del.x / r; del.y = del.y / r;  // normalized direction vector.
        delF.x += gr * del.x;
        delF.y += gr * del.y;

});

var a,b,c,d;
	 a=testPoint.x*250+250; b=testPoint.y*250+250;
	 c=(testPoint.x*250+250) + (delF.x*1+1);
	 d=(testPoint.y*250+250) + (delF.y*1+1);
ctx.beginPath();

var gradient=ctx.createLinearGradient(a,b,c,d);
gradient.addColorStop(0,"blue");
gradient.addColorStop(1.0,"red");
ctx.strokeStyle=gradient
	ctx.moveTo( a, b );
	ctx.lineTo( c, d );

	//ctx.lineTo( 500, 250 );
ctx.stroke();

//console.log( testPoint, delF );
} );

</SCRIPT>
	<HTML>
	<BODY>
	<CANVAS width="500" height="500" ID="drawMe" ></CANVAS>


	<SCRIPT>

	var drawTo = document.getElementById( "drawMe" );
	var ctx = drawTo.getContext( "2d" );
	// something

	var points = [];
	const POINTS = 800;

	ctx.strokeStyle="red";

	ctx.beginPath();

	for( n = 0; n < POINTS; n++ )
	{
	points.push( {x:Math.sin( 23.14159 / POINTS n ), y:Math.cos( 23.14159 / POINTS n ) } );


	if( n === 0 ) ctx.moveTo( points[n].x * 250+250, points[n].y * 250+250 );
	else ctx.lineTo( points[n].x * 250+250, points[n].y * 250+250 );
	}
	ctx.closePath();
	ctx.stroke();
	const SCAN_POINTS = 50;
	var scanPoints = [];

	for( n = 0; n < SCAN_POINTS; n++ ) {
	for( m = 0; m < SCAN_POINTS;m++ ) {
	var N = ( 2.0 / SCAN_POINTS * n ) - 1.0;
	var M = ( 2.0 / SCAN_POINTS * m ) - 1.0;
	if( ( Math.sqrt(NN+MM) > 1.01 )
	\|\| ( Math.sqrt(NN+MM) < 0.99 ) )
	{
	scanPoints.push( { x: N, y:M} );
	}
	}
	}

	scanPoints.forEach( testPoint=>{

	//var testPoint = { x:0.8, y:0 };

	var delF= { x : 0, y : 0 };
	//ctx.strokeStyle="#00"+((((testPoint.x+1)/2)255)\|0).toString(16) + ((((testPoint.y+1)/2)255)\|0).toString(16) ;

	// Fill with gradient
	//ctx.strokeStyle=gradient;
	points.forEach( p=>{

	var del = { x: testPoint.x - p.x, y: testPoint.y - p.y };
	var r = Math.sqrt( (del.xdel.x)+(del.ydel.y) )
	var gr = -0.01 / (r*r);
	del.x = del.x / r; del.y = del.y / r; // normalized direction vector.
	delF.x += gr * del.x;
	delF.y += gr * del.y;

	});

	var a,b,c,d;
	a=testPoint.x250+250; b=testPoint.y250+250;
	c=(testPoint.x250+250) + (delF.x1+1);
	d=(testPoint.y250+250) + (delF.y1+1);
	ctx.beginPath();

	var gradient=ctx.createLinearGradient(a,b,c,d);
	gradient.addColorStop(0,"blue");
	gradient.addColorStop(1.0,"red");
	ctx.strokeStyle=gradient
	ctx.moveTo( a, b );
	ctx.lineTo( c, d );

	//ctx.lineTo( 500, 250 );
	ctx.stroke();

	//console.log( testPoint, delF );
	} );

	</SCRIPT>