Don't drop the beat!

Michelle Hirsch
/
Don't drop the beat!
on 9 Nov 2026
4
30
15
1
9968
game.m
function g = game()
%game Don't Drop the Beat: watch the beat, keep counting through the silence,
%   and hit the next downbeat.

g.init   = @initState;
g.update = @updateState;
g.render = @renderFrame;
end

function s = initState(ax)
ax.Color = [0.06 0.05 0.09];
G.ax = ax;
G.cone = pt(ax,[330 470 660 140],[600 600 235 235],[1 0.9 0.6]);
G.spot = pt(ax,[375 425 540 260],[600 600 235 235],[0.5 0.8 1]);
rc(ax,0,'Position',[0 0 800 235],'FaceColor',[0.11 0.09 0.13]);

% Band
s.bx = [110 215 585 690];
s.bandCol = [0.9 0.4 0.5; 0.4 0.7 0.95; 0.95 0.75 0.3; 0.55 0.85 0.55];
for k = 1:4
    G.body(k) = rc(ax,0.4);
    G.head(k) = rc(ax,1);
end

% Kick drum
G.rim   = rc(ax,1);
G.drum  = rc(ax,1);
G.count = tx(ax,400,345,60);

% Timeline
G.tl   = hgtransform(ax);
G.zone = pt(G.tl,[0 0 0 0],[128 128 172 172],[0.3 0.6 1]);
G.bars = ln(G.tl,'Color',[0.5 0.5 0.6],'LineWidth',1.5);
seg(G.tl,[60 740],[150 150],[0.35 0.35 0.45],2);
G.cue  = mk(G.tl,'o',11,[1 0.85 0.4],'none');
G.rest = mk(G.tl,'o',7,'none',[0.5 0.5 0.6]);
seg(G.tl,[740 740],[126 174],[1 0.85 0.2],4);
G.taps = mk(G.tl,'v',7,[0.6 0.9 1],'none');
G.ph   = ln(G.tl,'LineWidth',3,'XData',[0 0],'YData',[130 170]);

% Early/late meter: zone widths are fixed because the scale is 2x the
% GOOD tolerance.
G.mg = hgtransform(ax);
s.gcol = [1 0.85 0.2; 0.4 0.9 0.5; 0.45 0.7 1; 1 0.35 0.35];
zw = [150 90 44];
for k = 1:3
    rc(G.mg,0,'Position',[400-zw(k)/2 74 zw(k) 16],'FaceColor',s.gcol(4-k,:)*0.6);
end
seg(G.mg,[250 550],[82 82],[0.5 0.5 0.6],2);
tx(G.mg,215,82,11,'String','EARLY');
tx(G.mg,585,82,11,'String','LATE');
G.needle = ln(G.mg,'Color','w','LineWidth',4,'XData',[0 0],'YData',[66 98]);

% HUD
G.hud    = hgtransform(ax);
G.score  = tx(G.hud,20,575,16,'HorizontalAlignment','left');
G.info   = tx(G.hud,400,542,13);
G.title  = tx(ax,400,515,46);
G.detail = tx(ax,400,210,18);
G.hint   = tx(ax,400,28,14);
for k = 1:3
    G.stick(k) = seg(ax,[665 685]+25*k,[560 592],[0.85 0.65 0.4],5);
end

s.g = G;
s.clock = tic;
s.now = 0;
s.lastTap = -9;
s.best = 0;
s.offs = [];
s.lat = 0;
s = startRound(newGame(s));
s.mode = "title";
end

function s = newGame(s)
s.round = 1;
s.score = 0;
s.lives = 3;
s.over = false;
end

function s = startRound(s)
% N cue beats start on a downbeat, then K silent beats, then the target
% downbeat. Fewer cue beats and more silence both make it harder. N spans
% four consecutive values so exactly one completes the bar for any K.
r = s.round;
s.K = randi([max(1, r-3), min(15, r+1)]);
n = max(4, 9 - r);
s.N = n + mod(-n - s.K, 4);
lo = max(60, 84 - 4*r);
s.bpm = round(lo + rand*(min(180, 96 + 8*r) - lo));
s.p = 60/s.bpm;
s.lastCue = (s.N-1)*s.p;
s.target = (s.N + s.K)*s.p;
% Timing error grows with interval length, so tolerance scales with the
% silence.
s.tol = 0.06 + 0.025*(s.target - s.lastCue);
s.t0 = s.now + 1.2;
s.taps = [];
[s.tapR, s.err] = deal(NaN);
s.grade = 4;
s.resT = s.now;
s.mode = "play";
end

