JavaScriptで長さxの線分上にn個の等距離点の配列を生成する方法

JavaScriptで長さxの線分上にn個の等距離点を生成する方法

長さxの線分に沿ってn個の等間隔の点を配置した配列を生成するには、forループを使って各点の位置を順番に計算していきます。基本的な考え方は、線分を「点の個数 + 1」個に分割し、その分割位置を配列に格納するというものです。

基本構文

for (var 変数名 = 0; 変数名 < 開始地点; 変数名++) {
    var v = (変数名 + 1) / (開始地点 + 1);
    var v2 = v * 終了地点;
}

この構文では、ループ変数に1を加算してから「点の個数 + 1」で割ることで、始点(0)と終点を含まない内側の等距離点の割合を求めています。その割合vに終了地点の値を掛けることで、実際の座標が計算される仕組みです。

実装例

function drawPoints(start, end) {
    const arrayOfPoints = []
    for (var index = 0; index < start; index++) {
        var v = (index + 1) / (start + 1);
        var v2 = v * end;
        arrayOfPoints.push(Math.round(v2));
    }
    return arrayOfPoints;
}
const arrayOfPoints = drawPoints(5, 50);
console.log("生成された点=");
console.log(arrayOfPoints);

上記のプログラムでは、drawPoints関数の第1引数に生成する点の個数（ここでは5）、第2引数に線分の終了位置（ここでは50）を渡しています。Math.round()によって計算結果の小数点以下を四捨五入し、整数の座標として配列にpushしています。

プログラムの実行方法

Node.js環境で上記のプログラムを実行するには、以下のコマンドを使用します。

node ファイル名.js

ここでは、ファイル名をdemo53.jsとして保存しています。

出力結果

上記のプログラムを実行すると、次のような出力が得られます。

PS C:\Users\Amit\JavaScript-code> node demo54.js
生成された点= [ 8, 17, 25, 33, 42 ]

このように、0から50までの線分上に端点を含まない5つの等距離点（8、17、25、33、42）が生成されました。区間の長さは50÷6≒8.33となり、各点がほぼ一定の間隔で均等に配置されていることが確認できます。この手法は、チャートの目盛り作成やUI要素の等間隔配置など、さまざまな場面で応用できます。