thallada.github.io/magic/index.html

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