-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 3.69 KB
/
index.html
1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Proximity Graphs with Gravity</title><link rel="stylesheet" href="assets/styles/index.min.css"><script defer="defer" src="assets/scripts/index.min.js"></script></head><body><canvas id="canvas"></canvas><script>let noOfNodes=100;const canvas=document.getElementById("canvas");let width,height;function resizeCanvas(){width=canvas.width=document.body.offsetWidth,height=canvas.height=document.body.offsetHeight}document.body.onresize=resizeCanvas,resizeCanvas();let lines=!0,gravity=!0;</script><section id="controls-panel" minimized="true"><script>setTimeout(()=>CONTROL_PANEL.show(),2e3);</script><div class="icons"><span class="minimize" title="Minimize" onclick="CONTROL_PANEL.hide()">🗕︎</span> <span class="maximize" title="Maximize" onclick="CONTROL_PANEL.show()">🗖︎</span></div><script>const CONTROL_PANEL={elem:document.getElementById("controls-panel"),isShow(){return"false"===this.elem.getAttribute("minimized")},isHidden(){return"true"===this.elem.getAttribute("minimized")},show(){this.elem.setAttribute("minimized","false")},hide(){this.elem.setAttribute("minimized","true")},toggle(){this.isShow()?this.hide():this.show()}};document.addEventListener("keydown",e=>{27===e.keyCode&&CONTROL_PANEL.toggle()});</script><div id="controls"><section id="nodes"><div class="container"><div class="btns-and-number-container"><div class="btns"><button class="btn-round" title="Add one">+</button> <button class="btn-round" title="Remove one">−</button></div><span id="no-of-nodes"></span></div><span>Nodes</span></div><script>const NO_OF_NODES_ELEM=document.getElementById("no-of-nodes");function updateNoOfNodes(){NO_OF_NODES_ELEM.innerText=noOfNodes}updateNoOfNodes();</script><div id="media-btns"><span title="Previous Frame" onclick="prevFrame()">⏮</span><div class="play-pause" id="play-pause" paused="false"><span id="play" title="Play" onclick="play()">⏵</span> <span id="pause" title="Pause" onclick="pause()">⏸</span></div><span title="Next Frame" onclick="nextFrame()">⏭</span></div><script>let paused=!1;const PLAY_PAUSE_ELEM=document.getElementById("play-pause");document.addEventListener("keydown",e=>{32===e.keyCode?togglePlayPause():37===e.keyCode?prevFrame():39===e.keyCode&&nextFrame()});</script><script>function togglePlayPause(){paused?play():pause()}function play(){paused&&(paused=!1,PLAY_PAUSE_ELEM.setAttribute("paused","false"),startAnimation())}function pause(){paused||(paused=!0,PLAY_PAUSE_ELEM.setAttribute("paused","true"),stopAnimation())}</script><script>function nextFrame(){pause(),playNextFrame()}function prevFrame(){pause(),playPrevFrame()}</script></section><section class="radio-btns" id="nodes-nature"><div><input type="radio" name="nodes-nature" id="transparent-nodes" checked="checked"> <label for="transparent-nodes">Transparent</label></div><div><input type="radio" name="nodes-nature" id="solid-nodes"> <label for="solid-nodes">Collide</label></div></section><section class="radio-btns" id="edge"><div><input type="radio" name="edge" id="edge-bounce" checked="checked"> <label for="edge-bounce">Bounce</label></div><div><input type="radio" name="edge" id="torus"> <label for="torus">Torus</label></div><div><input type="radio" name="edge" id="edge-none"> <label for="edge-none">None</label></div></section><div class="chk-boxs"><div><input type="checkbox" id="gravity" onchange="gravity=this.checked" checked="checked"> <label for="gravity">Gravity</label></div><div><input type="checkbox" id="lines" onchange="lines=this.checked" checked="checked"> <label for="lines">Connections</label></div></div></div></section></body></html>