JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで円の座標を配列に格納する方法

JavaScriptでは、Math.cosとMath.sinといった三角関数を活用することで、円周上の任意の点の座標を簡単に計算できます。本記事では、中心座標・半径・分割数を指定して円の座標を求め、X座標とY座標をそれぞれ別の配列に格納する方法を、実際に動作するサンプルコードとともにわかりやすく解説します。

円の座標を配列に格納するサンプルコード

以下は、ボタンをクリックすると円の座標を生成して画面に表示する完全なHTMLコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-weight: 500;
        font-size: 18px;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>Circle coordinates to array</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to generate the circle coordinates</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let xCoords = [];
    let yCoords = [];
    function circleCoordinates(radius, steps, centerX, centerY) {
        for (let i = 0; i < steps; i++) {
            xCoords.push(centerX + radius * Math.cos(2 * Math.PI * (i / steps)));
            yCoords.push(centerY + radius * Math.sin(2 * Math.PI * (i / steps)));
        }
    }
    BtnEle.addEventListener("click", () => {
        circleCoordinates(10, 5, 4, 4);
        resEle.innerHTML = "Coordinates for circle are: <br>";
        for (let i = 0; i < xCoords.length; i++) {
            resEle.innerHTML +=
            "X = " + xCoords[i] + " : Y = " + yCoords[i] + "<br>";
        }
    });
</script>
</body>
</html>

コードのポイント

  • circleCoordinates(radius, steps, centerX, centerY)：半径、分割数、中心座標を引数として受け取り、円周上の座標を計算する関数です。
  • 座標の計算式：角度 θ = 2π × (i / steps) とすると、X = centerX + radius × cos(θ)、Y = centerY + radius × sin(θ) により各点の位置が求まります。
  • 配列への格納：計算したX座標は xCoords 配列へ、Y座標は yCoords 配列へ、pushメソッドで順次追加していきます。
  • 結果の表示：ボタンクリック時にループで配列の中身を取り出し、「X = 値 ： Y = 値」の形式で画面に出力します。

実行結果

ページを開いた直後の初期画面は以下のようになります。

JavaScriptで円の座標を配列に格納する方法

「CLICK HERE」ボタンをクリックすると、計算された円の座標が一覧で表示されます。

JavaScriptで円の座標を配列に格納する方法

このように、三角関数とループ処理を組み合わせるだけで、円グラフの描画やアニメーション、ゲーム開発などで役立つ円周上の座標データを自由に生成できます。steps（分割数）の値を大きくするほど、より滑らかで細かい円の座標が得られるので、用途に応じて調整してみてください。

  1. 【初心者向け】JavaScriptのreverse()メソッドで配列を逆順にする方法

    JavaScriptのreverse()メソッドは、配列の要素を元の順序と逆順に入れ替えるための便利な関数です。このメソッドを呼び出すと、配列の最初の要素が最後に、最後の要素が最初に移動し、配列全体が反転されます。reverse()メソッドの基本reverse()は配列そのものを変更する「破壊的メソッド」である点に注意してください。つまり、元の配列の順序が直接書き換えられます。元の配列を保持したい場合は、あらかじめslice()やスプレッド構文（[...arr]）などでコピーを作成してからreverse()を使用するのがおすすめです。サンプルコード以下は、ボタンをクリックすると配列の要素が逆順

  2. JavaScriptにおける配列の分割代入（Destructuring）の基本と使い方

    分割代入（Destructuring）とは、配列から値を取り出して個別の変数に展開するための構文です。ES2015（ES6）で導入されたこの機能を使うと、配列の各要素を簡潔かつ読みやすく変数に割り当てることができます。 配列の分割代入のサンプルコード 以下は、JavaScriptで配列の分割代入を行うコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo