aboutsummaryrefslogblamecommitdiffstats
path: root/what.html
blob: 93575a768825614bfdd1161322b620a37951baab (plain) (tree)


















































































                                                                                                                   
                                      

       
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script>
		let root = document.documentElement;
		var x,y = 0;
		var canvas,ctx;
		var offsetx,offsety;
		var connections = [];
		//{a: in ports, b: in ports, color: rbga()}

		var ports = [
			{type: "input"},
			{type: "input"},
			{type: "output"},
			{type: "output"}
		]

		window.addEventListener("load", e => {
			canvas = document.getElementById('canvas');
			ctx = canvas.getContext('2d');
			canvas.width = window.innerWidth
			canvas.height = window.innerHeight

		})

		function point(x, y) {
			ctx.fillRect(x,y, 1, 1);
		}

		function drawLines() {
			var startx = 200;
			var starty = 200;

			renderCurveBetweenPorts(startx, starty, dims.x, dims.y);
		}
		function renderCurveBetweenPorts(outx, outy, inx, iny) {
			var dist = (((outx - inx) ** 2) + ((outy - iny) ** 2)) ** 0.5;
			var heightOfCurve = Math.abs(iny - outy);
			var widthOfCurve = Math.abs(inx - outx);
			var halfWidth = (inx - outx)/2;

			var cpbasex = (Math.abs((widthOfCurve * 2) / dist * 10) + 60) * (heightOfCurve / 150)**0.8;

			var cp1x = outx + cpbasex;
			var cp2x = inx - cpbasex;
			
			ctx.clearRect(0,0,window.innerWidth,window.innerHeight);

			//point(cp1x, outy);
			//point(cp2x, iny);
		//point(inx - outx, outy);

			ctx.beginPath();
			ctx.moveTo(outx,outy);
			ctx.bezierCurveTo(cp1x, outy, cp2x, iny, inx, iny);
			ctx.moveTo(outx,outy);
			ctx.closePath();
			ctx.lineWidth = 3;
			ctx.stroke();
		}
	</script>
	<style>
		canvas {
			position:fixed;
			top:0;
			bottom:0;
			left:0;
			right:0;
			z-index: -20;
		}
		.move {
			position:fixed;
			height: 10px;
			width: 10px;
			background: red;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>{
</body>
</html>