/** * THREAD RACE * ----------------------------------------------------------------------------- * Concurrency (one core, time-sliced) against parallelism (four cores, at once). * The stripes on screen are emitted by an actual round-robin scheduler, so the * interleaving pattern is derived, never drawn by hand. * * Techniques worth stealing: * - `roundRobin()` returns a segment list; the lane, the per-task progress bars * and the finish times all read from it. * - A single `simTime` value drives a playhead across both lanes so the two * strategies stay frame-locked to each other. * - Cores glow from a derived activity value, not from a separate animation. * * Beat sheet (900 frames @ 30fps = 30s, seamless loop) * Hook 0-65 four jobs, one core, a question * Setup 66-239 round-robin slicing: everything moves, nothing finishes * Build 240-464 the same jobs dealt to four cores * Payoff 465-659 both playheads run, the parallel lane finishes first * Detail 660-809 66 slices vs 22 ticks, and the Amdahl caveat * Loop 810-899 the tape rewinds to the start */ import React from 'react' import { AbsoluteFill, Composition, Easing, interpolate, registerRoot, spring, useCurrentFrame, useVideoConfig, } from 'remotion' export const WIDTH = 1080 export const HEIGHT = 1920 export const FPS = 30 export const DURATION_IN_FRAMES = 900 const BG = '#090612' const WHITE = '#F2ECFF' const MUTED = '#7C6E9A' const MAGENTA = '#FF3D9A' const LIME = '#B8FF3D' const VIOLET = '#8B5CF6' const CYAN = '#22D3EE' const SANS = 'Inter, "Helvetica Neue", Arial, sans-serif' const MONO = 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' const CLAMP = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const const progress = (frame: number, from: number, to: number, easing = Easing.linear) => interpolate(frame, [from, to], [0, 1], { ...CLAMP, easing }) /* ----------------------------------------------------------------- scheduler */ type Job = { label: string; work: number; color: string } const JOBS: Job[] = [ { label: 'encode', work: 22, color: MAGENTA }, { label: 'resize', work: 14, color: LIME }, { label: 'upload', work: 18, color: CYAN }, { label: 'notify', work: 12, color: VIOLET }, ] type Segment = { job: number; from: number; to: number; lane: number } /** One core, quantum-sized slices, cycling until every job is drained. */ function roundRobin(quantum = 2): { segments: Segment[]; total: number } { const remaining = JOBS.map((job) => job.work) const segments: Segment[] = [] let cursor = 0 while (remaining.some((value) => value > 0)) { remaining.forEach((value, job) => { if (value <= 0) return const take = Math.min(quantum, value) segments.push({ job, from: cursor, to: cursor + take, lane: 0 }) cursor += take remaining[job] -= take }) } return { segments, total: cursor } } /** Four cores, one job each, all starting at tick zero. */ function parallel(): { segments: Segment[]; total: number } { const segments = JOBS.map((job, index) => ({ job: index, from: 0, to: job.work, lane: index })) return { segments, total: Math.max(...JOBS.map((job) => job.work)) } } const CONCURRENT = roundRobin(2) const PARALLEL = parallel() const LONGEST = Math.max(CONCURRENT.total, PARALLEL.total) /** How much of a job is finished at a given tick, for either schedule. */ function completion(segments: Segment[], job: number, tick: number): number { const total = JOBS[job].work const done = segments .filter((segment) => segment.job === job) .reduce( (sum, segment) => sum + Math.max(0, Math.min(segment.to, tick) - segment.from), 0, ) return Math.max(0, Math.min(1, done / total)) } function activeJob(segments: Segment[], tick: number, lane: number): number | null { const hit = segments.find( (segment) => segment.lane === lane && tick >= segment.from && tick < segment.to, ) return hit ? hit.job : null } /* --------------------------------------------------------------------- lanes */ const TAPE_LEFT = 120 const TAPE_WIDTH = 840 const tickToX = (tick: number) => TAPE_LEFT + (tick / LONGEST) * TAPE_WIDTH const Tape: React.FC<{ segments: Segment[] lanes: number top: number height: number tick: number reveal: number }> = ({ segments, lanes, top, height, tick, reveal }) => { const laneHeight = height / lanes return ( <> {Array.from({ length: lanes }).map((_, lane) => (
))} {segments.map((segment, index) => { const visible = Math.min(segment.to, tick) if (visible <= segment.from) return null const left = tickToX(segment.from) const width = tickToX(visible) - left const job = JOBS[segment.job] return (
) })}
) } const CoreGrid: React.FC<{ tick: number; segments: Segment[]; lanes: number; top: number }> = ({ tick, segments, lanes, top, }) => (
{Array.from({ length: 4 }).map((_, core) => { const lane = lanes === 1 ? 0 : core const busy = lanes === 1 ? (core === 0 ? activeJob(segments, tick, 0) : null) : activeJob(segments, tick, lane) const color = busy === null ? 'rgba(255,255,255,0.07)' : JOBS[busy].color return (
{`CORE ${core}`} {busy === null ? 'idle' : JOBS[busy].label}
) })}
) const JobBars: React.FC<{ segments: Segment[]; tick: number; top: number; fps: number; frame: number; appearAt: number }> = ({ segments, tick, top, fps, frame, appearAt, }) => ( <> {JOBS.map((job, index) => { const enter = spring({ frame: frame - appearAt - index * 4, fps, config: { damping: 14, mass: 0.5, stiffness: 120 }, }) const done = completion(segments, index, tick) return (
= 1 ? job.color : MUTED, width: 150, }} > {job.label}
= 1 ? job.color : MUTED, }} > {`${Math.round(done * 100)}%`}
) })} ) const Beat: React.FC<{ title: string; note: string; accent: string; local: number }> = ({ title, note, accent, local, }) => { const enter = progress(local, 0, 13, Easing.out(Easing.cubic)) return ( <>
{title}
{note}
) } const Guides: React.FC = () => (
) /* ---------------------------------------------------------------- composition */ export const ThreadRace: React.FC<{ showGuides?: boolean }> = ({ showGuides = false }) => { const frame = useCurrentFrame() const { fps } = useVideoConfig() const concurrentTick = interpolate(frame, [86, 452], [0, CONCURRENT.total], CLAMP) const raceConcurrent = interpolate(frame, [478, 646], [0, CONCURRENT.total], CLAMP) const raceParallel = interpolate(frame, [478, 646], [0, CONCURRENT.total], CLAMP) const accent = frame < 240 ? MAGENTA : frame < 465 ? LIME : frame < 660 ? CYAN : VIOLET const loopFade = progress(frame, 886, 899, Easing.in(Easing.quad)) return ( {frame < 66 ? (
FOUR JOBS.
ONE CORE.
CONCURRENT ≠ PARALLEL
) : null} {frame >= 66 && frame < 465 ? ( <>
{frame < 240 ? 'CORE 0 TIMELINE' : 'CORE 0-3 TIMELINE'}
{frame < 240 ? ( ) : ( )} ) : null} {frame >= 465 && frame < 660 ? ( <>
CONCURRENT · 1 CORE
PARALLEL · 4 CORES
{[ { label: 'CONCURRENT', total: CONCURRENT.total, color: MAGENTA, tick: raceConcurrent }, { label: 'PARALLEL', total: PARALLEL.total, color: LIME, tick: raceParallel }, ].map((row, index) => { const finished = row.tick >= row.total return (
{row.label}
{`${Math.min(Math.round(row.tick), row.total)}`} {` / ${row.total} ticks`}
{finished ? (
DONE
) : null}
) })} ) : null} {frame >= 660 && frame < 810 ? ( <> {[ { k: 'Concurrency', v: 'deals with many things at once', c: MAGENTA }, { k: 'Parallelism', v: 'does many things at once', c: LIME }, { k: 'Amdahl', v: 'the serial part sets the floor', c: CYAN }, ].map((row, index) => { const enter = progress(frame, 676 + index * 30, 706 + index * 30, Easing.out(Easing.cubic)) return (
{row.k}
{row.v}
) })} ) : null} {frame >= 810 ? (
ONE CORE CAN JUGGLE.
FOUR CAN FINISH.
) : null}
{`ROUND ROBIN q=2 · ${CONCURRENT.segments.length} SLICES`}
{showGuides ? : null} ) } export const Root: React.FC = () => ( ) registerRoot(Root) export default ThreadRace