# 10 boxes with random colors in specific locations

**URL:** <https://discourse.processing.org/t/10-boxes-with-random-colors-in-specific-locations/14227>\
**Category:** Coding Questions\
**Created:** [September 27, 2019, 3:00am UTC](https://discourse.processing.org/t/10-boxes-with-random-colors-in-specific-locations/14227 "2019-09-27T03:00:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![van326](https://avatars.discourse-cdn.com/v4/letter/v/a6a055/32.png) [@van326](https://discourse.processing.org/u/van326)\
**Post date:** [September 27, 2019, 3:00am UTC](https://discourse.processing.org/t/10-boxes-with-random-colors-in-specific-locations/14227/1 "2019-09-27T03:00:40Z")

</div>

I have finally started to understand classes and arrays (somewhat)! In the link I provided, I was trying to make at least 10 boxes with random colors in specific locations. So far, I think they are all showing, but I am lost on what I need to do for each box to be visible. Do I need to add another line of code, or is what I currently have just organized incorrectly? Thank you!!

(I appreciate how helpful everyone is in this community)

[https://editor.p5js.org/van326/sketches/mHaCefLba](https://editor.p5js.org/van326/sketches/mHaCefLba)

https://editor.p5js.org/van326/sketches/mHaCefLba

---

<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:** [September 27, 2019, 3:21am UTC](https://discourse.processing.org/t/10-boxes-with-random-colors-in-specific-locations/14227/2 "2019-09-27T03:21:21Z")

</div>

> [@van326](#):
>
> , but I am lost on what I need to do for each box to be visible.

```auto
class Max {
  constructor(x, y, d=100) {
    this.d = abs(d);
    this.x = typeof x == 'number'? abs(x) : random(width - this.d);
    this.y = typeof y == 'number'? abs(y) : random(height - this.d);
    this.c = color('#' + hex(~~random(0x1000), 3));
  }
  
  display() {
    fill(this.c).square(this.x, this.y, this.d);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [September 28, 2019, 1:26pm UTC](https://discourse.processing.org/t/10-boxes-with-random-colors-in-specific-locations/14227/3 "2019-09-28T13:26:15Z")

</div>

Hey there Van. You’re close, just a few lines you have to adjust.

In the setup you’re creating 10 instances of the class Max by using a for loop. The problem is that all of these get placed on top of each other, because they all get the x & y values of 100 inside the class’ constructor. You could solve this by initialising random values to x and y within the constructor (as GoToLoop shows in his code).

Another solution is to generate random numbers within setup (where you generate the instances) and pass these to the class. The video [Constructor Arguments with Classes in JavaScript](https://www.youtube.com/watch?v=rHiSsgFRgx4) by Daniel shows how this is done. I think it’s fruitful to understand this approach if you want to get a basic understanding of classes.

Hope that helps!

---

<div class="post-metadata">

**Author:** ![van326](https://avatars.discourse-cdn.com/v4/letter/v/a6a055/32.png) [@van326](https://discourse.processing.org/u/van326)\
**Post date:** [September 30, 2019, 2:57am UTC](https://discourse.processing.org/t/10-boxes-with-random-colors-in-specific-locations/14227/4 "2019-09-30T02:57:46Z")

</div>

Thanks for sharing! What does the “typeof” and “abs” represent in this situation?

---

<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:** [September 30, 2019, 3:41am UTC](https://discourse.processing.org/t/10-boxes-with-random-colors-in-specific-locations/14227/5 "2019-09-30T03:41:00Z")

</div>

**abs()** -\> [p5js.org/reference/#/p5/abs](http://p5js.org/reference/#/p5/abs)  
Just a safeguard for some remote chance negative values are passed to Max’s constructor. 🦺

`typeof`:

> **[typeof](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof)**
>
> The typeof operator returns a string indicating the type of the unevaluated operand.

It checks out whether numbers were passed and stores those values as property coordinates _x_ & _y_. 🔢

In case those aren’t numbers (or even when nothing is passed like you actually do -\> `max[i] = new Max();`), random values are chosen for coordinates _x_ & _y_ within the canvas’ _width_ & _height_: 🤓

```auto
this.x = typeof x == 'number'? abs(x) : random(width - this.d);
this.y = typeof y == 'number'? abs(y) : random(height - this.d);

```

Also take a look at the conditional operator `?:` in order to fully understand the 2 statements above: ❔

> **[Conditional (ternary) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)**
>
> The conditional (ternary) operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if statement.