1. 復習：円を描く

まずは，以下の実験プログラムファイルをダウンロードしてください。このプログラムを修正して，実験を作成していきます。

osg-simple-script-demo-2024-05-11--10 10.study.json

Zip

osg-simple-script-demo-2024-05-11--10 10.study.json.zip

上記の方法で保存できない場合のヒント

このプログラムは，以下のように「緑の円」を画面の中心に１つ描くプログラムです。

this.options.renderFunction = (t, canvas, ctx, obj) => {
  // このレンダー関数を使うことでcanvasに図形を描くことが出来ます。
  // t: timestamp この関数が呼び出された時刻
  // canvas: canvasオブジェクトへのレファレンス
  // ctx: 描画するコンテンツの情報（一番重要）
  // obj: 現在描画されているcanvasへの参照

  // 以下を描き変えてください。-------------------------------
  
  // 色と線の幅を指定
  ctx.strokeStyle = "green";
  ctx.lineWidth = 5; // 線の幅は5px
  // 円を描画
  ctx.beginPath(); // パスの初期化
  ctx.arc(
    0,//円の中心のx座標
    0,//円の中心のy座標
    50,//円の半径
    0, //円の開始角度
    2 * Math.PI//円の終了角度
    )
  ctx.stroke();
}

2. 画面の中心からの距離

まずは画面の中心から「0度」の角度で200pxの距離に円を描いてみましょう。今回は「極座標」で位置を指定して「直交座標」に変換します。極座標とは原点からの距離 r と「角度」θ という2つの数字を使って平面上の点の位置を表すような方法です。これをxとyで表される座標に変えます。

極座標から直交座標に変換するには以下の式を使います(r は半径，radiusの略)。

x = r * cos θ
y = r * sin θ

これを，プログラムで書く場合には「Math.cos」，「Math.sin」という関数を使います。この関数の引数（入力する情報）は，ラジアンで指定する必要があるため，角度の情報をラジアンに変換する式も必要です。