Using the Array of Objects Resource with unique objects

p5.js Coding Questions
1

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
  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!

1 Like
2

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
3

Semicolons are kinda optional in JS. :stuck_out_tongue:

Beautifier.io

1 Like
4

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

to:

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)
}
3 Likes
5

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

Nice!

6

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.

7

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:

2 Likes
8

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

9

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