指定角度のバイナリデータ生成

by 一騎土井
指定角度のバイナリデータ生成

指定角度のバイナリデータ生成





<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指定角度のバイナリデータ生成</title>
    <style>
        #binaryData {
            display: table;
            border-collapse: collapse;
            margin-top: 20px;
        }

        #binaryData div {
            display: table-row;
        }

        #binaryData div div {
            display: table-cell;
            width: 20px;
            height: 20px;
            border: 1px solid black;
            box-sizing: border-box;
            text-align: center;
            line-height: 20px;
        }
    </style>
</head>

<body>
    <h1>指定角度のバイナリデータ生成</h1>
    <form>
        <label for="angleInput">角度（0～90度）:</label>
        <input type="number" id="angleInput" name="angle" min="0" max="90" value="45">
        <button type="button" onclick="generateBinaryData()">生成</button>
    </form>

    <div id="binaryData"></div>


<br>
<br>
<br>
<br>
<br>


    <script>
        // 指定された角度のバイナリデータを生成する関数
        function generateBinaryData() {
    const angle = parseInt(document.getElementById('angleInput').value);
    const originalRows = 16;
    const originalCols = 16;
    const maxSize = Math.max(originalRows, originalCols) * 2; // 拡張された正方形のサイズ
    const binaryData = [];

    // 角度が45度より大きいかどうかで処理を変える
    const isSteep = angle > 45;
    const initialPattern = [];

    // 拡張されたサイズに基づいて初期パターンの計算
    if (isSteep) {
        for (let y = 0; y < maxSize; y++) {
            const index = Math.round(y * Math.tan((90 - angle) * Math.PI / 180));
            initialPattern.push(index);
        }
    } else {
        for (let x = 0; x < maxSize; x++) {
            const index = Math.round(x * Math.tan(angle * Math.PI / 180));
            initialPattern.push(index);
        }
    }

    // 拡張されたバイナリデータの生成
    for (let y = 0; y < maxSize; y++) {
        const rowData = [];
        for (let x = 0; x < maxSize; x++) {
            let value;
            if (isSteep) {
                value = (initialPattern[y] + x) % maxSize; // maxSizeで割った余りを使用
            } else {
                value = (initialPattern[x] + y) % maxSize; // maxSizeで割った余りを使用
            }
            rowData.push(value);
        }
        binaryData.push(rowData);
    }

    // 必要な部分だけを抽出して切り取る
    const trimmedData = binaryData.slice(0, originalRows).map(row => row.slice(0, originalCols));

    // 生成したバイナリデータを表示
    displayBinaryData(trimmedData);
}




        // バイナリデータを表示する関数
        function displayBinaryData(binaryData) {
            const binaryDiv = document.getElementById('binaryData');
            binaryDiv.innerHTML = ''; // 一旦クリア

            // インデックスごとの色を保存するオブジェクト
            const colorMap = {};

            binaryData.forEach(row => {
                const rowDiv = document.createElement('div');
                row.forEach(value => {
                    const cellDiv = document.createElement('div');
                    cellDiv.textContent = value;

                    // インデックスがまだ色が割り当てられていない場合は、新しい色を割り当てる
                    if (!colorMap[value]) {
                        colorMap[value] = getRandomColor();
                    }

                    cellDiv.style.backgroundColor = colorMap[value]; // インデックスごとの色をセット
                    rowDiv.appendChild(cellDiv);
                });
                binaryDiv.appendChild(rowDiv);
            });
        }

        // ランダムな色を生成する関数
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        // 初期化時に生成する
        generateBinaryData();
    </script>
</body>

</html>

sample programに戻る