123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- ---
- 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>
|