# Pass an array to a new instance of my class

**URL:** <https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183>\
**Category:** Coding Questions\
**Created:** [November 4, 2018, 4:07pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183 "2018-11-04T16:07:42Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [November 4, 2018, 4:07pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/1 "2018-11-04T16:07:42Z")

</div>

How would I go about passing an array of images to a class? My endgame is to have one class that creates an animation, so when I create multiple instances of this class they build a 3x3 grid of animations with each instance playing a different animation. So, I want to pass a different array of images to each instance of my class.

I think I also need to know how to push multiple arrays into one array as well.

```auto
let imgs = [], const NUM_IMAGES = 13;
let myClass = [];
let arrayOfArrays = [];

function preload() {
  for (let i = 0; i < NUM_IMAGES; i++) {
    imgs[i] = loadImages('');
  }
}

function setup() {
  createCanvas();

//something like this
  for (let i = 0; i<6; i++) {
    arrayOfArrays[i] = new Array(imgs);
  }

  for (let i = 0; i < 6; i++) {
    let mc = new myClass(arrayOfArrays[i]); //<---?
    myClass.push(mc);
  }
}

function draw() {
  background(51);
  
  myClass.forEach(panel => {
    panel.run();
  })
}

class myClass {
constructor(_imgs) {
  this.imgs = [_imgs]; //<---?
  this.index = 0;
}

  run() {
    image(this.imgs[this.index],0,0);
    this.index = (this.index+1) % imgs.length;
  }
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 4, 2018, 5:11pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/2 "2018-11-04T17:11:28Z")

</div>

Dunno exactly what you’re asking. But is it anything like this: 🤷‍♂️

```auto
const IMAGES = 13, imgs = Array(IMAGES),
      ANIMS = 2, anims = Array(ANIMS);

function setup() {
  anims[0] = new Anim(imgs[2], imgs[3], imgs[1], imgs[4], imgs[10], imgs[0]);
  anims[1] = new Anim(imgs[1], imgs[5], imgs[7], imgs[13], imgs[9], imgs[6]);
}

class Anim {
  constructor(...imgs) {
    this.imgs = imgs;
    this.idx = 0;
  }

  display() {
    image(this.imgs[this.idx], 0, 0);
    this.idx = (this.idx + 1) % imgs.length;
  }
}

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [November 4, 2018, 6:18pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/3 "2018-11-04T18:18:36Z")

</div>

Not sure, I just want to make a 2d array where each index in that array contains an array of images that I can pass to a class so each instance plays a different set of images.

I tried to rework my code example to better describe what I am trying to accomplish.

```auto
let imgs1 = [];
let imgs2 = [];
const NUM_IMAGES = 13;
let my2dArray = [];

let anim = [];;

function preload() {
  for (let i = 0; i<NUM_IMAGES; i++) { 
    imgs1[i] = loadImages('');
  }

  for (let i = 0; i<NUM_IMAGES; i++) { 
    imgs2[i] = loadImages('');
  }
}

function setup() {
  my2dArray[0] = new Array(imgs1);//<---?
  my2dArray[1] = new Array(imgs2);//<---?

  for (let i = 0; i < 6; i++) {
    let a = new Anim(my2dArray[i]);
    anim.push(a);
  }
}

class Anim {
  constructor(_my2dArray) {
    this.arr = _my2dArray; //<---?
    this.index = 0;
  }

 run() {
    image(this.arr[this.index],0,0);
    this.index = (this.index+1) % NUM_IMAGES;
  }
}

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [November 4, 2018, 7:30pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/4 "2018-11-04T19:30:11Z")

</div>

So I think I have my 2d array filling up properly, i logged it in draw() as well as this.arr and it seems to filled, but it’s obviously not being passed correctly or something bc I get …

```auto
Uncaught TypeError: Cannot read property 'width' of undefined

```

```auto
const NUM_IMAGES = 13;
let my2dArr = [];

let anim = [];

function preload() {
  for (let i = 0; i < 6; i++) {
    my2dArr[i] = new Array();
      for (let j = 0; j<NUM_IMAGES; j++) { 
        my2dArr[i][j] = loadImages('');
    }
  }
}

function setup() {
  for (let i = 0; i < 6; i++) {
    let a = new Anim(my2dArr[i]);
    anim.push(a);
  }
}

class Anim {
  constructor(_my2dArr) {
    this.arr = _my2dArr; //<---?
    this.index = 0;
  }

 run() {
    image(this.arr[this.index],0,0);
    this.index = (this.index+1) % NUM_IMAGES;
  }
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 4, 2018, 7:58pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/5 "2018-11-04T19:58:28Z")

</div>

All the code you’ve been posting aren’t actually runnable. 🏃‍♂️  
Obviously `loadImages('')` won’t work! 🤪  
And neither name labels _2dArray_ nor _2dArr_ are JS valid, b/c they start w/ a digit character.  
BtW, why aren’t they the same variable name? 😵  
Consider hosting your sketch at [OpenProcessing.org/sketch/create](http://OpenProcessing.org/sketch/create)  
It accepts image uploads there. 🕶

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [November 4, 2018, 8:03pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/6 "2018-11-04T20:03:14Z")

</div>

I wasn’t necessarily posting it to be runnable … just descriptive.

I left loadImages blank since I can’t upload images here, and used 2dArray to be explicit in what I want.

difference in var name was a typo, all fixed now.

is what I am asking not being described well enough?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 4, 2018, 8:13pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/7 "2018-11-04T20:13:33Z")

</div>

By quickly reading your sketch I can’t pinpoint what would cause `undefined` for p5::_width_. 🤔

As I understand, you’re now creating a 2D array w/ 6 rows and 13 columns.  
Each 1D row array is a container of 13 loaded p5.Image objects.  
For each instance of Anim a 1D row array is passed to its constructor.

That’s why an actual runnable code would be nice. 😺

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 4, 2018, 8:19pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/8 "2018-11-04T20:19:02Z")

