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

p5.js Beginners
1 
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 =)

2

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

1 Like
3

(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

1 Like
4

just tried to run it online on 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

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)

:cherry_blossom: 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:

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

5

this works

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);
}
1 Like
6

In general the p5*js API is only ready to use when 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:

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.
1 Like
7

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

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:

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

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

9
  • 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.
1 Like