このページでは，配列，for文，lab.jsのランダム関数を使って，複数の円をランダムな位置に配置する方法を学びます。

以下のチュートリアルが終了した状態から始めます。

1. 円をたくさん並べてみよう

1. 3行×3列の位置に円を描く

前のページでは，次のコードを使って，9個の円を3行×3列に配置しました。

const xloc = [-300, 0, 300];
const yloc = [-150, 0, 150];

for (let i = 0; i < 9; i++) {
    const xp = i % 3;
    const yp = Math.floor(i / 3);

    this.options.content.push({
        type: 'circle',
        left: xloc[xp], top: yloc[yp], angle: 0,
        width: 100,
        fill: null,
        stroke: 'green', strokeWidth: 5
    });
}

実行すると，9個の円が3行×3列に表示されます。

このコードでは，iを3で割った余りをxp，商をypとして使用しています。

const xp = i % 3;
const yp = Math.floor(i / 3);

• xp：横方向の位置を表すインデックス
• yp：縦方向の位置を表すインデックス

番号と位置の対応は，次のようになります。

2. 描画する円の数を指定する

次に，描画する円の数を3個に減らしてみましょう。

描画する刺激の数を表す定数setSizeを作成し，3を代入します。

const setSize = 3;

視覚探索課題では，画面上に呈示する刺激の数を「セットサイズ」と呼びます。