kirkleon
/
pokemon-color-search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Pokemon By Color</title>
  <link rel="stylesheet" href="nearest.css">
  <script src="https://unpkg.com/d3-color@3.0.1/dist/d3-color.min.js"></script>
  <script src="https://unpkg.com/d3-cam02@0.1.5/build/d3-cam02.min.js"></script>
  <script src="https://unpkg.com/fuse.js@6.5.3/dist/fuse.min.js"></script>
  <script src="https://unpkg.com/texzilla@1.0.2/TeXZilla.js"></script>
  <script src="math.js"></script>
  <script src="database-v2.js"></script>
  <script src="metrics.js"></script>
  <script src="convert.js"></script>
  <script src="score.js"></script>
  <script src="listeners.js"></script>
  <script lang="javascript">
    const state = {
      target: null,
      number: 10,
      useCluster: false,
      clusterSettings: {
        sortMetric: "size",
        scaleOption: "none",
        sortOrder: "max",
      },
      space: "jab",
      sortMetric: "sigma",
      scaleOption: "inverse",
      sortOrder: "min",
    };
    window.onload = () => {
      document.getElementById("mu-def").innerHTML = TeXZilla.toMathMLString(String.raw`
          \vec{\mu}\left(P\right) = \frac{1}{\left|P\right|}\sum_{p\in P}{\vec{p}}
      `);
      document.getElementById("nu-def").innerHTML = TeXZilla.toMathMLString(String.raw`
          \vec{\nu}\left(P\right) = \frac{1}{\left|P\right|}\sum_{p\in P}{\hat{p}}
      `);
      onColorChanged(state, "#222222");
    }
  </script>
</head>