function s = updateState(s, ~, pressed)
% Rhythm needs wall-clock time; dt is clamped and would drift on slow
% frames. A press landed somewhere in the last frame, so use its midpoint.
t = toc(s.clock);
tap = (t + s.now)/2;
s.now = t;
if pressed
    s.lastTap = tap;
end
% Correct for display and input latency, measured from tap-along taps
rt = tap - s.t0 - s.lat;
if s.mode == "title" && pressed
    s = startRound(s);
elseif s.mode == "play"
    if pressed && rt > s.lastCue + s.p/2
        s = judge(s, rt);
    elseif pressed && rt > -s.p/2
        s.taps(end+1) = rt;
        % Offset from the nearest beat, before correction. Taps far from
        % any beat aren't attempts to sync, so they don't count.
        o = mod(rt + s.lat + s.p/2, s.p) - s.p/2;
        if abs(o) < s.p/3
            s.offs = [s.offs(max(1, end-15):end) o];
            s.lat = median(s.offs);
        end
    elseif t - s.t0 > s.target + s.p
        s = judge(s, NaN);
    end
elseif s.mode == "result" && pressed && t > s.resT + 0.5
    if s.over
        s = newGame(s);
        s.mode = "title";
    else
        s = startRound(s);
    end
end
end

function s = judge(s, rt)
s.tapR = rt;
s.err = rt - s.target;
s.resT = s.now;
s.mode = "result";
k = find(abs(s.err) <= s.tol*[0.3 0.6 1], 1);
if isempty(k)
    k = 4;
    s.lives = s.lives - 1;
else
    s.score = s.score + 100*(4-k)*s.round;
    s.round = s.round + 1;
end
s.grade = k;
s.best = max(s.best, s.score);
s.over = s.lives < 1;
end

function renderFrame(~, s)
G = s.g;
t = s.now;
rt = t - s.t0;
j = floor(rt/s.p);
res = s.mode == "result";
inGame = s.mode ~= "title";
gc = s.gcol(s.grade,:);
[pulse, groove, dark, flash, solo, slam] = deal(0);
tint = 1;
cnt = '';
ph = NaN;
detail = '';

if ~inGame
    groove = env(t, 2/3);
    hint = 'Watch the beat. When it drops out, keep counting and hit the next ONE.   Tap to start';
    if s.best > 0
        detail = sprintf('Best %d   ·   Latency %d ms', s.best, round(1000*s.lat));
    end
elseif ~res
    hint = 'Get ready...';
    if rt >= 0
        pulse = env(rt, s.p)*(j < s.N);
        groove = pulse;
        cnt = num2str(mod(j, 4) + 1);
        ph = min(rt/s.p, s.N - 1);
        hint = 'Tap along to calibrate';
    end
    if rt >= s.lastCue
        % The drop lands on the last beat so it adds no timing reference:
        % freeze the band mid-hit and hand the stage to the player.
        solo = 1;
        slam = exp(-6*(rt - s.lastCue));
        dark = 1;
        groove = 1;
        cnt = '';
        hint = 'Count it...   hit the ONE';
    end
else
    names = {'PERFECT','GREAT','GOOD','MISS'};
    cnt = names{s.grade};
    ph = s.tapR/s.p;
    ms = round(1000*s.err);
    w = {'late', 'early'};
    detail = sprintf('%d ms %s', abs(ms), w{(ms < 0) + 1});
    if isnan(ms)
        detail = 'Lost count';
    end
    if s.grade < 4
        % The band comes back in on the player's tap
        groove = env(rt - s.tapR, s.p);
        flash = exp(-3*(t - s.resT));
        hint = 'The band is back!   Tap for next round';
    else
        tint = 0.35;
        dark = 0.5;
        hint = 'Tap to try again';
    end
    if s.over
        hint = 'GAME OVER   ·   Tap to continue';
    end
end

% Stage lighting
G.ax.Color = [0.06 0.05 0.09]*(1 - 0.6*dark) + flash*[0.12 0.1 0.04] + 0.4*slam;
G.cone.FaceAlpha = (1 - solo)*max(0.02, 0.08 + 0.12*pulse - 0.06*dark + 0.3*flash);
G.cone.FaceColor = [1 0.9 0.6] - (tint < 1)*[0 0.6 0.4];
G.spot.FaceAlpha = solo*(0.16 + 0.3*slam);

% Band bobs on the beat and freezes in the silence
y = 240 + 12*groove;
for k = 1:4
    c = (s.bandCol(k,:)*tint + 0.3 - 0.3*tint)*(1 - 0.5*dark - 0.35*solo);
    G.body(k).Position = [s.bx(k)-28 y 56 90];
    G.head(k).Position = [s.bx(k)-20 y+96-6*groove 40 40];
    G.body(k).FaceColor = c;
    G.head(k).FaceColor = c;
