# Properties in the Composite Objects EggRing Example

**URL:** <https://discourse.processing.org/t/properties-in-the-composite-objects-eggring-example/26678>\
**Category:** Coding Questions\
**Created:** [January 1, 2021, 9:21pm UTC](https://discourse.processing.org/t/properties-in-the-composite-objects-eggring-example/26678 "2021-01-01T21:21:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [January 1, 2021, 9:21pm UTC](https://discourse.processing.org/t/properties-in-the-composite-objects-eggring-example/26678/1 "2021-01-01T21:21:23Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0938c501f10f8edb92badad37316266b41f09e65.png)

It can also be found online here: [Composite Objects](https://p5js.org/examples/objects-composite-objects.html).

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

```auto
    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:

```auto
    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:

```auto
    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.

---

<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:** [January 3, 2021, 5:32am UTC](https://discourse.processing.org/t/properties-in-the-composite-objects-eggring-example/26678/2 "2021-01-03T05:32:06Z")

</div>

> [@javagar](#):
>
> … attempt to access and create an _on_ property for the global **circle()** function?

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

> [@javagar](#):
>
> Perhaps this was intended instead:

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.

> [@javagar](#):
>
> Would it be better if the call to the **push()** function were moved to the first line in that method,

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

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [January 3, 2021, 8:35pm UTC](https://discourse.processing.org/t/properties-in-the-composite-objects-eggring-example/26678/3 "2021-01-03T20:35:42Z")

</div>

> [@GoToLoop](#):
>
> So that whole conditional assignment, even after your fix, seems pointless.

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.

---

<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:** [January 3, 2021, 8:45pm UTC](https://discourse.processing.org/t/properties-in-the-composite-objects-eggring-example/26678/4 "2021-01-03T20:45:19Z")

</div>

> [@javagar](#):
>
> , in fact the body of that `if` block never executes, because `circle.on` is always left `undefined`,

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

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [January 3, 2021, 8:57pm UTC](https://discourse.processing.org/t/properties-in-the-composite-objects-eggring-example/26678/5 "2021-01-03T20:57:21Z")

</div>

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:

```auto
  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.

---

<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:** [January 3, 2021, 9:10pm UTC](https://discourse.processing.org/t/properties-in-the-composite-objects-eggring-example/26678/6 "2021-01-03T21:10:08Z")

</div>

> [@javagar](#):
>
> When I run the program, a series of `undefined` appears as output in the JavaScript console.

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

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

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [January 3, 2021, 9:15pm UTC](https://discourse.processing.org/t/properties-in-the-composite-objects-eggring-example/26678/7 "2021-01-03T21:15:46Z")

</div>

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.