Using the Array of Objects Resource with unique objects

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, 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.

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

function setup() {
  createCanvas(710, 400);
  // Create objects
  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++) {

// Jitter class
class Jitter {
  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);

    translate(width/2, height/2)

    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)

  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!

1 Like

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).

1 Like

Semicolons are kinda optional in JS. :stuck_out_tongue:

1 Like

I did these changes below to the sketch: :innocent:

  • 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:
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)


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)

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


Thanks for the suggestions! But doesn’t

vertex(x, y)

need to be

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.

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. :nerd_face:


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

Yeah! this.x & this.y properties are not the same as x & y local variables (or function parameters too). :flushed: