まずは，以下の実験プログラムファイルをダウンロードしてください。このプログラムを修正して，実験を作成していきます。
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();
}
それでは，まずは変数を使用して緑の円を描く位置を変えられるようにしましょう。以下のように，まずは変数「xloc」を作成し，値を「300」にします。
次に，x座標の値に「xloc」を指定します。
var xloc = 300;
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(
xloc,//円の中心のx座標
0,//円の中心のy座標
50,//円の半径
0, //円の開始角度
2 * Math.PI//円の終了角度
)
ctx.stroke();
}
実行をすると，円が少し右にズレて表示されます。
次は，配列を使ってみましょう。以下のように配列を作成し，代入してください。配列は「0」から開始されるので，以下の例では「-300」が代入されます。