sabha/index.html

## index.html
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="800" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function Line(x1,y1,x2,y2,alpha=1){
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  ctx.lineTo(x2,y2);
  ctx.strokeStyle = `rgba(0,0,0,${alpha})`;
  ctx.stroke();
  ctx.closePath();
}

function circle(x,y, r=70){
 ctx.beginPath();
 ctx.arc(x, y, r, 0, 2 * Math.PI);
 ctx.stroke();
}

var r = 100;
var counter = 0;
var angle = 0;
var offX1 = 100;
var offY1 = 150;
var offX2 = 400;
var offY2 = 400;

var intersections = [];

function line_intersect(x1, y1, x2, y2, x3, y3, x4, y4)
{
    var ua, ub, denom = (y4 - y3)*(x2 - x1) - (x4 - x3)*(y2 - y1);
    if (denom == 0) {
        return null;
    }
    ua = ((x4 - x3)*(y1 - y3) - (y4 - y3)*(x1 - x3))/denom;
    ub = ((x2 - x1)*(y1 - y3) - (y2 - y1)*(x1 - x3))/denom;
    return {
        x: x1 + ua * (x2 - x1),
        y: y1 + ub * (y2 - y1),
        seg1: ua >= 0 && ua <= 1,
        seg2: ub >= 0 && ub <= 1
    };
}
function normalize(min, max) {
    var delta = max - min;
    return function (val) {
        return (val - min) / delta;
    };
}

var draw = setInterval(function(){
 counter++;
 //ctx.fillRect(0, 0, 500, 500);
 ctx.clearRect(0,0,800,500);
 angle+=.8;
 x1 = offX1+(r*Math.cos(angle*Math.PI/180));
 y1 = offY1+(r*Math.sin(angle*Math.PI/180));
 Line(offX1,offY1,x1,y1);
 x2 = x1+700;
 y2 = y1;
 Line(x1,y1,x2,y2);
 circle(offX1,offY1, r);
 angle1 = angle;
 angle1 = angle*.49;
 x3 = offX2+(r*Math.cos(angle1*Math.PI/180));
 y3 = offY2+(r*Math.sin(angle1*Math.PI/180));
 Line(offX2,offY2,x3,y3);
 circle(offX2,offY2, r);
 x4 = x3;
 y4 = y3-700;
 Line(x3,y3,x4,y4);


 //console.log(counter%3)
 if(counter%5 === 0){
 var intersection = line_intersect(x1, y1, x2, y2, x3, y3, x4, y4);
 intersections.push({x: intersection.x, y:intersection.y});
 }

 intersections.forEach((p, i) => {
	if(i>0 && i < intersections.length-1) {
     //console.log(i/intersections.length)
     Line(p.x,p.y,intersections[i+1].x,intersections[i+1].y, 1.2-(i/intersections.length));

    }
 });

 if(intersections.length > 2) {
 var length = intersections.length;


 var a = intersections[0].x - intersections[length-1].x;
 var b = intersections[0].y - intersections[length-1].y;

 var c = Math.sqrt( a*a + b*b );
 //console.log(c);
 if(c < 1) {
   console.log('STOP');
   //clearInterval(draw);
  }
 }

}, 1);


</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>

	<canvas id="myCanvas" width="800" height="500" style="border:1px solid #d3d3d3;">
	Your browser does not support the HTML5 canvas tag.</canvas>

	<script>
	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");

	function Line(x1,y1,x2,y2,alpha=1){
	ctx.beginPath();
	ctx.moveTo(x1,y1);
	ctx.lineTo(x2,y2);
	ctx.strokeStyle = `rgba(0,0,0,${alpha})`;
	ctx.stroke();
	ctx.closePath();
	}

	function circle(x,y, r=70){
	ctx.beginPath();
	ctx.arc(x, y, r, 0, 2 * Math.PI);
	ctx.stroke();
	}

	var r = 100;
	var counter = 0;
	var angle = 0;
	var offX1 = 100;
	var offY1 = 150;
	var offX2 = 400;
	var offY2 = 400;

	var intersections = [];

	function line_intersect(x1, y1, x2, y2, x3, y3, x4, y4)
	{
	var ua, ub, denom = (y4 - y3)(x2 - x1) - (x4 - x3)(y2 - y1);
	if (denom == 0) {
	return null;
	}
	ua = ((x4 - x3)(y1 - y3) - (y4 - y3)(x1 - x3))/denom;
	ub = ((x2 - x1)(y1 - y3) - (y2 - y1)(x1 - x3))/denom;
	return {
	x: x1 + ua * (x2 - x1),
	y: y1 + ub * (y2 - y1),
	seg1: ua >= 0 && ua <= 1,
	seg2: ub >= 0 && ub <= 1
	};
	}
	function normalize(min, max) {
	var delta = max - min;
	return function (val) {
	return (val - min) / delta;
	};
	}

	var draw = setInterval(function(){
	counter++;
	//ctx.fillRect(0, 0, 500, 500);
	ctx.clearRect(0,0,800,500);
	angle+=.8;
	x1 = offX1+(rMath.cos(angleMath.PI/180));
	y1 = offY1+(rMath.sin(angleMath.PI/180));
	Line(offX1,offY1,x1,y1);
	x2 = x1+700;
	y2 = y1;
	Line(x1,y1,x2,y2);
	circle(offX1,offY1, r);
	angle1 = angle;
	angle1 = angle*.49;
	x3 = offX2+(rMath.cos(angle1Math.PI/180));
	y3 = offY2+(rMath.sin(angle1Math.PI/180));
	Line(offX2,offY2,x3,y3);
	circle(offX2,offY2, r);
	x4 = x3;
	y4 = y3-700;
	Line(x3,y3,x4,y4);


	//console.log(counter%3)
	if(counter%5 === 0){
	var intersection = line_intersect(x1, y1, x2, y2, x3, y3, x4, y4);
	intersections.push({x: intersection.x, y:intersection.y});
	}

	intersections.forEach((p, i) => {
	if(i>0 && i < intersections.length-1) {
	//console.log(i/intersections.length)
	Line(p.x,p.y,intersections[i+1].x,intersections[i+1].y, 1.2-(i/intersections.length));

	}
	});

	if(intersections.length > 2) {
	var length = intersections.length;


	var a = intersections[0].x - intersections[length-1].x;
	var b = intersections[0].y - intersections[length-1].y;

	var c = Math.sqrt( aa + bb );
	//console.log(c);
	if(c < 1) {
	console.log('STOP');
	//clearInterval(draw);
	}
	}

	}, 1);



	</script>

	</body>
	</html>