<body>
  <noscript>Requires javascript</noscript>
  <div style="display: inline-block;">
    <div class="control-grid">
      <img style="grid-area: bulb; justify-self: center;" src="https://img.pokemondb.net/sprites/sword-shield/icon/bulbasaur.png" />
      <button style="grid-area: rand;" type="button" onclick="onRandomColor(state)">Random Color</button>
      <input style="grid-area: inpt;" autocomplete="off" maxlength="7" id="color-input" value="#222222" oninput="onColorChanged(state, event.target.value)" />
      <div style="grid-area: qvec" id="qvec"></div>
      <div class="toggle-box" style="grid-area: cspc;">
        <input autocomplete="off" type="checkbox" class="toggle-button" id="space-toggle" role="button" onchange="state.space = event.target.checked ? 'rgb' : 'jab'; onControlsChanged(state)">
        <label for="space-toggle" style="display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; padding-bottom: 0.5em;">
          Color space:&nbsp;
          <span class="toggle-off">CIECAM02-UCS (Jab)</span>
          <span class="toggle-on">sRGB</span>
        </label>
      </div>
      <div class="toggle-box" style="grid-area: sort">
        <input autocomplete="off" type="checkbox" class="toggle-button" id="sort-order" role="button" onchange="state.sortOrder = event.target.checked ? 'max' : 'min'; onControlsChanged(state)">
        <label for="sort-order">
          <span class="toggle-off">Minimize</span>
          <span class="toggle-on">Maximize</span>
        </label>
      </div>
      <select style="grid-area: metr" autocomplete="off" id="sort-metric" onchange="state.sortMetric = event.target.value; onControlsChanged(state)">
        <option value="sigma" selected>RMS Deviation (σ)</option>
        <option value="bigTheta">Mean of Angular Difference (Θ)</option>
        <option value="theta">Angular Difference of Mean (θ)</option>
        <option value="phi">Hue Difference of Mean (ϕ)</option>
        <option value="delta">Euclidean Distance to Mean (δ)</option>
        <option value="ch">Chebyshev Distance to Mean (Ч)</option>
        <option value="inertia">Inertia (I)</option>
        <option value="size">Size (N)</option>
      </select>
      <div style="grid-area: disp; padding-bottom: 0.5em; justify-self: center;" id="metric-display"></div>
      <div style="grid-area: munu; padding-top: 0.5em; justify-self: center; display: flex; flex-flow: row nowrap; justify-content: space-between; width: 90%;">
        <div id="mu-def"></div>
        <div id="nu-def"></div>
      </div>
    </div>
    <div class="toggle-box cluster-grid">
      <input autocomplete="off" type="checkbox" class="toggle-button" id="cluster-toggle" role="button" onchange="state.useCluster = event.target.checked; onControlsChanged(state)">
      <label for="cluster-toggle" style="grid-area: albl; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; padding-bottom: 0.5em;">
        Across&nbsp;
        <span class="toggle-off">whole image</span>
        <span class="toggle-on">best cluster by...</span>
      </label>
      <div style="grid-area: sort; justify-self: end;" class="toggle-on toggle-box">
        <input autocomplete="off" checked type="checkbox" class="toggle-button" id="cluster-sort-order" role="button" onchange="state.clusterSettings.sortOrder = event.target.checked ? 'max' : 'min'; onControlsChanged(state)">
        <label for="cluster-sort-order">
          <span class="toggle-off">Minimizing</span>
          <span class="toggle-on">Maximizing</span>
        </label>
      </div>
      <select style="grid-area: metr" autocomplete="off" id="cluster-sort-metric" class="toggle-on" onchange="state.clusterSettings.sortMetric = event.target.value; onControlsChanged(state)">
        <option value="sigma">RMS Deviation (σ)</option>
        <option value="bigTheta">Mean of Angular Difference (Θ)</option>
        <option value="theta">Angular Difference of Mean (θ)</option>
        <option value="phi">Hue Difference of Mean (ϕ)</option>
        <option value="delta">Euclidean Distance to Mean (δ)</option>
        <option value="ch">Chebyshev Distance to Mean (Ч)</option>
        <option value="inertia">Inertia (I)</option>
        <option value="size" selected>Size (N)</option>
      </select>
      <span style="grid-area: blbl; justify-self: end;" class="toggle-on">Rescaled by</span>
      <select style="grid-area: clus" autocomplete="off" id="cluster-scale-option" class="toggle-on" onchange="state.clusterSettings.scaleOption = event.target.value; onControlsChanged(state)">
        <option value="none" selected>None</option>
        <option value="direct">Cluster size</option>
        <option value="inverse">Inverse cluster size</option>
      </select>
      <span style="grid-area: slbl" class="toggle-on">And scale result by</span>
      <select style="grid-area: scal" autocomplete="off" id="scale-option" class="toggle-on" onchange="state.scaleOption = event.target.value; onControlsChanged(state)">
        <option value="none">None</option>
        <option value="direct">Cluster size</option>
        <option value="inverse" selected>Inverse cluster size</option>
      </select>
      <div style="grid-area: disp; padding-top: 0.5em; padding-bottom: 0.5em; padding-top: 0.5em; padding-bottom: 0.5em; justify-self: center;" id="cluster-metric-display" class="toggle-on"></div>
    </div>
    <div style="width: 100%; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center;">
      <span style="align-self: flex-start;">Final metric:</span>
      <div id="final-metric-display" style="padding-top: 0.5em; padding-bottom: 0.5em;"></div>
    </div>
  </div>

  <!-- <div class="container start-justified">
    <form id="controls" onsubmit="event.preventDefault()">
      <input style="grid-area: inpt;" maxlength="7" id="color-input" oninput="onColorChanged()" />

      <label for="num-poke" style="grid-area: liml" class="center-text">
        Search limit: <span id="num-poke-display">10</span>
      </label>
      <input
        id="num-poke" style="grid-area: limt;"
        type="range" min="1" max="100" value="10"
        oninput="onLimitChanged(true)" onchange="onLimitChanged()"
      >
      <div style="grid-area: qvec; justify-self: start;">
        <div id="q-vec-jab"></div>
        <div id="q-vec-rgb"></div>
      </div>
      <span id="obj-fn" style="grid-area: objf;"></span>
      <div class="panel" style="grid-area: metr; padding-top: 4px;">
        <label for="metric" style="text-align: center;">
          Scoring Metric:
        </label>
      </div>
      <div class="panel" style="grid-area: clst;">
        <label for="image-mean" class="center-text">
          Cluster:
        </label>
        <select type="checkbox" onchange="onClusterChoiceChanged()" id="image-summary">
          <option selected>All Pixels</option>
          <option>Biggest (M)</option>
          <option>Smallest (m)</option>
          <option>Best (α)</option>
          <option>Worst (ω)</option>
        </select>
      </div>
      <div id="cluster-mean-warning" class="center-text hide" style="grid-area: warn;">
        Warning: Inertia term ignores clusters - consider another metric
      </div>
      <div style="grid-area: scal; align-self: end; padding-bottom: 2px;" class="hide">
        <label for="scale-by-cluster-size">
          Scale measure by cluster size:
        </label>
        <input type="checkbox" checked oninput="onScaleByClusterChanged()" id="scale-by-cluster-size">
      </div>
      <input type="checkbox" id="reveal-definitions" role="button">
      <label
        id="reveal-def-label" for="reveal-definitions"
        style="grid-area: togg;"
      >
        <div id="reveal-def-show">Show Definitions ►</div>
        <div id="reveal-def-hide">Hide Definitions ▼</div>
      </label>
      <div style="grid-area: defs; align-self: start; padding-left: 1em;">
        <div class="definitions" id="main-definition"></div>
      </div>
      <div style="grid-area: clsd; align-self: start;">
        <div class="definitions" id="cluster-definition"></div>
      </div>

      <div class="hideable_control hideable_control--hidden" style="grid-area: iner;">
        <input type="checkbox" checked oninput="onCustomControlsChanged()" id="include-x">
        <label for="include-x">Include Inertia</label>
      </div>

      <div class="hideable_control hideable_control--hidden" style="grid-area: norm;">
        <input type="checkbox" oninput="onCustomControlsChanged()" id="norm-q-y">
        <label for="norm-q-y">Normalize q and μ</label>
      </div>

      <div
        class="hideable_control hideable_control--hidden"
        style="grid-area: coef; flex-direction: column;"
      >
        <label for="close-coeff" class="center-text">
          Alignment: <span id="close-coeff-display">2</span>
        </label>
        <input
          type="range" min="0" max="10" value="2" step="0.1"
          oninput="onCustomControlsChanged(true)"
          onchange="onCustomControlsChanged()"
          id="close-coeff"
        >
      </div>

      <div style="grid-area: btns; display: inline-flex; flex-flow: row nowrap; justify-content: space-between;">
        <button class="padded" type="button" onclick="onRandomPokemon()">
          Random
        </button>
        <button id="search-space-button" type="button" onclick="onSearchSpaceChanged()">
          <span id="search-space-display">RGB</span>
        </button>
      </div>

      <input type="checkbox" checked class="show-list" role="button" id="search-list-toggle">
      <label style="grid-area: srch;" for="search-list-toggle" class="title">
        <div class="show-list-lbl-show">Search By Pokemon ►</div>
        <div class="show-list-lbl-hide">Search By Pokemon ▼</div>
      </label>
      <input style="grid-area: name;" id="pokemon-name" size="15" oninput="onSearchChanged()">
      <ul id="search-list" style="grid-area: rslt;" class="pkmn-list"></ul>
    </form>

    <div class="panel rpanel">
      <div>
        <input type="checkbox" checked class="show-list" role="button" id="jab-list-toggle">
        <label for="jab-list-toggle" class="title">
          <div class="show-list-lbl-show">CIECAM02 Uniform Color Space (Jab) ►</div>
          <div class="show-list-lbl-hide">CIECAM02 Uniform Color Space (Jab) ▼</div>
        </label>
        <ul id="best-list-jab" class="pkmn-list"></ul>
      </div>
      <div>
        <input type="checkbox" class="show-list" role="button" id="rgb-list-toggle">
        <label for="rgb-list-toggle" class="title">
          <div class="show-list-lbl-show">sRGB Color Space ►</div>
          <div class="show-list-lbl-hide">sRGB Color Space ▼</div>
        </label>
        <ul id="best-list-rgb" class="pkmn-list"></ul>
      </div>
    </div>
  </div> -->
</body>

</html>