Random color but static

p5.js Coding Questions
1

I am just beginner and I am doing little bit exercise with p5.js. So please bear with me if my code is such a mess.

I made multiple gameboy with random flickering screen and now I want to make another random color for the skin as well but I wanted to make it static.

Random Gameboy

function setup() {
    createCanvas(600, 400);
    colorMode(HSB, 100, 100);
    rectMode(CENTER);
    noStroke();
    frameRate(40);
}


function gameboy() {
    //shadow
    fill(221, 30, 100);
    rect(70, 95, 66, 93, 5);
    
    //body
    fill(31, 87, 96);
    rect(78, 90, 66, 93, 5);
    fill(55, 80, 90);
    rect(87, 90, 66, 93, 5);
    
    //screen
    fill(240, 1, 25);
    rect(88, 70, 55, 44, 5);
    fill(random(100,260), 100, 100);
    rect(90, 70, 35, 33, 2);
    
    //screen white
    fill(random(200,357), 87, 92);
    ellipse(66, 66, 3, 3);
    
    //buttons
    fill(240, 1, 25);
    rect(75, 112, 6, 17, 5);
    rect(75, 112, 17, 6, 5);
    fill(240, 1, 25);
    ellipse(102, 114, 8, 8);
    ellipse(112, 109, 8, 8);

}


function draw() {
    background(224, 6, 100);
    for (x = 0; x <= width - 130; x += 130) {
        for (y = 0; y <= height - 130; y += 130) {
            push();
            translate(x, y);
            rotate(6);
            gameboy();
            pop();
        }
    }
}

Any idea?
Please help :slightly_smiling_face:

2 Likes
2

First off can I say beginner or not your code is very well organized. Also I like your gameboy design.

Trying to understand what you’re looking to do. Do you want a random color for each gameboy’s skin (assuming skin is the same as body in comments) or all the gameboys to be one random color? Either way your best option is to set a variable or multiple variables to random colors in setup and then reference it/them later. This will get rid of the flickering because you only calculate a random color once and then keep using it over and over again.

If you’re new to variables this might be a better explanation of them. This also.

Here’s the basic idea hopefully it’s enough to play around some more.

let skinColor; // let declares a variable that you can use later (can also use var but let is more modern)

function setup() {
  // All your other stuff
  skinColor = color(random(55, 200), 80, 90); // calculates a random color once
}

function gameboy() {
  // shadow stuff
  // body
  fill(31, 87, 96);
  rect(78, 90, 66, 93, 5);
  fill(skinColor); // we can give fill function a variable that has been assigned to a color
  rect(87, 90, 66, 93, 5);
  // other stuff
}

// draw everything the same
2 Likes
3

Very nice :slight_smile:

If you want random but not flickering you can just add

  randomSeed(1989);

after calling background. The number can be any number, and it will define the sequence of random numbers you get afterwards.

You can think of the random number generation as asking for random numbers from a list. If you don’t call randomSeed() then you keep asking for the next number on that infinite list. But if you call randomSeed() then you reset the list, so you get the same random values again.

You could have an integer (maybe called seed) which you change when you click the mouse, and use that integer inside randomSeed(). That way you would get a new random set when you click the mouse.

2 Likes
4

Thank you! I made small change in the code based on your suggestion. I am pretty happy with the result.

1 Like