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

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

osg-simple-script-demo2-2020-05-19--22 47.study.json

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

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

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

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

難しい話はおいておいて，とりあえず以下のように入力すると画面の中心から「0度」の角度で200pxの距離のx座標とy座標を求めることが出来ます。

var xloc,yloc;
var angle = 0;
var radius = 200;

// Circle
  xloc = Math.cos(angle*(Math.PI/180))*radius; // x座標
  yloc = Math.sin(angle*(Math.PI/180))*radius; // y座標

図形の描画の部分も含めると以下のようになります。

var xloc,yloc;
var angle = 0;
var radius = 200;

// Circle
  xloc = Math.cos(angle*(Math.PI/180))*radius; // x座標
  yloc = Math.sin(angle*(Math.PI/180))*radius; // y座標
  this.options.content.push({
    //共通パラメータ
    type: 'circle', 
    left: xloc,top: yloc, 
    width:100, height:100,
    fill:null,stroke:'green', // nullまたは'red' 'rgb(X,X,X)'
    strokeWidth:'5',
    angle: 0
  })

実行すると，以下のように画面中心よりも右側にずれた位置に円が呈示されます。