ewized · October 28, 2019 22:50
diff --git a/dots.html b/dots.html
 <!DOCTYPE html>
 <html>
  <head>
    <style>
      .dot {
        position: absolute;
        height: 10px;
        width: 10px;
        display: block;
        background: #000;
        border-radius: 10px;
      }
      .line {
        position: absolute;
        height: 1px;
        background: #000;
        transform-origin: top left;
      }
      .other {
        background: #ace !important;
      }
      #dot-5 {
        background: #eca !important;
      }
      #root {
        height: 100%;
        width:  100%;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript">
      let root = document.getElementById("root");
      function dot(id) {
        let rand = () => Math.abs(Math.random() * 500);
        let x = rand();
        let y = rand();
        console.log(`x: ${x} y: ${y}`);
        return `<div id="dot-${id}" class="dot ${id == 5 || id == 6 ? "other":""}" style="top: ${y}px; left: ${x}px"></div>`;
      }

      function line(a, b) {
        let x = Number(a.style.left.replace("px", "")) + 5;
        let y = Number(a.style.top.replace("px", "")) + 5;
        let x2 = Number(b.style.left.replace("px", "")) + 5;
        let y2 = Number(b.style.top.replace("px", "")) + 5;
        let width = Math.sqrt(((x2 - x) ** 2) + ((y2 - y) ** 2));
        let theta = Math.atan( (y - y2) / (x - x2) ) ;
        if (x2 < x) {
          x = x2;
          y = y2;
        }
        return `<div class="line" style="top: ${y}px; left: ${x}px; width: ${width}px; transform: rotate(${theta}rad);"></div>`;
      }

      for (let i = 1 ; i <= 10 ; i++) {
        root.innerHTML += dot(i);
      }

      // let dotA = document.getElementById(`dot-5`);
      // let dotB = document.getElementById(`dot-6`);
      //
      // root.innerHTML += line(dotA, dotB);

      // // min span tree
      // let F = [];
      // let S = [ 'dot-1','dot-2','dot-3','dot-4','dot-5','dot-6','dot-7','dot-8','dot-9','dot-10' ];
      //
      // while (S.length > 0) {
      //   console.log("S: ", S);
      //   console.log("F: ", F);
      //
      //   let tmp = S.pop();
      //   let dot = document.getElementById(tmp);
      //   for (let f in F) {
      //     for (let ff in F[f]) {
      //       if (F[f][ff] == tmp) {
      //         continue;
      //       }
      //     }
      //   }
      //   // else push
      //   F.push(tmp);
      //   // combine
      // }
      for (let i = 1 ; i <= 5 ; i++) {
        let dotA = document.getElementById(`dot-${i}`);
        let dotB = document.getElementById(`dot-${11 - i}`);

        root.innerHTML += line(dotA, dotB);
      }

      // setInterval(() => {
      //   root.innerHTML = "";
      //
      //   for (let i = 1 ; i <= 10 ; i++) {
      //     root.innerHTML += dot(i);
      //   }
      //
      //   //console.log("as")
      //   for (let i = 1 ; i <= 5 ; i++) {
      //     let dotA = document.getElementById(`dot-${i}`);
      //     let dotB = document.getElementById(`dot-${11 - i}`);
      //
      //     let deg = Math.abs(Math.floor(Math.random() * 360) * ( Math.PI / 180));
      //
      //     dotA.style.left = (Number(dotA.style.left.replace("px", "")) * Math.sin(Math.floor(Math.random() * 360))) + "px";
      //     dotB.style.left = (Number(dotB.style.left.replace("px", "")) * Math.sin(Math.floor(Math.random() * 360))) + "px";
      //     dotA.style.top = (Number(dotA.style.top.replace("px", "")) * Math.cos(Math.floor(Math.random() * 360))) + "px";
      //     dotB.style.top = (Number(dotB.style.top.replace("px", "")) * Math.cos(Math.floor(Math.random() * 360))) + "px";
      //   }
      //
      //   for (let i = 1 ; i <= 5 ; i++) {
      //     let dotA = document.getElementById(`dot-${i}`);
      //     let dotB = document.getElementById(`dot-${11 - i}`);
      //
      //     root.innerHTML += line(dotA, dotB);
      //   }
      // }, 1000);

    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.dot {
	position: absolute;
	height: 10px;
	width: 10px;
	display: block;
	background: #000;
	border-radius: 10px;
	}
	.line {
	position: absolute;
	height: 1px;
	background: #000;
	transform-origin: top left;
	}
	.other {
	background: #ace !important;
	}
	#dot-5 {
	background: #eca !important;
	}
	#root {
	height: 100%;
	width: 100%;
	}
	</style>
	</head>
	<body>
	<div id="root"></div>
	<script type="text/javascript">
	let root = document.getElementById("root");
	function dot(id) {
	let rand = () => Math.abs(Math.random() * 500);
	let x = rand();
	let y = rand();
	console.log(`x: ${x} y: ${y}`);
	return `<div id="dot-${id}" class="dot ${id == 5 \|\| id == 6 ? "other":""}" style="top: ${y}px; left: ${x}px"></div>`;
	}

	function line(a, b) {
	let x = Number(a.style.left.replace("px", "")) + 5;
	let y = Number(a.style.top.replace("px", "")) + 5;
	let x2 = Number(b.style.left.replace("px", "")) + 5;
	let y2 = Number(b.style.top.replace("px", "")) + 5;
	let width = Math.sqrt(((x2 - x) 2) + ((y2 - y) 2));
	let theta = Math.atan( (y - y2) / (x - x2) ) ;
	if (x2 < x) {
	x = x2;
	y = y2;
	}
	return `<div class="line" style="top: ${y}px; left: ${x}px; width: ${width}px; transform: rotate(${theta}rad);"></div>`;
	}

	for (let i = 1 ; i <= 10 ; i++) {
	root.innerHTML += dot(i);
	}

	// let dotA = document.getElementById(`dot-5`);
	// let dotB = document.getElementById(`dot-6`);
	//
	// root.innerHTML += line(dotA, dotB);

	// // min span tree
	// let F = [];
	// let S = [ 'dot-1','dot-2','dot-3','dot-4','dot-5','dot-6','dot-7','dot-8','dot-9','dot-10' ];
	//
	// while (S.length > 0) {
	// console.log("S: ", S);
	// console.log("F: ", F);
	//
	// let tmp = S.pop();
	// let dot = document.getElementById(tmp);
	// for (let f in F) {
	// for (let ff in F[f]) {
	// if (F[f][ff] == tmp) {
	// continue;
	// }
	// }
	// }
	// // else push
	// F.push(tmp);
	// // combine
	// }
	for (let i = 1 ; i <= 5 ; i++) {
	let dotA = document.getElementById(`dot-${i}`);
	let dotB = document.getElementById(`dot-${11 - i}`);

	root.innerHTML += line(dotA, dotB);
	}

	// setInterval(() => {
	// root.innerHTML = "";
	//
	// for (let i = 1 ; i <= 10 ; i++) {
	// root.innerHTML += dot(i);
	// }
	//
	// //console.log("as")
	// for (let i = 1 ; i <= 5 ; i++) {
	// let dotA = document.getElementById(`dot-${i}`);
	// let dotB = document.getElementById(`dot-${11 - i}`);
	//
	// let deg = Math.abs(Math.floor(Math.random() * 360) * ( Math.PI / 180));
	//
	// dotA.style.left = (Number(dotA.style.left.replace("px", "")) * Math.sin(Math.floor(Math.random() * 360))) + "px";
	// dotB.style.left = (Number(dotB.style.left.replace("px", "")) * Math.sin(Math.floor(Math.random() * 360))) + "px";
	// dotA.style.top = (Number(dotA.style.top.replace("px", "")) * Math.cos(Math.floor(Math.random() * 360))) + "px";
	// dotB.style.top = (Number(dotB.style.top.replace("px", "")) * Math.cos(Math.floor(Math.random() * 360))) + "px";
	// }
	//
	// for (let i = 1 ; i <= 5 ; i++) {
	// let dotA = document.getElementById(`dot-${i}`);
	// let dotB = document.getElementById(`dot-${11 - i}`);
	//
	// root.innerHTML += line(dotA, dotB);
	// }
	// }, 1000);

	</script>
	</body>
	</html>