次は，「for文」を利用して，円を横に並べて描きましょう。0から2まで１つず増やしていけば，最初に「-300」，次に「0」，次に「300」の位置に円を描いてくれるはずです。実際にやってみましょう。
var xloc = [-300, 0, 300];
// Circle
for(var i =0; i<3; i++){
this.options.content.push({
//共通パラメータ
type: 'circle',
left: xloc[i],top: 0,
width:100, height:100,
fill:null,stroke:'green', // nullまたは'red' 'rgb(X,X,X)'
strokeWidth:'5',
angle: 0
})
}
実行すると以下のように表示されます。
次は，for文を２つ使って，横３×縦３の位置に刺激を呈示するようにしましょう。横位置をxloc，縦位置をylocで指定しています。「i」と「j」の違いに気をつけてください。
var xloc = [-300, 0, 300];
var yloc = [-150, 0, 150];
// Circle
for(var i =0; i<3; i++){
for(var j =0; j<3; j++){
this.options.content.push({
//共通パラメータ
type: 'circle',
left: xloc[i],top: yloc[j],
width:100, height:100,
fill:null,stroke:'green', // nullまたは'red' 'rgb(X,X,X)'
strokeWidth:'5',
angle: 0
})
}
}
実行すると，以下のように縦に３，横に３つ並んだ円が呈示されます。
次は，for文を1回だけ使って上と同じように横３×縦３の位置に刺激を呈示するようにしましょう。このやり方を覚えると，後々とても便利です。
今回，新たな変数として「xp」と「yp」を作成しました。また，for文の範囲が「0~8」までとなっています。
0から8までの数字をそれぞれ割り算して商または余りを求めると，どちらも「0~3」になります。つまり，ここでやっていることはfor文を2回回しているのと同じです。