Gumball Room Sign

Amazing World of Gumball banner

From The Amazing World of Gumball!

Make sure everyone knows whose room it is, even at night with this Amazing World of Gumball glow-in-the-dark Room Sign that alerts you when it hears a noise outside your door.

Completed Room Sign project

Prepare

This project

Level: Easy
Duration: 30 minutes
Flipgrid: https://flipgrid.com/bf121bf3

Materials

Collect the materials in the list before starting your project Make.

Project materials

Make

You can either print out the image below, or draw your own rainbow on the chalkboard.

Gumball Logo

Step 2: Cut out the Rainbow

If you’ve printed out the Rainbow, then using scissors, cut out The Amazing World of Gumball logo.

Cutting out the printed Gumball logo

Step 3: Tape Rainbow onto Chalkboard

Tape The Amazing World of Gumball logo onto the chalkboard. Or draw your own Gumball Rainbow logo on the chalkboard.

Gumball logo taped to the chalkboard piece

Step 4: Attach the Adafruit Circuit Playground Express

Use a small piece of tape, roll it inside out to form a loop so that the sticky side is on the outside. Attach the tape to the back of the Adafruit Circuit Playground Express board and affix it to your Chalkboard.

Back of the board with tape on in before attachment

Make sure the Adafruit Circuit Playground Express is placed so that the battery connector is at the bottom, to make it easier to connect the battery pack.

Gumball logo taped to the chalkboard piece

Step 5: Attach the Battery pack

Insert the batteries into the battery pack.

3 batteries placed inside battery holder

Using the wire, connect the battery pack to the Adafruit Circuit Playground Express.

Battery pack closed and connected to board

Use a piece of tape to attach the battery pack to the back of the chalkboard. Note – if your battery pack includes a clip on the back, you may consider removing that. Make sure you don’t tape over the On/Off switch on your battery pack.

Battery pack taped onto the back of chalkboard piece

Step 6: Write your name and decorate Chalkboard

Using the chalk markers, write your name on your Room Sign.

Name written with a chalk marker on the chalkboard

Step 7: Decorate with jewels, stickers or your favorite Gumball characters!

More decorations on the chalkboard piece

Complete!

Congratulations! You have made your own Gumball Room Sign!

Move on to the next section to code your Room Sign.

Code

Code your Room Sign to play a sound and show an animation when you clap, snap or make a loud sound.

Concepts

  • Sound Sensor
  • Animation
  • Buttons

Blocks

input.onLoudSound(function () {})
music.magicWand.play()
light.showAnimation(light.rainbowAnimation, 500)
input.buttonA.onEvent(ButtonEvent.Click, function () {})
light.clear()

Step 1: Add an On Loud Sound block

Open MakeCode in your web browser.

  • Click on New Project

New project button on Home page

  • Name your Project as RoomSign (note – you don’t need to click the Save button, just type the name).

Name of project in the project name box

  • From the ||input:INPUT|| Toolbox drawer, drag out an ||input:on loud sound|| block onto the Workspace (note – you can ignore or delete the existing ||loops:forever|| block on the workspace. Delete blocks by dragging them back over to the Toolbox menu).

'on loud sound' block in the workspace

Step 2: Play a Sound

  • From the ||music:MUSIC|| Toolbox drawer, drag out a ||music:play sound|| block to the coding Workspace, and drop it into the ||input:on loud sound|| block.
  • In the ||music:play sound|| block, click on the drop-down menu to select a sound of your choice.

'play sound' block sound choices

Step 3: Show an animation

  • From the ||light:LIGHT|| Toolbox drawer, drag out a ||light:show animation|| block to the coding Workspace, and drop it into the ||input:on loud sound|| block, right after the ||music:play sound|| block.
  • In the ||light:show animation|| block, click on the animation drop-down menu to select your preferred animation.

'show animation' block choices

  • In the ||light:show animation|| block, click on the number drop-down menu and select 2 seconds (2000 milliseconds).

Choose the animation play time

Step 4: Turn off lights when you press a button

  • From the ||input:INPUT|| Toolbox drawer, drag out an ||input:on button A click|| block onto the Workspace.

'on button A click' block on workspace

From the ||light:LIGHT|| Toolbox drawer, scroll down to find the ||light:clear|| block and drag out onto the Workspace, and drop into the ||input:on button A click|| block.

input.buttonA.onEvent(ButtonEvent.Click, function () {
    light.clear()
})
input.onLoudSound(function () {
    music.magicWand.play()
    light.showAnimation(light.rainbowAnimation, 500)
})

Step 5: Download

Test your program in the Simulator by changing the volume dial and clicking on button A.

Simulator running the completed program

Once you’re happy with your program, click the Download button and follow the instructions to download the code to your Adafruit Circuit Playground Express.