色選択できるようにしよう

まぁ、色を表示するだけなら簡単にできることがわかった（いろいろな色を表示しよう）のですが、表示するだけなら情報として不足しています。
そこで今回は、何らかのユーザーインターフェース（ユーザーの操作を介して）で全色を選択できるようにしましょう。いきなり一度に全ての色を表示するのは無駄なので、

大まかな色を表示する→ユーザーが選択する→細かい色を選択する

という流れにします。

参考にできるものはどんどん参考にします。
https://ironodata.info/
またグーグルで適当な色を検索してみてください。例えば「#00F6E9」とか。
こういう感じのユーザーインターフェースにしようかと思います。

これは簡単で、いろいろな色を表示しようで説明したソースコードを少し変えます。

<html>
 
<head>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <style type="text/css">
        table,
        td,
        tr {
            border:  none !important;
        }
 
        td {
            height: 2px;
            table-layout: fixed;
 
 
        }
        #table1 {
            table-layout: fixed;
            border-spacing:0;
            width:128;
        }
    </style>
 
</head>
 
<body>
    <table id="table1">
        <tr>
    </table>
    <script>let trn = 0;
        let rowCounter = 0;
 
        //青のループ
        for (bi = 0x00; bi <= 0xFF; bi = bi + 16) {
 
            //緑のループ
            for (gi = 0x00; gi <= 0xFF; gi = gi + 16) {
 
                //赤のループ
                for (ri = 0x00; ri <= 0xFF; ri = ri + 16) {
                    if (rowCounter % 64 == 0) {
                        trn++;
                        $("#table1").append(`</tr><tr id="tr${trn}" >`);
                    }
 
                    rowCounter++;
 
                    //背景色を作成
                    let bgColor = ri * (16 ** 4) + gi * (16 ** 2) + bi;
 
                    //背景色を文字列にする
                    let bgColorStr = (('000000' + bgColor.toString(16).toUpperCase()).substr(-6));
 
                    $(`#tr${trn}`).append(`<td width="2px" style="background-color: #${bgColorStr};" ></td>`)
                }
            }
        }
 
    </script>
</body>
 
</html>

実行結果は以下の通りです。

にしても、選択しにくそうな色の並びですね。
これは困りました。そもそも3次元の色の並びを2次元でどうにかしようというのが間違いな気がしてきました。

本来であれば、このように立体的に表すのが正解のはずです。

歯車の再発明はしないといいつつ実は、HTML内にこんなのを書けばできるんですけどね（笑）

<input type="color" >

表示例

では、再考していきます。
色には3原色あるので、立体として捉えないといけないことがなんとなくわかりました。
（参考）https://www.geogebra.org/m/zcsdwx9n
上で書いたキューブの断面図を下の図のように動かしていくと、全ての色が選択可能になることがわかります。

下の図では、断面の角度は45度ですので、傾きは1になります。

わかりにくいですが、上の図で点Eを原点とします。EHは赤軸、EFは青軸、EAを緑軸とします。で、四角形HEBCに配色していくプログラムを書いてみます。

<html>
 
<head>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <style type="text/css">
        table,
        td,
        tr {
            border: none !important;
        }
 
        td {
            height: 2px;
            table-layout: fixed;
 
 
        }
 
        #table1 {
            table-layout: fixed;
            border-spacing: 0;
            width: 32;
        }
    </style>
 
</head>
 
<body>
    <table id="table1">
        <tr>
    </table>
    <script>let trn = 0;
        let rowCounter = 0;
 
        //赤のループ
        for (ri = 0xFF; ri >= 0x00; ri = ri - 16) {
 
            //青緑のループ
            for (ni = 0x00; ni <= 0xFF; ni = ni + 16) {
                if (rowCounter % 16 == 0) {
                    trn++;
                    $("#table1").append(`</tr><tr id="tr${trn}" >`);
                }
 
                rowCounter++;
 
                //背景色を作成
                let bgColor = ri * (16 ** 4) + ni * (16 ** 2) + ni;
 
                //背景色を文字列にする
                let bgColorStr = (('000000' + bgColor.toString(16).toUpperCase()).substr(-6));
 
                $(`#tr${trn}`).append(`<td width="2px" style="background-color: #${bgColorStr};" ></td>`)
            }
        }
 
    </script>
</body>
 
</html>

実行結果

だいぶ色を選択しやくなりました。今回はここまでです。

色選択できるようにしよう

歯車の再発明はしない

大まかな色を表示する

ブレークタイム

サンデープログラマー＆情報科目