1. ひし形を見つけよう

円形に並んだ「円」の中に一つだけ「ひし形」が呈示され，これを探す実験を作っていきたいと思います。たくさんの図形の中から特定の図形を探す課題は「視覚探索課題」と呼ばれます。この時，見つけるべき対象（今回はひし形）のことをターゲット，それ以外の対象をディストラクター（今回は円）という言い方をします。

視覚探索

2. 復習：円を円周上にならべる

円刺激を円形に８個並べるプログラムを作ります。このプログラムは，以下のように「緑の円」を円周上に並べるプログラムです。

var xloc,yloc;
var angle = [0,45,90,135,180,225,270,315];
var radius = 200;

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

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

3. １つだけひし形を呈示しよう

次は，１つだけひし形（ターゲット）を呈示するようにします。まずは正方形を１つ呈示します

繰り返しの1回目は正方形，2回目から8回目までは円を呈示するようにします。そのために「if文」を使って条件分岐を作っています。

if(i==0){
  正方形を描く
}else{
  円を描く
}

以下のように記載してください。

var xloc,yloc;
var angle = [0,45,90,135,180,225,270,315];
var radius = 200;

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

  // 以下を描き変えてください。-------------------------------
  for(i=0; i<8; i++){
    xloc = Math.cos(angle[i]*(Math.PI/180))*radius; // x座標
    yloc = Math.sin(angle[i]*(Math.PI/180))*radius; // y座標
    
    if(i==0){
      ctx.strokeStyle = "green";
      ctx.lineWidth = 5; // 線の幅は5px
      // 四角形を描画
      ctx.strokeRect(
          xloc-50,// 左上のx座標
          yloc-50,// 左上のy座標
          100,// 幅
          100 //高さ
        );
      ctx.stroke();
    }else{
      // 色と線の幅を指定
      ctx.strokeStyle = "green";
      ctx.lineWidth = 5; // 線の幅は5px
      // 円を描画
      ctx.beginPath(); // パスの初期化
      ctx.arc(
        xloc,//円の中心のx座標
        yloc,//円の中心のy座標
        50,//円の半径
        0, //円の開始角度
        2 * Math.PI//円の終了角度
      );
      ctx.stroke();
    }
  }
}

実行すると以下のように表示されます。