このページでは，配列とランダム関数を使って，図形の中心にランダムな角度の線分を重ねる方法を学びます。

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

3. 一部の図形を置き換えよう

1. 緑色のひし形，赤色の円，緑色の円を描く

前のページでは，3行×3列の9か所からランダムに5か所を選び，次の刺激を表示しました。

• 緑色のひし形：1つ
• 赤色の円：1つ
• 緑色の円：3つ

使用したコードは，次のとおりです。

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

const positionList = [0, 1, 2, 3, 4, 5, 6, 7, 8];
const sampleList = this.random.shuffle(positionList);

for (let i = 0; i < setSize; i++) {
    let stimType;
    let stimAngle;
    let stimColor;

    if (i == 0) {
        stimType = 'rect';
        stimAngle = 45;
        stimColor = 'green';
    } else if (i == 1) {
        stimType = 'circle';
        stimAngle = 0;
        stimColor = 'red';
    } else {
        stimType = 'circle';
        stimAngle = 0;
        stimColor = 'green';
    }

    const position = sampleList[i];
    const xp = position % 3;
    const yp = Math.floor(position / 3);

    this.options.content.push({
        type: stimType,
        left: xloc[xp], top: yloc[yp], angle: stimAngle,
        width: 100, height: 100,
        fill: null,
        stroke: stimColor, strokeWidth: 5
    });
}

実行すると，ランダムに選択された5か所に，緑色のひし形，赤色の円，緑色の円が表示されます。

2. 図形の中心に線分を重ねる

次に，各図形の中心に黒色の線分を重ねます。

2.1. 細長い四角形で線分を作る

ここでは，lineではなく，細長い四角形であるrectを使って線分を作ります。

this.options.content.push({
    type: 'rect',
    left: 0, top: 0, angle: 45,
    width: 50, height: 4,
    fill: 'black'
});

このコードでは，幅50，高さ4の細長い黒色の四角形を45度回転させています。

各プロパティの役割は，次のとおりです。

このコードで指定している主なプロパティは，次のとおりです。