kirkleon
/
pokemon-color-search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
							<!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="database.js"></script>
    <script src="nearest.js"></script>
    <script lang="javascript">window.onload = () => { onUpdate(); }</script>
</head>

<body>
    <noscript>Requires javascript</noscript>
    <div class="container">
        <div id="left-panel" class="padded panel">
            <form class="panel config" onsubmit="onUpdate(event)">
                <div class="container control">
                    <img src="https://img.pokemondb.net/sprites/sword-shield/icon/bulbasaur.png" />
                    <button class="padded" type="button" onclick="onRandomColor()">Random color</button>
                    <input size="7" maxlength="7" id="color-input" oninput="onUpdate()"
                        value="#ffffff" />
                </div>

                <div class="container control">
                    <label for="include-x">Include X:</label>
                    <input type="checkbox" checked oninput="onUpdate()" id="include-x">
                </div>

                <div class="container control">
                    <label for="norm-q-y">Normalize q and Y:</label>
                    <input type="checkbox" oninput="onUpdate()" id="norm-q-y">
                </div>

                <div class="container control">
                    <label for="close-coeff">Closeness coefficient: <span id="close-coeff-display">2</span></label>
                    <input type="range" min="0" max="10" value="2" step="0.1" oninput="onUpdate()" id="close-coeff">
                </div>

                <div class="container control">
                    <label for="num-poke" style="min-width: 200px;">
                        Search limit: <span id="num-poke-display">10</span>
                    </label>
                    <input type="range" min="1" max="100" value="10" oninput="onUpdate()" id="num-poke">
                </div>
            </form>

            <div class="container center-aligned">
                <div>
                    <math xmlns="http://www.w3.org/1998/Math/MathML">
                        <semantics>
                            <mrow>
                                <mi>X</mi>
                                <mrow>
                                    <mo>(</mo>
                                    <mi>P</mi>
                                    <mo>)</mo>
                                </mrow>
                                <mo>=</mo>
                                <mfrac>
                                    <mn>1</mn>
                                    <mrow>
                                        <mo>|</mo>
                                        <mi>P</mi>
                                        <mo>|</mo>
                                    </mrow>
                                </mfrac>
                                <munder>
                                    <mo>∑</mo>
                                    <mrow>
                                        <mi>p</mi>
                                        <mo>∊</mo>
                                        <mi>P</mi>
                                    </mrow>
                                </munder>
                                <msup>
                                    <mrow>
                                        <mo>|</mo>
                                        <mrow>
                                            <mo>|</mo>
                                            <mover>
                                                <mi>p</mi>
                                                <mo stretchy="false">⇀</mo>
                                            </mover>
                                            <mo>|</mo>
                                        </mrow>
                                        <mo>|</mo>
                                    </mrow>
                                    <mn>2</mn>
                                </msup>
                            </mrow>
                            <annotation encoding="TeX">X\\left(P\\right) = \\frac{1}{\\left|P\\right|}\\sum_{p\\in
                                P}{\\left|\\left|\\vec{p}\\right|\\right|^2}</annotation>
                        </semantics>
                    </math>
                </div>
                <div>
                    <math xmlns="http://www.w3.org/1998/Math/MathML">
                        <semantics>
                            <mrow>
                                <mover>
                                    <mi>Y</mi>
                                    <mo stretchy="false">⇀</mo>
                                </mover>
                                <mrow>
                                    <mo>(</mo>
                                    <mi>P</mi>
                                    <mo>)</mo>
                                </mrow>
                                <mo>=</mo>
                                <mfrac>
                                    <mn>1</mn>
                                    <mrow>
                                        <mo>|</mo>
                                        <mi>P</mi>
                                        <mo>|</mo>
                                    </mrow>
                                </mfrac>
                                <munder>
                                    <mo>∑</mo>
                                    <mrow>
                                        <mi>p</mi>
                                        <mo>∊</mo>
                                        <mi>P</mi>
                                    </mrow>
                                </munder>
                                <mover>
                                    <mi>p</mi>
                                    <mo stretchy="false">⇀</mo>
                                </mover>
                            </mrow>
                            <annotation encoding="TeX">Y\\left(P\\right) = \\frac{1}{\\left|P\\right|}\\sum_{p\\in
                                P}{\\vec{p}}</annotation>
                        </semantics>
                    </math>
                </div>
            </div>

            <div class="container center-aligned">
                Minimizing: <span id="obj-fn">X(P) - 2q&sdot;Y(P)</span>
            </div>

            <div class="panel bypkmn">
                <form class="container control" onsubmit="onUpdate(event)">
                    <label for="pokemon-name">Search By Pokemon</label>
                    <input id="pokemon-name" size="15" oninput="onUpdate()">
                </form>
                <ul id="search-list" class="pkmn-list"></ul>
            </div>
        </div>
        <div class="padded panel">
            <div class="title">CIECAM02 Uniform Color Space</div>
            <ul id="best-list-jab" class="pkmn-list"></ul>
        </div>
        <div class="padded panel" style="flex: 1">
            <div class="title">sRGB Color Space</div>
            <ul id="best-list-rgb" class="pkmn-list"></ul>
        </div>
    </div>
</body>

</html>