# Using the Array of Objects Resource with unique objects

**URL:** <https://discourse.processing.org/t/using-the-array-of-objects-resource-with-unique-objects/5182>\
**Category:** Coding Questions\
**Created:** [November 4, 2018, 3:54pm UTC](https://discourse.processing.org/t/using-the-array-of-objects-resource-with-unique-objects/5182 "2018-11-04T15:54:23Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![yangs](https://avatars.discourse-cdn.com/v4/letter/y/8c91f0/32.png) [@yangs](https://discourse.processing.org/u/yangs)\
**Post date:** [November 4, 2018, 3:54pm UTC](https://discourse.processing.org/t/using-the-array-of-objects-resource-with-unique-objects/5182/1 "2018-11-04T15:54:24Z")

</div>

Hi all!

I’m stuck on something and I’m sure the answer is a simple one but I can’t seem to find the issue. Using the p5js [Array of Objects](https://p5js.org/examples/objects-array-of-objects.html), I’m essentially trying to exactly that, with squiggly objects instead of ellipses. However, whenever I think I’m putting the shape’s function where I think it should go, it only renders one shape, squiggling at width/2, height/2 (center of screen). I did comment out that line but it just rendered in the corner.

```auto
var bugs = []; // array of Jitter objects

function setup() {
  createCanvas(710, 400);
  // Create objects
  angleMode(DEGREES)
  for (var i=0; i<50; i++) {
    bugs.push(new Jitter());
  }
}

function draw() {
  background(50, 89, 100);
  for (var i=0; i<bugs.length; i++) {
    bugs[i].move();
    bugs[i].carrotDraw();
  }
}

// Jitter class
class Jitter {
  constructor(){
  this.x = random(width);
  this.y = random(height);
  this.diameter = random(10, 30);
  this.speed = 1;
  }

  move() {
    this.x += random(-this.speed, this.speed);
    this.y += random(-this.speed, this.speed);
  }

    carrotDraw(){
    noStroke()
    push()
    
    translate(width/2, height/2)
    rotate(45)
    fill(255,165,10)

    beginShape()
  
    for (let i = 0; i < 360; i++){
      this.x = cos(i - 90) * 80 * noise((frameCount * 100 + i) * 0.008)
      this.y = sin(i - 90) * 120;
      vertex(this.x, this.y)
    }
    endShape(CLOSE)
    pop()
}

  display() {
    ellipse(this.x, this.y, this.diameter, this.diameter);
    }   
  }

```

I know the variable names are a little off and there are still artifacts of the p5js solution but I was wondering if someone could point me in the right direction. Thank you!

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [November 4, 2018, 4:37pm UTC](https://discourse.processing.org/t/using-the-array-of-objects-resource-with-unique-objects/5182/2 "2018-11-04T16:37:44Z")

</div>

All the objects have the same x and y values each frame so they are all drawn in exactly the same place…

At this line `this.y = sin(i - 90) * 120;`, all the y values assigned are exactly the same for the same point on any of the carrots and at this line `this.x = cos(i - 90) * 80 * noise((frameCount * 100 + i) * 0.008)`, the `frameCount` doesn’t change between the drawing of each carrot so they get the same x values too.

You can fix this by having a unique noise seed/offset for each of the `Jitters` in the `bugs` array.  
e.g. `this.noiseOffset = random(10000);` and `this.x = cos(i - 90) * 80 * noise((frameCount * 100 + i) * 0.008, this.noiseOffset)`.

Also you are missing quite a few semi-colons!  
And make sure you’re code is properly indented (press shift + tab in the p5 web editor).

The carrots look pretty cool BTW!

Edit: Oh yeah (as @GoToLoop said), I forgot to mention you need to change `translate(width/2, height/2)` to `translate(this.x, this.y)` and use some other variables in the lines I first mentioned as otherwise you are overwriting the position of the carrot (see GoToLoop’s reply for a better answer to this part).

---

<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, 4:41pm UTC](https://discourse.processing.org/t/using-the-array-of-objects-resource-with-unique-objects/5182/3 "2018-11-04T16:41:13Z")

</div>

> [@TheWizardBear](#):
>
> Also you are missing quite a few semi-colons!

Semicolons are kinda optional in JS. 😛

> [@TheWizardBear](#):
>
> And make sure you’re code is properly indented.

[Beautifier.io](http://Beautifier.io)

---

<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, 4:46pm UTC](https://discourse.processing.org/t/using-the-array-of-objects-resource-with-unique-objects/5182/4 "2018-11-04T16:46:51Z")

</div>

I did these changes below to the sketch: 😇

- Added `frameRate(5);`
- Changed `for (var i=0; i<50; i++) {` to `for (let i = 0; i < 5; ++i) {`
- Inside Jitter::**carrotDraw()**, changed `translate(width/2, height/2)` to `translate(this.x, this.y)`
- And finally:

```auto
for (let i = 0; i < 360; i++) {
  this.x = cos(i - 90) * 80 * noise((frameCount * 100 + i) * 0.008)
  this.y = sin(i - 90) * 120;
  vertex(this.x, this.y)
}

```

to:

```auto
for (let i = 0; i < 360; i++){
  const x = cos(i - 90) * 80 * noise((frameCount * 100 + i) * 0.008)
  const y = sin(i - 90) * 120;
  vertex(x, y)
}

```

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [November 4, 2018, 4:46pm UTC](https://discourse.processing.org/t/using-the-array-of-objects-resource-with-unique-objects/5182/5 "2018-11-04T16:46:57Z")

</div>

> [@GoToLoop](#):
>
> Semicolons are kinda optional in JS. 😛

I didn’t know that – I guess that’s what happens when you start with Java.

> [@GoToLoop](#):
>
> [Beautifier.io](http://Beautifier.io)

Nice!

---

<div class="post-metadata">

**Author:** ![yangs](https://avatars.discourse-cdn.com/v4/letter/y/8c91f0/32.png) [@yangs](https://discourse.processing.org/u/yangs)\
**Post date:** [November 4, 2018, 7:29pm UTC](https://discourse.processing.org/t/using-the-array-of-objects-resource-with-unique-objects/5182/6 "2018-11-04T19:29:13Z")

</div>

Thanks for the suggestions! But doesn’t

```auto
vertex(x, y)

```

need to be

```auto
vertex(this.x, this.y)

```

Or just the .this in general? Otherwise, it won’t know what x and y are, which now I am getting an error that they are not defined.

---

<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:35pm UTC](https://discourse.processing.org/t/using-the-array-of-objects-resource-with-unique-objects/5182/7 "2018-11-04T19:35:30Z")

</div>

You’re using Jitter properties _x_ & _y_ inside method **carrotDraw()**'s `for` loop as if they were its local variables.

That’s why in my modified sketch I’ve declare them as variables inside the loop.

And properties _x_ & _y_ were passed as **translate()**'s arguments instead.

That is, properties _x_ & _y_ are now the origin coordinates for all the vertices. 🤓

---

<div class="post-metadata">

**Author:** ![yangs](https://avatars.discourse-cdn.com/v4/letter/y/8c91f0/32.png) [@yangs](https://discourse.processing.org/u/yangs)\
**Post date:** [November 4, 2018, 7:36pm UTC](https://discourse.processing.org/t/using-the-array-of-objects-resource-with-unique-objects/5182/8 "2018-11-04T19:36:40Z")

</div>

Thanks for the explanation – lexical this throws me for a loop at times!

---

<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:39pm UTC](https://discourse.processing.org/t/using-the-array-of-objects-resource-with-unique-objects/5182/9 "2018-11-04T19:39:37Z")

</div>

Yeah! _this.x_ & _this.y_ properties are not the same as _x_ & _y_ local variables (or function parameters too). 😳