Properties in the Composite Objects EggRing Example

p5.js Coding Questions
1

This concerns the p5.js class EggRing example that is accessible through the Processing Development Environment menu via File > Examples… > Objects > ex05_Composite_Objects.
Screen Shot 2021-01-01 at 3.21.30 PM

It can also be found online here: Composite Objects.

I have been experimenting with modifying the code from that script for practice. It is actually a great example for practicing with objects, but it does contain some details, discussed below, that I don’t understand, maybe because I am still a beginner.

The transmit method of class EggRing contains this conditional code block that seems to be related to its working with instances of class Ring.:

    if (circle.on == false) {
      circle.on = true;
    }

As written, doesn’t that code attempt to access and create an on property for the global circle function? Perhaps this was intended instead:

    if (this.circle.on == false) {
      this.circle.on = true;
    }

The class Ring does have an on property that is created in its constructor. If that property needs to be accessed and manipulated externally, maybe that class should contain methods for these purposes.

The class Egg contains calls to the push and a pop functions in its display() method so that it can clean up after changes to the environment made by these function calls:

    translate(this.x, this.y);
    rotate(this.tilt);
    scale(this.scalar);

Would it be better if the call to the push function were moved to the first line in that method, so that the eventual call to pop would also clean up after the calls to the noStroke and fill functions? Perhaps, for the purpose of cleaning up afterwards, calls to the push and pop functions could also be added to the beginning and end, respectively, of the display method of class Ring.

Opinions and advice regarding the above would be greatly appreciated.

2

In JS even functions are objects on which we can add, modify and delete properties on-the-fly.

For sure! B/c adding on to function circle() it would act as a static instead of an instance property.

However the instance property Ring::on already begins as true.

So that whole conditional assignment, even after your fix, seems pointless.

Ideally yes. But Ring::display() own method version got explicitly color calls that wouldn’t make any difference whether push() is on the very top or not within Egg::display().

2 Likes
3

Yes, in fact the body of that if block never executes, because circle.on is always left undefined, never having been assigned any value outside the block.

Thanks for your insights and advice.

4
  • Actually it does run! The expression circle.on == false evaluates as true!
  • The reason why is b/c undefined is considered a “falsy” value in JS.
  • Particularly I avoid comparing variables w/ either true or false.
  • I just go w/ if (circle.on) for true check & if (!circle.on) for false check.
  • For strict type comparison go w/ triple === or !== operators: if (circle.on === false).
5

I added a print statement to the example code available via the Processing Development Environment menu, so that the transmit method of EggRing is as follows:

  transmit() {
    this.ovoid.wobble();
    this.ovoid.display();
    this.circle.grow();
    this.circle.display();
    if (circle.on == false) {
      circle.on = true;
    }
    print(circle.on);
  }

When I run the program, a series of undefined appears as output in the JavaScript console.

6

Oopsie, you’re right! Even though undefined is a “falsy” value, comparing it to anything other than another undefined value or a null value will always result in false! :clown_face:

Sorry for the wrong info but, as I had confessed, I can’t even remember the last time I’ve tried to use an explicit true or false comparison. :woozy_face:

1 Like
7

Yeah, the explicit comparison they use there is unusual. That conditional block seems likely a no-longer-needed leftover from when they were developing the example.