Kaizu-Blog

金曜日, 4月 04, 2025

Let's start JavaScript 60　
HTML上で2つのRGB色から色相グラデ作成

HTML上で指定した2つのRGB色から色相グラデ—ションを作成します。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
                content="width=device-width, initial-scale=1.0">
    <title>RGB色のグラデーション</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 50vh;
            margin: 0;
            background-color: #222;
            color: white;
        }
        .controls {
            margin-bottom: 20px;
        }
        .gradient {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            max-width: 80%;
        }
        .box {
            width: 60px;
            height: 60px;
            margin: 20px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: white;
            font-weight: bold;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
        }
        input {
            width: 60px;
        }
    </style>
</head>
<body>
    <h2>RGB色の色相グラデーション</h2>
    <div class="controls">
        <label>開始色 (RGB): 
                             R <input type="number" 
                                id="startR" value="255" min="0" max="255">
                             G <input type="number" 
                                id="startG" value="0" min="0" max="255">
                             B <input type="number" 
                                id="startB" value="0" min="0" max="255">
        </label>
        <br>
        <label>終了色 (RGB): 
                             R <input type="number" 
                                id="endR" value="0" min="0" max="255">
                            G <input type="number" 
                                id="endG" value="0" min="0" max="255">
                            B <input type="number" 
                                id="endB" value="255" min="0" max="255">
        </label>
        <br>
        <label>ステップ数: <input type="number" 
                id="steps" value="10" min="2"></label>
        <button onclick="generateGradient()">生成</button>
    </div>
    <div class="gradient" id="gradientContainer"></div>

    <script>
        // RGBからHSBへ変換
        function RGBToHSB(r, g, b) {
            r /= 255, g /= 255, b /= 255;
            let max = Math.max(r, g, b), min = Math.min(r, g, b);
            let h, s, v = max;
            let d = max - min;
            s = max === 0 ? 0 : d / max;
            if (max === min) {
                h = 0;
            } else {
                switch (max) {
                    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                    case g: h = (b - r) / d + 2; break;
                    case b: h = (r - g) / d + 4; break;
                }
                h /= 6;
            }
            return [h * 360, s * 100, v * 100];
        }

        // HSBからRGBへ変換
        function HSBToRGB(h, s, v) {
            let r, g, b;
            h /= 360, s /= 100, v /= 100;
            let i = Math.floor(h * 6);
            let f = h * 6 - i;
            let p = v * (1 - s);
            let q = v * (1 - f * s);
            let t = v * (1 - (1 - f) * s);
            switch (i % 6) {
                case 0: r = v, g = t, b = p; break;
                case 1: r = q, g = v, b = p; break;
                case 2: r = p, g = v, b = t; break;
                case 3: r = p, g = q, b = v; break;
                case 4: r = t, g = p, b = v; break;
                case 5: r = v, g = p, b = q; break;
            }
            return [Math.round(r * 255), 
                Math.round(g * 255), Math.round(b * 255)];
        }

        function generateGradient() {
            let startR = 
                parseInt(document.getElementById("startR").value);
            let startG = 
                parseInt(document.getElementById("startG").value);
            let startB = 
                parseInt(document.getElementById("startB").value);
            let endR = 
                parseInt(document.getElementById("endR").value);
            let endG = 
                parseInt(document.getElementById("endG").value);
            let endB = 
                parseInt(document.getElementById("endB").value);
            let steps = 
                parseInt(document.getElementById("steps").value);
            let container = 
                document.getElementById("gradientContainer");
            container.innerHTML = "";

            let startHSB = RGBToHSB(startR, startG, startB);
            let endHSB = RGBToHSB(endR, endG, endB);

            for (let i = 0; i < steps; i++) {
                let ratio = i / (steps - 1);
                let hue = startHSB[0] + ratio * (endHSB[0] - startHSB[0]);
                let sat = startHSB[1] + ratio * (endHSB[1] - startHSB[1]);
                let bri = startHSB[2] + ratio * (endHSB[2] - startHSB[2]);

                let newRGB = HSBToRGB(hue, sat, bri);
                let [r, g, b] = newRGB;

                let box = document.createElement("div");
                box.className = "box";
                box.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
                box.textContent = `RGB(${r},${g},${b})`;
                container.appendChild(box);
            }
        }
    </script>
</body>
</html>

実行したら、基準となるRGB値とステップ数を入力し［OK］をクリックすれば・・・

結果が表示されます。

TCDW8361
IKEAの製品が価格的にも良さそうですね

愛用しているニッケル・水素充電池が、寿命を迎えたモノがポツポツ出てきました。そろそろ仕込みに入らないといけないのですが、IKEAの製品が価格的にも良さそうですね。

木曜日, 4月 03, 2025

JavaScriptでAI遊び 40　
指定半径の三角形からN角形を描画

指定半径の三角形からN角形を自動描画します。

// 多角形描画
function drawRegularPolygon(sides, radius, centerX, centerY) {
var doc = app.activeDocument;
var angle = 360 / sides;
var points = [];
for (var i = 0; i < sides; i++) {
var theta = (angle * i - 90) * (Math.PI / 180);
var x = centerX + radius * Math.cos(theta);
var y = centerY + radius * Math.sin(theta);
points.push([x, y]);
}
var polygon = doc.pathItems.add();
polygon.setEntirePath(points.concat([points[0]]));
polygon.closed = true;
polygon.stroked = true;
polygon.filled = false;
}

function main() {
    if (app.documents.length === 0) {
        alert("ドキュメントを開いてください。");
        return;
    }
    
    // 半径を指定
    var radius = 
        parseFloat(prompt("半径を入力してください: ", "100"));
    if (isNaN(radius) || radius <= 0) {
        alert("有効な半径を入力してください。");
        return;
    }
    
    // N角形までを指定
    var maxSides = 
        parseInt(prompt("最大の角数を入力してください: ", "12"));
    if (isNaN(maxSides) || maxSides < 3) {
        alert("有効な角数を入力してください (3以上)。");
        return;
    }
    
    // 描画位置を指定（これじゃダメみたい）
    var doc = app.activeDocument;
    var startX = radius * 1.5;
    var centerY = doc.height / 2;
    var leftEdge = 0 + radius;
    
    // 3角形からN角形までを描画
    for (var sides = 3; sides <= maxSides; sides++) {
        drawRegularPolygon(sides, radius, leftEdge + (sides - 3) * 
        (radius * 2.5), centerY);
    }
}
main();

実行したら半径値を入力・・・

続けてN角形までの数を入力すれば・・・

自動的に描画しますが、どうしてもドキュメントの中に描画出来ないので、画面を縮小表示して確認してください。この問題解決はチョット時間が掛かりそうです。

TCDW8360
晴れても花粉症の季節だしPM2.5もあるし・・・

寒さがぶり返して引きこもり確定の日々〜。問題は寒暖差で体調を壊さないことですね。いや、風邪に要注意ですね。しかし、晴れても花粉症の季節だしPM2.5もあるし・・・（>_<）

水曜日, 4月 02, 2025

Excel VBA 44　
Excelで選択したセルの西暦を和暦に変換

Excelで選択したセルの西暦を和暦に変換します。手動でメニューから変更するのが面倒なので作りました。

Sub ConvertToWareki()
    Dim cell As Range
    Dim wareki As String
    
    ' 選択範囲の各セルを処理
    For Each cell In Selection
        If IsDate(cell.Value) Then
            ' 和暦（元号）に変換
            wareki = Format(cell.Value, "gggee年m月d日")
            cell.Value = wareki
        End If
    Next cell
End Sub