--- layout: home title: Tyler Hallada --- <script> window.onload = function () { window.magicObj = new Magic({{site.data.magic | jsonify}}); magicObj.draw(); document.getElementById("play-pause").addEventListener("click", togglePlay); document.getElementById("hide-show-mobile").addEventListener("click", togglePanel); document.getElementById("hide-show-desktop").addEventListener("click", togglePanel); document.getElementById("clear").addEventListener("click", clear); } function updateMagic(key, value) { magicObj[key] = value; } function findParentWithIds(el, ids) { while (ids.indexOf(el.getAttribute('id')) === -1) { el = el.parentElement; } return el; } function togglePanel(event) { var options = document.getElementById("options"); var button = findParentWithIds(event.target, ["hide-show-desktop", "hide-show-mobile"]); if (options.offsetParent === null) { // hidden options.style.display = "block"; button.innerHTML = "<i class=\"icon ion-chevron-down\"></i>"; } else { // shown options.style.display = "none"; button.innerHTML = "<i class=\"icon ion-chevron-up\"></i>"; } } function togglePlay(event) { var button = findParentWithIds(event.target, ["play-pause"]); if (magicObj.paused) { magicObj.paused = false; button.innerHTML = "<i class=\"icon ion-pause\"></i>"; } else { magicObj.paused = true; button.innerHTML = "<i class=\"icon ion-play\"></i>"; } } function clear(event) { magicObj.clear(); } </script> <div class="options-panel"> <div class="controls-tab"> <div class="controls"> <button id="play-pause"><i class="icon ion-pause"></i></button> <button id="clear"><i class="icon ion-refresh"></i></button> <button id="hide-show-mobile" class="hide-desktop hide-desktop-inline-block"><i class="icon ion-chevron-up"></i></button> <button id="hide-show-desktop" class="hide-mobile hide-mobile-inline-block"><i class="icon ion-chevron-down"></i></button> </div> </div> <div id="options" class="container-full hide-mobile hide-mobile-block"> <div class="row clearfix"> <div class="column fourth"> <form oninput="output.value=speed.value;updateMagic('step', parseFloat(speed.value))"> <label for="speed">Speed</label> <input type="range" min=0.01 max=2 value={{site.data.magic.step}} id="speed" step=0.01> <output name="output" for="speed">{{site.data.magic.step}}</output> </form> </div> <div class="column fourth"> <form oninput="output.value=minDuration.value;updateMagic('minDuration', parseInt(minDuration.value))"> <label for="minDuration">Min Spell Duration</label> <input type="range" min=1 max=1000 value={{site.data.magic.minDuration}} id="minDuration" step=1> <output name="output" for="minDuration">{{site.data.magic.minDuration}}</output> </form> </div> <div class="column fourth"> <form oninput="output.value=maxDuration.value;updateMagic('maxDuration', parseInt(maxDuration.value))"> <label for="maxDuration">Max Spell Duration</label> <input type="range" min=1 max=1000 value={{site.data.magic.maxDuration}} id="maxDuration" step=1> <output name="output" for="maxDuration">{{site.data.magic.maxDuration}}</output> </form> </div> <div class="column fourth"> <form oninput="output.value=splineLength.value;updateMagic('splineLength', parseInt(splineLength.value))"> <label for="splineLength">Spline Length</label> <input type="range" min=1 max=300 value={{site.data.magic.splineLength}} id="splineLength" step=1> <output name="output" for="splineLength">{{site.data.magic.splineLength}}</output> </form> </div> </div> <div class="row clearfix"> <div class="column fourth"> <form oninput="output.value=minAngleChange.value;updateMagic('minAngleChange', parseInt(minAngleChange.value))"> <label for="minAngleChange">Min Angle</label> <input type="range" min=0 max=360 value={{site.data.magic.minAngleChange}} id="minAngleChange" step=1> <output name="output" for="minAngleChange">{{site.data.magic.minAngleChange}}</output> </form> </div> <div class="column fourth"> <form oninput="output.value=maxAngleChange.value;updateMagic('maxAngleChange', parseInt(maxAngleChange.value))"> <label for="maxAngleChange">Max Angle</label> <input type="range" min=0 max=360 value={{site.data.magic.maxAngleChange}} id="maxAngleChange" step=1> <output name="output" for="maxAngleChange">{{site.data.magic.maxAngleChange}}</output> </form> </div> <div class="column fourth"> <form oninput="output.value=prune_to.value;updateMagic('prune_to', parseInt(prune_to.value))"> <label for="prune_to">Branches</label> <input type="range" min=0 max=300 value={{site.data.magic.prune_to}} id="prune_to" step=1> <output name="output" for="prune_To">{{site.data.magic.prune_to}}</output> </form> </div> <div class="column fourth"> <form onchange="output.value=randomColored.checked;updateMagic('randomColored', randomColored.checked)"> <label for="randomColored">Randomly Colored</label> <input type="checkbox" {% if site.data.magic.randomColored %}checked{% endif %} id="randomColored"> <output name="output" for="randomColored">{{site.data.magic.randomColored}}</output> </form> </div> </div>