Kaizu-Blog

水曜日, 4月 23, 2025

TCDW8380
ジワジワと治安が悪くなってきているような感じがして

自販機が壊される事件が多発しているそうです。なんとなくジワジワと治安が悪くなってきているような感じがしています。心配です。

火曜日, 4月 22, 2025

Let's start JavaScript 63　
HTML上でスピログラフを描画（改良版）

前回のスピログラフ改良版です。余計なラインが出ないようにしてみました。

■スピログラフのパラメータ

外側の固定円（半径 R）

内側の回転円（半径 r）

描画点の距離 d（内円の中心からの距離）

ステップ数 s（1ユニットのプロット数）

角度 θ（回転角）

■スピログラフの方程式

スピログラフの曲線 (x, y) は、以下のパラメータ方程式で表されます。

基本形（ハイポサイクロイド）

x(θ)=(R-r)cos(θ)+d cos(((R-r)r)θ)

y(θ)=(R-r)sin(θ)-d sin(((R-r)r)θ)

ここで：

θ は回転角（0 から 2π × ループ回数まで変化）

(R - r) の比が整数であれば閉じた軌跡になる

<!-- index.html -->
 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
    <title>スピログラフ描画</title>
    <style>
        body {
            text-align: center;
            background-color: #333;
            font-family: Arial, sans-serif;
        }
        canvas {
            border: 1px solid #000;
            background-color: #000;
            margin-top: 10px;
        }
        input { 
            margin: 5px; 
            text-align: right; 
            width: 40px; 
        }
        .controls {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <font color="white">
    <h2>スピログラフ描画</h2>
    </font>
    <div class="controls">
        <font color="white">
        <label>外円の半径 (R): <input type="number" 
            id="R" value="150"></label>
        <label>内円の半径 (r): <input type="number" 
            id="r" value="70"></label>
        <label>ペンの距離 (d): <input type="number" 
            id="d" value="100"></label>
        <label>ステップ数: <input type="number" 
            id="steps" value="200"></label>
        <label>回転数: <input type="number" 
            id="rotations" value="10"></label>
        <button onclick="drawSpirograph()">描画</button>
        </font>
    </div>
    
    <canvas id="spiroCanvas" width="550" height="550"></canvas>

    <script>
        function drawSpirograph() {
            // ユーザー入力を取得
            let R = parseFloat(document.getElementById('R').value);
            let r = parseFloat(document.getElementById('r').value);
            let d = parseFloat(document.getElementById('d').value);
            let steps = parseInt(document.getElementById('steps').
                value, 10);
            let rotations = parseInt(document.getElementById('rotations').
                value, 10);

            // Canvas の設定
            let canvas = document.getElementById('spiroCanvas');
            let ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.strokeStyle = 'yellow';
            ctx.lineWidth = 2;

            // 中心座標
            let centerX = canvas.width / 2;
            let centerY = canvas.height / 2;

            // スピログラフの描画
            ctx.beginPath();
            for (let i = 0; i <= steps * rotations; i++) {
                let theta = (Math.PI * 2 * i) / steps;
                let x = (R - r) * Math.cos(theta) + 
                    d * Math.cos(((R - r) / r) * theta);
                let y = (R - r) * Math.sin(theta) - 
                    d * Math.sin(((R - r) / r) * theta);
                if (i === 0) {
                    ctx.moveTo(centerX + x, centerY + y);
                } else {
                    ctx.lineTo(centerX + x, centerY + y);
                }
            }
            ctx.stroke();
        }

        // 初回描画
        drawSpirograph();
    </script>

</body>
</html>
<!-- index.html -->

実行直後の状態です。

パラメーター変更例（その1）

パラメーター変更例（その2）

パラメーター変更例（その3）

TCDW8379
ペンチで自分の指を挟んでしまいました

不覚にも、ペンチで自分の指を挟んでしまいました。上手く説明出来ないのですが、ジョイント部分の下の隙間に持ち手の人差し指を挟んだわけです。大した怪我（軽い痛みだけで外傷なし）ではないのですが、オマヌケでした（^o^）

月曜日, 4月 21, 2025

Wordで図形に対して正確に画像を埋め込む

Wordで図形に対して正確に画像を埋め込む方法を整理しました。今までちゃんと解説していなかった事を今頃気がついたので・・・。ちなみに以下の手順はイマイチなので今回の手順が完璧です・・・多分。

Wordで図形に画像を正確に合わせるにはトリミングの活用 2023/05/15

用意した画像。

wordに貼り付けるので解像度はこんな感じにしました。W

最初に図形を配置します。

続けて画像を配置します。配置直後は［レイアウトオプション］で　［テキストの全面に移動］偽呈します。

［図の形式］＞［図の書式設定］＞［図］で透明度を適当に調整して下の図形が確認できるようにします。

ここで図形に表示したい位置とサイズを調整し、その時のサイズをメモします。

透明度を元に戻し画像と図形の位置関係を入れ替えます。

ここで図形を選択し［図形の書式］＞［図形の書式設定］＞［塗りつぶしと線］＞［塗りつぶし（図またはテクスチャ）］を選択するとデフォルトのテクスチャで」塗り潰されますが・・・［挿入する］で、画像を指定して読み込みます。

画像は読みこんが直が葉図形に自動的に収まってしまうので残念な結果になりますが・・・

［図形の書式］＞［図形の書式設定］＞［図］で不透明度を調整し、めっおしておいたサイズを［トリミング］＞［画像の位置］の調整し、画面でズレが発生しない状態を確認できたら透明度を戻して完成です。

背面の画像を削除すればもて盛るサイズとレイアウトで図形の中に画像が埋め込まれていることを確認できます。

TCDW8378
2台のMacを切り替えて使って居るので有線でないと困る

Baby Alien 079

ベビィーなのに、すでにオジサンの貫禄（^o^）

数日前から挙動不審だったMac側のキーボードが、どうやら昇天してしまったようで速攻で注文に入りました。購入して4年だったので妥当？なのかはカナリ怪しいです。そんなコトより価格が倍になっていたのにはビックリ。ちなみに2台のMacを切り替えて共有キーボード&タブレットで使って居るので有線でないと困るため、サードパーティー製です。買い換えの連鎖が出ないことを祈りたいです。

日曜日, 4月 20, 2025

JavaScriptでAI遊び 44　
辺の長さを指定して正N角形を描画（RGB）

辺の長さを指定して正N角形を描画させます。（RGB版）

正多角形の・・・

辺の長さをL

半径をr

正多角形の画数をN

とすると・・・

L=2×r×sin(180°/N)

となり、Excelで計算させると

A1にr、A2にNっを指定し、B1に・・・

L=2*A1*sin(PI()/A2)

で求めることが出来ます。これを応用して・・・

function mmToPt(mm) {
    return mm * 2.83465; // mm を pt に変換
}

function drawRegularPolygon(sideLengthMM, sides) {
    if (sides < 3) {
        alert("3以上の辺の数を入力してください。");
        return;
    }

    var doc = app.activeDocument;
    var artboard = 
        doc.artboards[doc.artboards.getActiveArtboardIndex()];
    var bounds = artboard.artboardRect;

    var centerX = (bounds[0] + bounds[2]) / 2;
    var centerY = (bounds[1] + bounds[3]) / 2;
    
    var sideLengthPt = mmToPt(sideLengthMM);
    var radiusPt = sideLengthPt / (2 * Math.sin(Math.PI / sides)); 
    // 外接円半径
    var angleStep = 360 / sides;
    var pathPoints = [];

    for (var i = 0; i < sides; i++) {
        var angle = (angleStep * i - 90) * Math.PI / 180;
        var x = centerX + radiusPt * Math.cos(angle);
        var y = centerY + radiusPt * Math.sin(angle);
        pathPoints.push([x, y]);
    }

    var polygon = doc.pathItems.add();
    polygon.setEntirePath(pathPoints.
        concat([pathPoints[0]])); // 最後に始点を追加して閉じる
    polygon.closed = true;
    
    // ランダムなRGB塗り色
    polygon.filled = true;
    polygon.fillColor = getRandomRGBColor();
    
    polygon.stroked = true;
    polygon.strokeColor = getBlackColor();
    polygon.strokeWidth = 1;
}

function getRandomRGBColor() {
    var color = new RGBColor();
    color.red = Math.random() * 255;
    color.green = Math.random() * 255;
    color.blue = Math.random() * 255;
    return color;
}

function getBlackColor() {
    var color = new RGBColor();
    color.red = 0;
    color.green = 0;
    color.blue = 0;
    return color;
}

// ユーザー入力
var sideLengthMM = Number(prompt("1辺の長さをmmで入力", "50"));
var sides = Number(prompt("辺の数を入力（3以上）", "6"));

if (!isNaN(sideLengthMM) && sideLengthMM > 
    0 && !isNaN(sides) && sides >= 3) {
    drawRegularPolygon(sideLengthMM, sides);
} else {
    alert("正しい値を入力してください。");
}