# Image Object Array not displaying correctly

**URL:** <https://discourse.processing.org/t/image-object-array-not-displaying-correctly/32704>\
**Category:** Coding Questions\
**Created:** [October 9, 2021, 1:36am UTC](https://discourse.processing.org/t/image-object-array-not-displaying-correctly/32704 "2021-10-09T01:36:08Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexander\_Kessler](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alexander_kessler/32/14662_2.png) [@Alexander\_Kessler](https://discourse.processing.org/u/Alexander_Kessler)\
**Post date:** [October 9, 2021, 1:36am UTC](https://discourse.processing.org/t/image-object-array-not-displaying-correctly/32704/1 "2021-10-09T01:36:08Z")

</div>

Need some help trying to make an object image array based on Daniel Shiffman tut, but having this console error while displaying . " image() was expecting p5.Image|p5.Element for the first parameter, received an empty variable instead.". …

```auto
let particles = [];
let cells = [];
let sf = 1; 
let x = 0;
let y = 0; 
let mx, my; 
let flagMove;
let randomImg;

function preload() {
    for (let i = 1; i < 11; i++){
        cells[i] = loadImage('assets/cell-(' + i + ').jpg');
    }
}

function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
    flagMove = 0;
    for (let i = 0; i < width / 4; i++) {
        particles.push(new Particle());
    }
}

function draw() {
    mx = mouseX;
    my = mouseY;
    background(0, 0, 100);
    translate(mx, my);
    scale(sf);
    translate(-mx, -my);

    if (mouseIsPressed) {
        x -= pmouseX - mouseX;
        y -= pmouseY - mouseY;
      }

 
        for (let i = 0; i < particles.length; i++) {
            particles[i].createParticle();
            //particles[i].moveParticle();
            particles[i].joinParticles(particles.slice(i));
        }
}

window.addEventListener("wheel", function(e) {
    if (e.deltaY > 0)
      sf *= 1.05;
    else
      sf *= 0.95;
  });

class Particle {
    constructor() {
        this.x = random(0, width);
        this.y = random(0, height);
        this.r = random(0,50);
        this.xSpeed = random(-2, 2);
        this.ySpeed = random(-1, 1.5);
        this.cell = random(cells);
    }

    // creation of a particle.
    createParticle() {
        noStroke();
        if(sf <= 1){
            fill('rgba(200,169,169,0.5)');
            circle(this.x, this.y, this.r);
        }if(sf > 1){
            image(this.cell, this.x, this.y, this.r, this.r);
            console.log(this.cell);

        }
    }

    // setting the particle in motion.
    moveParticle() {
        if (this.x < 0 || this.x > width)
            this.xSpeed *= -1;
        if (this.y < 0 || this.y > height)
            this.ySpeed *= -1;
        this.x += this.xSpeed;
        this.y += this.ySpeed;
    }

    joinParticles(particles) {
        particles.forEach(element => {
            let dis = dist(this.x, this.y, element.x, element.y);
            if (dis < 60) {
                stroke('rgba(255,255,255');
                line(this.x, this.y, element.x, element.y);
            }
        });
    }
}

```

Any guesses around here ???

---

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [October 9, 2021, 2:51am UTC](https://discourse.processing.org/t/image-object-array-not-displaying-correctly/32704/2 "2021-10-09T02:51:54Z")

</div>

Welcome! Mind sharing a link to your code (e.g., on the [p5 Editor](https://editor.p5js.org))?

You can provide everyone with nicely formatted/color-coded snippets by placing them between pairs of three back ticks ```. For example, here’s how to format JavaScript code:

````auto
```javascript
// your code here
```

````

---

<div class="post-metadata">

**Author:** ![Alexander\_Kessler](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alexander_kessler/32/14662_2.png) [@Alexander\_Kessler](https://discourse.processing.org/u/Alexander_Kessler)\
**Post date:** [October 9, 2021, 4:33am UTC](https://discourse.processing.org/t/image-object-array-not-displaying-correctly/32704/3 "2021-10-09T04:33:46Z")

</div>

thanks for the welcome tip @mcintyre !

---

<div class="post-metadata">

**Author:** ![Alexander\_Kessler](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alexander_kessler/32/14662_2.png) [@Alexander\_Kessler](https://discourse.processing.org/u/Alexander_Kessler)\
**Post date:** [October 9, 2021, 4:42am UTC](https://discourse.processing.org/t/image-object-array-not-displaying-correctly/32704/4 "2021-10-09T04:42:27Z")

</div>

Here it is the code in p5.editor, trying to make zoom for particle system and change his behaviour from circles to images with the mouse wheel, but could not render images object array properly,guess is related to some syntax problems when calling random images from array object, any suggestion is very welcome, many thanks ! …

[https://editor.p5js.org/desarrolloak/sketches/rbOK4wD92](https://editor.p5js.org/desarrolloak/sketches/rbOK4wD92)

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 9, 2021, 8:43am UTC](https://discourse.processing.org/t/image-object-array-not-displaying-correctly/32704/5 "2021-10-09T08:43:06Z")

</div>

It’s not a syntax issue, but you are correct that it’s an issue with the use a `random(cells)` to select a random image. The problem is that `cells` has no item at index `0`. Arrays in JavaScript are index by zero, so when you assign an item to position `1` you are leaving an empty slot at `0`. Any code that iterates over the items in that array is going to find a value of `undefined` in that position. Here’s the fix:

```javascript
    for (let i = 1; i < 11; i++){
        // Note the index: i - 1 instead of just i
        cells[i - 1] = loadImage('assets/cell-(' + i + ').jpg');
    }

```

Alternately you could use `.push()`:

```javascript
    for (let i = 1; i < 11; i++){
        cells.push(loadImage('assets/cell-(' + i + ').jpg'));
    }

```

* * *

bonus points, use a template string:

```javascript
    for (let i = 1; i < 11; i++){
        cells.push(loadImage(`assets/cell-(${i}).jpg`));
    }

```

more bonus points, use `.map()`:

```javascript
    cells = [...new Array(10)].map((_, ix) => loadImage(`assets/cell-(${ix + 1}).jpg`));

```

sorry, I digress.

---

<div class="post-metadata">

**Author:** ![Alexander\_Kessler](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alexander_kessler/32/14662_2.png) [@Alexander\_Kessler](https://discourse.processing.org/u/Alexander_Kessler)\
**Post date:** [October 9, 2021, 5:51pm UTC](https://discourse.processing.org/t/image-object-array-not-displaying-correctly/32704/6 "2021-10-09T17:51:55Z")

</div>

I couldn’t see it, but now is really really working !!! thank you very much for this guide @KumuPaul , I really appreciate it. I think I forgot how iterating over arrays works. And also this syntax looks fascinating to optimize the code, i will definitely!!!, the syntax in Javascript with p5.js seems very versatile . I hope this questioning functions also for others inquiring into arrays !!! greetings from Mexico 🤓 🖖