</div>

> [@slow\_izzm](#):
>
> Difference in `var` name was a typo, all fixed now.

Actually not all fixed! Within **setup()**: `let a = new Anim(2dArr[i]);` 👾

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [November 4, 2018, 8:22pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/9 "2018-11-04T20:22:12Z")

</div>

lol … sry bout that last typo not being caught.

i uploaded it here … [https://www.openprocessing.org/sketch/621313](https://www.openprocessing.org/sketch/621313)

yes, it sounds like you understand what i am going for.  
basically in the end I want what would look like a 3x3 story board, each board playing a different animation.

my example only has enough images for one animated board … but i plan to upload more once I get the functionality down.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 4, 2018, 9:16pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/10 "2018-11-04T21:16:44Z")

</div>

Hey! I’ve forked and made some changes to your sketch till I’ve got it working: 🥳

> **[my2dArrAnim - OpenProcessing](https://www.openprocessing.org/sketch/621324)**
>
> just trying to get 2d array filled with images to run multiple animations

```javascript
// https://Discourse.Processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/10
// 2018-Nov-04

const FILENAME = 'zombie', EXT = '.png',
      FPS = 12, BG = 50,
      ANIMS = 1, IMAGES = 19,
      imgs2d = Array(ANIMS), anims = Array(ANIMS);

let bg;

function preload() {
  for (let row = 0; row < ANIMS; ++row) {
    const imgs1d = imgs2d[row] = Array(IMAGES);
    for (let col = 0; col < IMAGES; ++col) imgs1d[col] = loadImage(FILENAME + col + EXT);
  }
}

function setup() {
  createCanvas(windowWidth * .95, windowHeight * .95);
  frameRate(FPS).imageMode(CENTER);
  bg = color(BG);
  for (let i = 0; i < ANIMS; ++i) anims[i] = new Anim(imgs2d[i], width>>1, height>>1);
}

function draw() {
  background(bg);
  for (const anim of anims) anim.display().update();
}

class Anim {
  constructor(arr1d, x, y) {
    this.arr = arr1d;
    this.idx = 0;
    this.x = x;
    this.y = y;
  }

  display() {
    image(this.arr[this.idx], this.x, this.y);
    return this;
  }

  update() {
    this.idx = (this.idx + 1) % this.arr.length;
    return this;
  }
}

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [November 4, 2018, 9:41pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/11 "2018-11-04T21:41:42Z")

</div>

Very nice … thank you so much!!!

I feel I understand mostly what is going on, doesn’t look like I was too far off, but can you explain what this is doing exactly, or give me a term to research? I feel I get it by looking, but would like a deeper understanding …

> const imgs1d = imgs2d[row] = Array(IMAGES);

again thank you for your help.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 4, 2018, 9:49pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/12 "2018-11-04T21:49:51Z")

</div>

> [@slow\_izzm](#):
>
> `const imgs1d = imgs2d[row] = Array(IMAGES);`

- The assignment operator `=` is evaluated from right to left.
- 1st an Array w/ _length_ = IMAGES is created.
- Then its reference is stored inside the Array referenced by variable _imgs2d_ @ _index_ = _row_.
- And that same reference is also stored in the newly declared local variable _imgs1d_.
- Thus _imgs1d_ is an alias to the Array reference stored @ `imgs2d[row]`.

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [November 4, 2018, 10:04pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/13 "2018-11-04T22:04:45Z")

</div>

Thanks, that makes sense the way you explained it.

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [November 6, 2018, 2:04pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/15 "2018-11-06T14:04:22Z")

</div>

@GoToLoop I see you forked my sketch … i went ahead and broke it down into 3 seperate arrays, but I still want to know how to have just one multidimensional array passing into my class so I can load any amount of panels with a different image sequence. ty.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 6, 2018, 2:11pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/16 "2018-11-06T14:11:35Z")

</div>

> [@slow\_izzm](#):
>
> … but I still want to know how to have just one multidimensional array passing into my class…

That’s exactly what I’m trying to pull out right now. 😛

This time you’ve got not 1 but 3 FILENAMES: 🗄  
`const FILENAMES = ['carDefault_', 'carSedan_', 'carYellow_'].`

Therefore you’ve got ANIMS equal to 3: `const ANIMS = FILENAMES.length;`

That’s the approach I’m following right now. 👷‍♂️

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 6, 2018, 2:58pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/17 "2018-11-06T14:58:37Z")

</div>

Finished the fork. Here’s what I’ve ended up w/: 🍴

[OpenProcessing.org/sketch/622494](http://OpenProcessing.org/sketch/622494)

```javascript
// https://Discourse.Processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/17
// 2018-Nov-04
// Sprite created by https://DevilsWorkshop.Itch.io/low-poly-2d-car-sprites-free
// Thanks to @GoToLoop for the help.

const FILENAMES = ['carDefault_', 'carSedan_', 'carYellow_'], EXT = '.png',
      FPS = 8, BG = 51, SIZE = .9,
      ANIMS = FILENAMES.length, IMAGES = 12, COLS = 3,
      imgs2d = Array(ANIMS), anims = Array(ANIMS);

let bg;

function preload() {
  for (let row = 0; row < ANIMS; ++row) {
    const imgs1d = imgs2d[row] = Array(IMAGES), filename = FILENAMES[row];
    for (let col = 0; col < IMAGES; ++col) imgs1d[col] = loadImage(filename + col + EXT);
  }
}

function setup() {
  createCanvas(windowWidth * SIZE | 0, windowHeight * SIZE | 0);
  frameRate(FPS).imageMode(CENTER);
  bg = color(BG);
  createAnims();
}

function draw() {
  background(bg);
  for (const anim of anims) anim.run();
}

function windowResized() {
  resizeCanvas(windowWidth * SIZE | 0, windowHeight * SIZE | 0);
  repositionAnims();
  console.log(width, height);
}

function createAnims() {
  const w = width / COLS | 0, h = height >> 1, offW = w >> 1;
  for (let i = 0; i < ANIMS; anims[i] = new Anim(imgs2d[i], ++i*w - offW, h));
}

function repositionAnims() {
  const w = width / COLS | 0, h = height >> 1, offW = w >> 1;
  for (let i = 0; i < ANIMS; anims[i].setXY(++i*w - offW, h));
}

class Anim {
  constructor(arr1d, x, y) {
    this.frames = arr1d;
    this.idx = 0;
    this.setXY(x, y);
  }

  setXY(x, y) {
    this.x = x;
    this.y = y;
    return this;
  }

  display() {
    image(this.frames[this.idx], this.x, this.y);
    return this;
  }

  update() {
    this.idx = (this.idx + 1) % this.frames.length;
    return this;
  }

  run() {
    return this.display().update();
  }
}

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [November 6, 2018, 9:34pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/18 "2018-11-06T21:34:50Z")

</div>

Ahhh … I see. Thank you so much, totally makes sense how you are filling that array now. I greatly appreciate your help!

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [November 6, 2018, 9:53pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/19 "2018-11-06T21:53:04Z")

</div>

> [@GoToLoop](#):
>
> const w = width / COLS | 0,

Can you explain what is going on here? I think this is a bitwise OR operator, which I kind of understand, but not so much in this use case.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 6, 2018, 10:09pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/20 "2018-11-06T22:09:56Z")

</div>

`| 0` is just a quick trick to truncate (remove the fractional part) the resultant value. 🧙

Equivalent to: `const w = int(width / COLS);` 🤓  
[p5js.org/reference/#/p5/int](http://p5js.org/reference/#/p5/int)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 6, 2018, 10:14pm UTC](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183/21 "2018-11-06T22:14:28Z")

</div>

Addendum: All JS’ bitwise operators truncate their result and turn them into a 32bit signed value. 🔪

[Next page](https://discourse.processing.org/t/pass-an-array-to-a-new-instance-of-my-class/5183.md?page=2)