Background change on Run

CS Discoveries
1

I have a student who is just starting her project and she wants her background to change every time she hits the run button. Is there a way to do this?

2

Hello @langilla1,

this is possible but it depends on what background your planning to set

Here’s a demo showing both random Solid & Image Based backgrounds

// Solid color demo
var rgb = [randomNumber(0, 255), randomNumber(0, 255), randomNumber(0, 255)];
/* 
    this works however only because the function tests for this case 
    youd have to use this otherwise 
    EX:
    background.apply(this, rgb);

    that would accurately fill in the arguments for a specific function
*/
background(rgb); // this would go in the main loop

// Image based backgrounds
var bgs = ["bg1", "bg2", "bg3", "bg4"]
/*
    random is able to choose from array values as well
    however this won't help the student to understand whats going on
    what it's doing is selecting an index from the length - 1 of the array
    EX:
    var bgImg = bgs[randomNumber(0, bgs.length - 1)];
    
    this is what the random assignment method is doing because it has a test case for it
*/
var bgImg = random(bgs); // you'd set the sprite to this to display it as a background
var bg = createSprite(200, 200);
bg.setAnimation(bgImg);

hopefully this clarifies it

Varrience

2 Likes
3

@langilla1,
Another way to do this using the blocks is to set a variable to a random number from 1 to the number of backgrounds and place this above the draw loop. Then, inside the drawLoop, if the number is 1 = setAnimation for the background to background 1. If the number is 2 = setAnimation for the background to the 2nd background etc. Here is a simple example.
Best wishes!
~Michelle

1 Like
4

Thank you -= that was SO helpful!

1 Like
5

I have a student who wants the background to change randomly throughout the game play. My coding experience is very limited and I can’t figure out the simplest way to do this. I like your idea of assigning a number to each possibility, but how do you get it to run during a game instead of picking the number each time the game is started.

6

@knorton,

this can be done in a variety of ways by viewing my demo earlier here then to make it change further in the code we can either track via a score or how much time has passed since the user started playing. To make this easier i am going to use a time based example to show you what i mean

var lastUpdated = World.seconds;
var color = randomColor();

function randomColor() {
    var rgb = [randomNumber(0, 255), randomNumber(0, 255), randomNumber(0, 255)];
    return rgb;
}

function draw() {
    if(lastUpdated + 10 < World.seconds) {
        lastUpdated = World.seconds;
        color = randomColor();
    }
    background(color);
}

in this example it should change the color every 10 seconds or so

7

I also used @varrience’s idea and modified the above project using a time based method. It uses a simple timer and when the timer hits 1, 2, or 3, the background sprite changes. I hope that helps.
~Michelle

1 Like