【p5.js】配列から複数の画像をimage()で表示させたい

前提・実現したいこと

プログラミング初心者です。

p5.jsでランダムに画像を表示させるシステムをつくっています。
将来的にランダムに選んだひとつは10ピクセル移動して表示され、そのほかの画像はそのままの位置で表示されるシステムをつくりたくて、その実験をしていたのですが、問題が起きたので質問させていただきました。
実現したいことは、配列からランダムに選んだひとつの画像以外の複数の画像を表示させることです。

発生している問題・エラーメッセージ

プログラムを実行したところ、以下のエラーメッセージが出ました。

エラーメッセージ
p5.js says: image() was expecting p5.Image|p5.Element for parameter #0 (zero-based index), received array instead.

該当のソースコード

p5.js

function preload(){
  hiyoko1 = loadImage('hiyoko1.png');
  hiyoko2 = loadImage('hiyoko2.png');
}

function setup() {
  createCanvas(1000, 1000);
  background(255);
  let items = [hiyoko1,hiyoko2];
  let item = random(items);

  let result = items.filter( function( value ) {
 
      return value != item ;
 
  })
 
  image(result,0,0);
  
}

試したこと

数字の配列をコンソールに表示させることはできたのですが、画像だと配列を表示させられないのが理解できませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

resultが配列になっているのがわかっているのであれば、ループでimage()を個数分呼びましょう。

Processing
1function preload() {
2  hiyoko1 = loadImage('hiyoko1.png');
3  hiyoko2 = loadImage('hiyoko2.png');
4}
5
6function setup() {
7  createCanvas(1000, 1000);
8  background(255);
9  let items = shuffle([hiyoko1, hiyoko2, hiyoko2, hiyoko2, hiyoko2, hiyoko2]);
10
11  for (let i = 0; i < items.length; i++) {
12    if (items[i] === hiyoko1) {
13      image(items[i], i * hiyoko1.width, 10);
14    } else {
15      image(items[i], i * hiyoko1.width, 20);
16    }
17  }
18}