键盘声画打击乐
Patatap,Jono Brandel & Lullatone,2014 年

正在布展…
它是怎么做的
- 第 1 步26 个键各映射一个预载音频样本和一个动画函数。
- 第 2 步动画由 two.js 绘制矢量形状并用补间控制。
- 第 3 步空格键切换调色板与音色组。
- 第 4 步触屏把屏幕划分成网格对应按键。
复刻配方
一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。
Preload a set of short original samples into AudioBuffers and map each key to a sample plus an animation factory. Each animation creates a few vector shapes (circles, lines, polygons) in SVG or canvas, tweens their scale, rotation or stroke dash over 300–800 ms with easing, then removes them. Use a single palette object for background and shape colors and let the spacebar swap palettes and sample banks. On touch devices, divide the screen into a grid of zones that map to keys.
档案
能不能拿来用
原作不是开源许可(unknown (repo has no licence — treat as all rights reserved)):只能作为视觉参考,不要复制它的代码或素材,自己按技术思路实现。
性能开销
视觉强度
实现难度
尺度为策展判断(1 到 5),用于比较和推荐。
核实记录:Live site loads (HTTP 200); repo jonobr1/patatap exists via gh api (no licence set, created 2012-06-16).


