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. ランダムな位置に刺激を呈示する

次は，ランダムな位置に刺激を呈示してみましょう。

以下のように書き換えてください。

var xloc = [-300, 0, 300];
var yloc = [-150, 0, 150];
var xp,yp;

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

  // 以下を描き変えてください。-------------------------------
  for(var i =0; i<9; i++){

    xp = i%3; //３で割った余り
    yp = Math.floor(i/3) //３で割った商
		  // 色と線の幅を指定
		  ctx.strokeStyle = "green";
		  ctx.lineWidth = 5; // 線の幅は5px
		  // 円を描画
		  ctx.beginPath(); // パスの初期化
		  ctx.arc(
		    xloc[xp],//円の中心のx座標
		    yloc[yp],//円の中心のy座標
		    50,//円の半径
		    0, //円の開始角度
		    2 * Math.PI//円の終了角度
		    )
		  ctx.stroke();
	}
}

以下のように３＊３のマトリクスが表示されます。