diff options
Diffstat (limited to 'what.html')
| -rw-r--r-- | what.html | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/what.html b/what.html new file mode 100644 index 0000000..29e4f7e --- /dev/null +++ b/what.html @@ -0,0 +1,86 @@ +<!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>
\ No newline at end of file |