end

% Drum responds to cue beats and to the player's own taps
hit = exp(-12*(t - s.lastTap));
r = 92*(1 + 0.07*max(pulse, 0.6*hit));
G.rim.Position = [400-r-13 345-r-13 2*r+26 2*r+26];
G.drum.Position = [400-r 345-r 2*r 2*r];
G.rim.FaceColor = min(1, [0.55 0.1 0.12]*(1 - 0.5*dark) + solo*[0 0.5 0.9] + hit*[0.45 0.6 0.5]);
G.drum.FaceColor = min(1, [0.92 0.87 0.76]*(1 - 0.5*dark) + solo*[0.2 0.3 0.4] + pulse*[0.08 0.13 0.2]);
G.count.String = cnt;
G.count.FontSize = 60 - 32*res;
G.count.Color = [0.25 0.08 0.1]*~res + 0.7*res*gc;

% Timeline of the round: cue beats, silent beats, bar lines, target
G.tl.Visible = inGame;
B = s.N + s.K;
dx = 680/B;
xi = 60 + (0:B)*dx;
xs = xi(1:4:B);
o = 150 + 0*xi;
G.cue.XData = xi(1:s.N);
G.cue.YData = o(1:s.N);
G.rest.XData = xi(s.N+1:B);
G.rest.YData = o(s.N+1:B);
G.cue.MarkerFaceColor = [1 0.85 0.4]*(1 - 0.6*solo);
G.rest.MarkerEdgeColor = [0.5 0.5 0.6] + solo*[0 0.3 0.4];
G.zone.XData = [xi(s.N) 740 740 xi(s.N)];
G.zone.FaceAlpha = 0.2*solo;
G.bars.XData = reshape([xs; xs; xs*NaN], 1, []);
G.bars.YData = repmat([135 165 NaN], 1, numel(xs));
G.taps.XData = 60 + s.taps/s.p*dx;
G.taps.YData = 176 + 0*s.taps;
G.ph.XData = 60 + [ph ph]*dx;
G.ph.Color = 1 - res*(1 - gc);

% Meter
G.mg.Visible = res;
% min() ignores NaN, so "lost count" pins the needle to LATE
G.needle.XData = 400 + 150*[1 1]*max(-1, min(1, s.err/(2*s.tol)));

% HUD
G.title.Visible = ~inGame || solo;
titles = {'DON''T DROP THE BEAT', 'YOUR TURN'};
G.title.String = titles{solo + 1};
G.title.Color = [1 0.85 0.3] + solo*[-0.45 -0.05 0.7];
% Drop below the tempo line during the solo
G.title.Position = [400 515-30*solo];
G.title.FontSize = 46 + 24*slam;
G.hud.Visible = inGame;
G.score.String = sprintf('ROUND %d   ·   SCORE %d', s.round, s.score);
G.info.String = sprintf('♩ = %d   ·   %d beats, then %d beat%s of silence', ...
    s.bpm, s.N, s.K, repmat('s', 1, s.K > 1));
G.detail.String = detail;
G.detail.Color = 1 - res*(1 - gc);
G.hint.String = hint;
for k = 1:3
    G.stick(k).Visible = k <= s.lives;
end
end

function v = env(t, p)
v = exp(-10*mod(t, p));
end

function h = tx(p, x, y, fs, varargin)
h = text(p, x, y, '', 'FontSize', fs, 'FontWeight', 'bold', ...
    'HorizontalAlignment', 'center', 'Color', [0.75 0.75 0.85], ...
    'HitTest', 'off', varargin{:});
end

function h = ln(p, varargin)
h = line('Parent', p, 'XData', NaN, 'YData', NaN, 'HitTest', 'off', varargin{:});
end

function h = seg(p, x, y, c, w)
h = ln(p, 'XData', x, 'YData', y, 'Color', c, 'LineWidth', w);
end

function h = pt(p, x, y, c)
h = patch('Parent', p, 'XData', x, 'YData', y, 'FaceColor', c, ...
    'EdgeColor', 'none', 'FaceAlpha', 0, 'HitTest', 'off');
end

function h = mk(p, m, sz, fc, ec)
h = ln(p, 'LineStyle', 'none', 'Marker', m, 'MarkerSize', sz, ...
    'MarkerFaceColor', fc, 'MarkerEdgeColor', ec);
end

function h = rc(p, c, varargin)
h = rectangle('Parent', p, 'Curvature', c, 'EdgeColor', 'none', 'HitTest', 'off', varargin{:});
end
Play Game
Preview

Play Game opens this in MATLAB Drive. Click Run this app there to play.