1. 10枚の画像から6枚を選ぶ

次は,画像要素をランダムに入れ替えてみましょう。画像「01.png〜10.png」の内,6枚をランダムに選び,その画像を画面に表示するプログラムを作っていきたいと思います。今回は円形配置のプログラムを修正して,実験を作成していきたいと思います。以下のプログラムをダウンロードしてください。

osg_kadai3-2020-07-02--10 11.study.json

osg_kadai3-2020-07-02--10 11.study.json.zip

上記の方法で保存できない場合のヒント

デモのプログラムがダウンロードできない

まずは,画像を指定する配列で「01.png〜10.png」までの画像を指定します。

var gazou = ["01.png","02.png", "03.png", "04.png", "05.png", "06.png","07.png", "08.png", "09.png", "10.png"];

次に,画像をランダムに指定するための配列「rand_gazou」を以下のように作りましょう。

var rand_gazou = this.random.shuffle([0,1,2,3,4,5,6,7,8,9]);

画像を描画する部分で「i」で指定している箇所を「rand_gazou[i]」に書き換えます。

src: '${ this.files["'+ gazou[rand_gazou[i]] + '"] }'

ここまでのコードをまとめると以下のようになります。