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

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

6. 文字をたくさん並べてみよう

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: 'i-text',
        left: xloc[xp], top: yloc[yp], angle: 0,
        text: 'H', fill: 'black',
        fontSize: 48, fontFamily: 'sans-serif'
    });
}

実行すると，9個の文字「H」が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;

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

for文の繰り返し回数をsetSizeで指定します。