Step 05 min
Get set up
This is your studio. Directions are on the left, your code is on the right, and your DJ deck plays below the code.
Run your code
Press Play to run your code and Stop to stop it. Changed something? Press Play again. You can also press Ctrl+Enter (Cmd+Enter on a Mac) while you type.
For now, your deck just draws what your code says. Starting in Step 3, it will also play sounds when you press keys, and you’ll get a quick reminder of how to do that.
Your code so far
setup runs once when you press Play. draw runs again and again. Lines that start with // are notes for people, and they show where each step’s code goes.
BULBdraw repeats about 60 times every second. Code that repeats is called a loop, and it’s how your deck can react the instant you press a key.
Your code saves itself in this browser. To keep a copy somewhere else, press Copy code above the editor and paste it into the p5.js editor.
Step 18 min
Build the board
Predict: read rect(10, 10, 380, 340, 20) below. Where will the rectangle show up, and how big will it be?
Add these lines inside draw, right under background(240);, at the STEP 1 comment:
fill(55); // dark gray
noStroke(); // no outline
rect(10, 10, 380, 340, 20);
Here’s where it goes
function draw() {
background(240); // keep first
// STEP 1: the board
fill(55);
noStroke();
rect(10, 10, 380, 340, 20);
}
Keep background(240); on the first line. It paints the whole canvas, so if your board came before it, the background would cover your board.
10x: how far from the left edge it starts
10y: how far down from the top it starts
380width: how wide it is
340height: how tall it is
20corner radius: how rounded the corners are
Try it: change fill(55) to fill('purple'), then change 20 to 60. Press Play after each change. What happened to the corners?
How does fill work?
fill picks the paint color for the shapes you draw after it, like dipping your brush before you paint. The color stays until you change it.
fill(55)one number makes a gray, from 0 (black) to 255 (white)
fill('purple')a color name in quotes
fill(255, 0, 0)red, green and blue light. This one is bright red.
BULBThe computer reads your code from top to bottom. That’s why fill comes before rect: you pick the paint, then you paint. Doing steps in the right order is called sequencing.
Step 210 min
Add turntables and drum pads
2a · Add the turntables
Turntables are circles. Add these inside draw, at the STEP 2a comment:
fill(95);
circle(100, 95, 110); // left disc
circle(300, 95, 110); // right disc
fill('dodgerblue');
circle(100, 95, 36); // left label
fill('tomato');
circle(300, 95, 36); // right label
100x of the circle’s center
95y of the circle’s center
110diameter: how wide it is, edge to edge
Watch out: a circle is placed by its center, but a rectangle is placed by its top-left corner.
2b · Add the drum pads
Pads are squares. Add these inside draw, at the STEP 2b comment:
fill('dodgerblue');
square(40, 170, 60, 8); // pad A
fill('tomato');
square(130, 170, 60, 8); // pad S
fill('gold');
square(220, 170, 60, 8); // pad D
fill('limegreen');
square(310, 170, 60, 8); // pad FLook closer: which number changes from pad to pad, and by how much? Which numbers stay the same?
Try it: make the turntables bigger by changing 110 to 130. Then swap the pad colors for your own.
BULBEach pad sits 90 pixels right of the one before it. Spotting patterns like this helps coders write code faster and catch mistakes: if one pad is out of line, the pattern breaks.
Step 312 min
Sounds and drum keys
First meet the sounds in your kit. Then write the code that plays them when you press a key.
Meet your sound kit
Your studio comes with a sound kit. To play a sound, write its name followed by (), like kick();. That’s called calling a function: it means “do this now.”
Akick()A deep, round thump
Ssnare()A sharp crack with fizz
Dclap()A quick hand clap
Fhihat()A tiny, tight “tss”
Want more? There are 20 more sounds, from crash() to powerUp(), for your remix in Step 4. Capital letters matter: powerUp() works, powerup() doesn’t.
BULBkick() is one short word, but behind it are about ten lines of sound code you never have to see. Hiding the details behind a simple name is called abstraction, like flipping a light switch without thinking about the wiring.
Code your drum keys
A conditional says “if this happens, then do that.” Add this below draw, at the STEP 3 comment:
function keyPressed() {
if (key === 'a') {
kick();
}
}
ifstarts the rule: check whether something is true
key === 'a'“was the key pressed the letter a?”
{ }holds what to do when the answer is yes
Test it:
1Press Play→2Click your deck→3Press A
Your keys only reach the deck after you click it. The light next to your deck turns green when it’s listening. If you click back into your code to type, click the deck again before you play.
Now add the other three drums with else if, which means “if not, check this next”:
function keyPressed() {
if (key === 'a') {
kick();
} else if (key === 's') {
snare();
} else if (key === 'd') {
clap();
} else if (key === 'f') {
hihat();
}
}Watch your curly braces. Every else if lives inside keyPressed. The very last } closes the whole function, so keep every rule above it. If sounds suddenly stop, count your braces: every { needs a }.
Predict: what will happen if you press G? Try it. Why do you think that happened?
BULBYour code waits for something to happen, a key press, then decides what to do. Reacting to events with conditionals is how games, apps and even elevator buttons work.
Step 422 min
Remix your deck
Now it’s your deck. From here on, the code is a starting point, not an answer. Mix ideas together and make something nobody else has.
BULBBuild a little, test it, change it, repeat. Coders and DJs both work this way, and it’s called iteration. Press Play often!
Plan your remix: what’s your deck’s vibe? What new sound do you want, and which key will play it? What will you change first?
Need ideas?Three decks remixed from this 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?
Quick remixes
Theme your colorsPick a theme like space, ocean or arcade and recolor your deck to match. Try background(0) for a night look.
Swap a soundChange snare(); to crash();, or lead(); to coin();. Make a mystery pad nobody can guess.
Two sounds, one keyPut two sounds inside one rule, like kick(); and clap();. Which pair sounds best together?
Name your deckWrite your DJ name on the board. Put this code inside draw, at the REMIX comment, below your board and pads. Change 'DJ Nova' to your own name.
fill('hotpink');
textSize(24);
textAlign(CENTER);
text('DJ Nova', 200, 40);
Move things aroundChange the x and y numbers to design your own layout. Where would a real DJ want the pads and turntables?
Compose a beatMake up a 4-beat pattern, like A A S D, and write it down. Can a partner read it and play it back?
Remix with code
Fill the empty row with new padsDraw new pads and give them keys and sounds.
1. Draw a pad inside draw, at the REMIX comment:
fill('______');
square(40, ___, 60, 8);2. Make it play inside keyPressed, after your last rule and above the two closing braces:
} else if (key === '___') {
______();Need a hint for the y number?
Your drum pads use y = 170 and are 60 tall, so they end at 230. Leave a small gap and try 250. Move each new pad 90 to the right: 40, 130, 220, 310.
Stay inside keyPressed. Don’t start a second function keyPressed(). p5 only uses one.
Light up the padsMake a pad flash while its key is held down.
Replace pad A’s fill line with this:
if (keyIsDown('a')) {
fill('white'); // lit up
} else {
fill('dodgerblue'); // normal
}
square(40, 170, 60, 8);Got pad A working? Copy the pattern to your other pads.
Spin both discsMake the turntables spin like real records.
1. At the REMIX variables comment at the very top:
2. Inside draw, at the REMIX comment:
angle = angle + 0.05; // turn a little each frame
stroke('white');
strokeWeight(3);
push(); // LEFT disc
translate(100, 95);
rotate(angle);
line(0, 0, 45, 0);
pop();
push(); // RIGHT disc
translate(300, 95);
rotate(-angle); // minus spins the other way
line(0, 0, 45, 0);
pop();
noStroke();Try it: change 0.05 to 0.2. Remove the minus sign.
Keep the beat goingPress the spacebar for a steady kick to play over.
1. At the REMIX variables comment:
2. Inside keyPressed, after your last rule and above the two closing braces:
} else if (key === ' ') {
beatOn = !beatOn;3. Inside draw, at the REMIX comment:
if (beatOn && frameCount % 30 === 0) {
kick();
}BULBbeatOn is a variable: a labeled box that remembers something while your program runs. Here it remembers “is the beat on?”
Invent your own soundBuild a sound from a pitch, a wave and a length.
playNote(440, 'square', 0.3, 0.5);
440pitch: bigger is higher
'square'wave: 'sine', 'triangle', 'square' or 'sawtooth'
0.3seconds: how long it lasts
0.5loudness: 0 to 1
Pitch cheat sheet: C 262, D 294, E 330, F 349, G 392, A 440, B 494, high C 523.
Step 53 min
Share and reflect
Play it: play your best 10-second mix for a partner. Ask them: what’s one thing you’d add to my deck?
Reflect
- Which idea did you use most: sequencing, patterns, abstraction, events or loops?
- What was one bug you fixed? How did you find it?
- What would you add with 10 more minutes?
BULBEvery coder makes mistakes, even experts. Finding and fixing them is called debugging. A bug isn’t a failure, it’s a clue.
Teachers: for a quick class share, invite two or three students to play their deck while the class guesses their theme.
