# Why doesn't an object return a random() value?

**URL:** <https://discourse.processing.org/t/why-doesnt-an-object-return-a-random-value/27448>\
**Category:** Beginners\
**Created:** [January 28, 2021, 10:16pm UTC](https://discourse.processing.org/t/why-doesnt-an-object-return-a-random-value/27448 "2021-01-28T22:16:48Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![vettefreak](https://avatars.discourse-cdn.com/v4/letter/v/85e7bf/32.png) [@vettefreak](https://discourse.processing.org/u/vettefreak)\
**Post date:** [January 28, 2021, 10:16pm UTC](https://discourse.processing.org/t/why-doesnt-an-object-return-a-random-value/27448/1 "2021-01-28T22:16:48Z")

</div>

```auto
const randomizer = {
    "rgb1": random(0, 255),
}

draw = () => {
    let y = random(0, height);
    let x = random(0, width);

    noStroke();
    fill(randomizer["rgb1"], randomizer["rgb1"], randomizer["rgb1"]);
    ellipse(x, y, 15, 50);
}

```

I’ve made a program that draws ellipses in random positions. However, I cannot understand why the `randomizer` object is not returning a value, even more so no ellipses are being drawn on the canvas. With that said, the program worked when I defined and used a variable with `random(0, 255)` instead.

Thanks, guys! looking forward to your thoughts =)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 28, 2021, 10:29pm UTC](https://discourse.processing.org/t/why-doesnt-an-object-return-a-random-value/27448/2 "2021-01-28T22:29:18Z")

</div>

> [@vettefreak](#):
>
> ` "rgb1": random(0, 255),`

I think this line is executed only once and not throughout

Hence “rgb1” stays the initial value all the time (value should be between 0,255 but never change)

(since you use the same value for fill() three times, it should always be a gray color…?)

use `fill ( random(0, 255), random(0, 255), random(0, 255) );`

---

<div class="post-metadata">

**Author:** ![vettefreak](https://avatars.discourse-cdn.com/v4/letter/v/85e7bf/32.png) [@vettefreak](https://discourse.processing.org/u/vettefreak)\
**Post date:** [January 28, 2021, 10:36pm UTC](https://discourse.processing.org/t/why-doesnt-an-object-return-a-random-value/27448/3 "2021-01-28T22:36:55Z")

</div>

> (since you use the same value for fill() three times, it should always be a gray color…?)

That’s what I thought. Although, it’s not drawing any ellipses let alone filling them with colors. I’ll just keep it simple for now. Thanks for your input, though

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 28, 2021, 10:41pm UTC](https://discourse.processing.org/t/why-doesnt-an-object-return-a-random-value/27448/4 "2021-01-28T22:41:27Z")

</div>

just tried to run it online on [https://editor.p5js.org/](https://editor.p5js.org/) and console said:

> Did you just try to use p5.js’s random() function? If so, you may want to move it into your sketch’s setup() function.
> 
> For more details, see: [p5.js overview · processing/p5.js Wiki · GitHub](https://github.com/processing/p5.js/wiki/p5.js-overview#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup)

this means rgb1 was 0 probably… so black ellipse, you don’t see anything

**Full console:**

sketch.js

```
warning in line10 :['rgb1'] is better written in dot notation.
warning in line10 :['rgb1'] is better written in dot notation.
warning in line10 :['rgb1'] is better written in dot notation.

```

Current lineline 12  
Console  
ReferenceError: random is not defined (sketch: line 2)

🌸 p5.js says: There’s an error due to “random” not being defined in the current scope (on line 72 in about:srcdoc [about:srcdoc:72:5]).

If you have defined it in your code, you should check its scope, spelling, and letter-casing (JavaScript is case-sensitive). For more:

> **[examples | p5.js](https://p5js.org/examples/data-variable-scope.html)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

> **[ReferenceError: "x" is not defined - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_Defined)**
>
> The JavaScript exception "variable is not defined" occurs when there is a
> non-existent variable referenced somewhere.

Did you just try to use p5.js’s random() function? If so, you may want to move it into your sketch’s setup() function.

For more details, see: [p5.js overview · processing/p5.js Wiki · GitHub](https://github.com/processing/p5.js/wiki/p5.js-overview#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 28, 2021, 10:42pm UTC](https://discourse.processing.org/t/why-doesnt-an-object-return-a-random-value/27448/5 "2021-01-28T22:42:52Z")

</div>

this works

```auto
const randomizer = {
    "rgb1": 33
}

draw = () => {
    let y = random(0, height);
    let x = random(0, width);

    noStroke();
    fill(randomizer["rgb1"], randomizer["rgb1"], randomizer["rgb1"]);
    ellipse(x, y, 15, 50);
}

```

---

<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 29, 2021, 6:32am UTC](https://discourse.processing.org/t/why-doesnt-an-object-return-a-random-value/27448/6 "2021-01-29T06:32:00Z")

</div>

In general the p5\*js API is only ready to use when [**preload()**](https://p5js.org/reference/#/p5/preload) is called back.

Invoking p5 methods, such as **random()**, when declaring global variables would fail, b/c they’re still unavailable in the global context.

If you think you need to access p5 properties before callback **preload()** you can use the hack trick from the sketch link below:

> **[Sierpinski Pentagon \[p5.js\] - OpenProcessing](https://OpenProcessing.org/sketch/955445)**

```auto
window.mocha = 'Hack to block p5.js auto global instantiation.';
new p5; // Prematurely instantiates p5.js so its props are available now.
window._setupDone = undefined; // Disables duplicate instantiation warn.

```

---

<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 29, 2021, 6:55am UTC](https://discourse.processing.org/t/why-doesnt-an-object-return-a-random-value/27448/7 "2021-01-29T06:55:04Z")

</div>

> [@vettefreak](#):
>
> ```auto
> const randomizer = {
> "rgb1": random(0, 255),
> }
> 
> ```

You’re better off creating a proper function for it:

```auto
function randomGrayColor() {
  return color(random(0o400)); // random range from 0 to 255
}

```

If your intention is to have multiple similar methods you should create a proper class for them instead:

```auto
class RandomColor {
  constructor(p = p5.instance) {
    this.p = p;
  }

  gray() { // randomized range from 0 to 255:
    return this.p.color(this.p.random(0o400));
  }

  colorful() { // randomized range from 0 to 4095:
    const { p } = this;
    return p.color('#' + p.hex(~~p.random(0x1000), 3));
  }
}

```

---

<div class="post-metadata">

**Author:** ![vettefreak](https://avatars.discourse-cdn.com/v4/letter/v/85e7bf/32.png) [@vettefreak](https://discourse.processing.org/u/vettefreak)\
**Post date:** [January 29, 2021, 12:26pm UTC](https://discourse.processing.org/t/why-doesnt-an-object-return-a-random-value/27448/8 "2021-01-29T12:26:38Z")

</div>

Thanks for the insight! Can you elaborate on how preload() plays a role here?

---

<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 29, 2021, 12:35pm UTC](https://discourse.processing.org/t/why-doesnt-an-object-return-a-random-value/27448/9 "2021-01-29T12:35:23Z")

</div>

- **preload()** is the 1st function that p5\*js calls back.
- Therefore it’s also the moment all the library becomes globally available to access.
- The only callback in your posted sketch is **draw()**.
- So that’s the point you can start accessing p5 properties.