Hour of Code

Grades 5–6: be the DJ and code your own beat

This Hour of Code, students use p5.js to build a DJ deck out of shapes, then program each pad to play a sound and remix it into their own beat. Everything happens in one studio that runs free in the browser, with nothing to install.

About 9 Dots. 9 Dots is a nonprofit that brings computer science to every elementary school student, starting in kindergarten. We deliver a fully supported, standards-aligned CS curriculum, and teachers don’t need any prior coding experience.

For teachers

Leading this with a class? Get the facilitation guide

A lesson plan for running the DJ activity with your class: timing, discussion questions and tips for helping students who get stuck.

Open the teacher guide

What you will build

First you’ll build a working DJ deck with two turntables and four drum pads. Then it’s your turn: remix it with new pads, new sounds, lights, spinning discs and beats. Most of the hour is yours to create.

5 minGet set up in the studio
8 minStep 1: build the board with a rectangle
10 minStep 2: add the turntables and drum pads
12 minStep 3: meet your sound kit and code the drums
22 minStep 4: remix your deck
3 minStep 5: share and reflect
ASDF++++
Your deck after Step 3. The empty row is room for your remix.

Everything you need, in one studio

No tabs to flip between. The directions, your code and your deck all live on one screen, so students can read a step, type, press Play and hear the result.

Step-by-step directionsFlip through the steps with Back and Next. Each step shows what to type and why it works.
A built-in code editorReal p5.js code, with Play and Stop buttons and plain-language help when something goes wrong.
A live DJ deckThe deck runs right below the code, with all 24 sounds ready to use. Their work saves in the browser.
Before you startUse a laptop or Chromebook with a keyboard, because the DJ deck plays when students press keys. Turn the sound on, or bring headphones.
The DJ Studio: step-by-step directions on the left, the p5.js code editor on the right, and a running DJ deck with two turntables and four colored pads below the code The studio at Step 2: directions on the left, code on the right, and the deck running below.

What students practice

While they make music, students build real computer science habits. Each idea shows up in a short callout right when they use it.

SequencingThe order of steps matters
PatternsSpot what repeats
AbstractionOne name, many hidden steps
Events and conditionalsIf a key is pressed, then…
Loops and iterationBuild, test, change, repeat
DebuggingA bug is a clue
For the class

Show a few remixed decks to spark ideas

Play this on the projector before students start remixing. All three decks are built from the same starter code.
Need ideas? Three decks remixed from the same starter: DJ Nova got new colors, a name and a second row of pads. Ocean Beats moved everything into a new layout. Arcade Mix went neon with 12 pads. What will yours look like?

Questions to ask while it plays

  1. Which deck would you most want to play? Why?
  2. What is one thing each designer changed from the starter?
  3. Which change do you think took the most code?
  4. What would you change first on your own deck?
Students can follow the same ideas in Step 4 of the studio.

Want to learn more about 9 Dots?

Tell us a little about yourself and we will follow up with ways to bring computer science to your school or family.