Skip to content

Instantly share code, notes, and snippets.

@SMUsamaShah

SMUsamaShah/keyboardsmash.html

Last active September 15, 2022 13:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SMUsamaShah/ff1898fbe0e4fda10d7ae9c12a538e22 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SMUsamaShah/ff1898fbe0e4fda10d7ae9c12a538e22 to your computer and use it in GitHub Desktop.
Download ZIP
let little kids/toddlers/infants smash your keyboard as they please
Raw
keyboardsmash.html
<html>
<div id="app"></div>
<script>
'use strict';let zzfx,zzfxV,zzfxX
// ZzFXMicro - Zuper Zmall Zound Zynth - v1.1.8 ~ 884 bytes minified
zzfxV=.3 // volume
zzfx= // play sound
(p=1,k=.05,b=220,e=0,r=0,t=.1,q=0,D=1,u=0,y=0,v=0,z=0,l=0,E=0,A=0,F=0,c=0,w=1,m=0,B=0)=>{let
M=Math,R=44100,d=2*M.PI,G=u*=500*d/R/R,C=b*=(1-k+2*k*M.random(k=[]))*d/R,g=0,H=0,a=0,n=1,I=0
,J=0,f=0,x,h;e=R*e+9;m*=R;r*=R;t*=R;c*=R;y*=500*d/R**3;A*=d/R;v*=d/R;z*=R;l=R*l|0;for(h=e+m+
r+t+c|0;a<h;k[a++]=f)++J%(100*F|0)||(f=q?1<q?2<q?3<q?M.sin((g%d)**3):M.max(M.min(M.tan(g),1)
,-1):1-(2*g/d%2+2)%2:1-4*M.abs(M.round(g/d)-g/d):M.sin(g),f=(l?1-B+B*M.sin(d*a/l):1)*(0<f?1:
-1)*M.abs(f)**D*p*zzfxV*(a<e?a/e:a<e+m?1-(a-e)/m*(1-w):a<e+m+r?w:a<h-c?(h-a-c)/t*w:0),f=c?f/
2+(c>a?0:(a<h-c?1:(h-a)/c)*k[a-c|0]/2):f),x=(b+=u+=y)*M.cos(A*H++),g+=x-x*E*(1-1E9*(M.sin(a)
+1)%2),n&&++n>z&&(b+=v,C+=v,n=0),!l||++I%l||(b=C,u=G,n=n||1);p=zzfxX.createBuffer(1,h,R);p.
getChannelData(0).set(k);b=zzfxX.createBufferSource();b.buffer=p;b.connect(zzfxX.destination
);b.start();return b};zzfxX=new (window.AudioContext||webkitAudioContext) // audio context
</script>
<script>
</script>
<script type="text/javascript">
//sound effect presets
let presets =
[
[,,1675,,.06,.24,1,1.82,,,837,.06],
[,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17],
[,,539,0,.04,.29,1,1.92,,,567,.02,.02,,,,.04],
[,,80,.3,.4,.7,2,.1,-0.73,3.42,-430,.09,.17,,,,.19],
[,,537,.02,.02,.22,1,1.59,-6.98,4.97],
[,,528,.01,,.48,,.6,-11.6,,,,.32,4.2],
[,,20,.04,,.6,,1.31,,,-990,.06,.17,,,.04,.07],
[,,662,.82,.11,.33,1,0,,-0.2,,,,1.2,,.26,.01],
[1.5,.5,270,,.1,,1,1.5,,,,,,,,.1,.01],
[,,129,.01,,.15,,,,,,,,5],
[,,333,.01,0,.9,4,1.9,,,,,,.5,,.6],
[,,418,0,.02,.2,4,1.15,-8.5,,,,,.7,,.1],
[,.3,1975,.08,.56,.02,,,-0.4,,-322,.56,.41,,,,.25],
[,.1,75,.03,.08,.17,1,1.88,7.83,,,,,.4],
[,.9,1306,.8,.08,.02,1,,,,,,.48,,-0.1,.11,.25],
[,.2,1e3,.02,,.01,2,,18,,475,.01,.01],
[2,.8,999,,,,,1.5,,.3,-99,.1,1.63,,,.11,.22],
[,.5,847,.02,.3,.9,1,1.67,,,-294,.04,.13,,,,.1],
[,0,1600,.13,.52,.61,1,1.1,,,,,,.1,,.14],
[,,224,.02,.02,.08,1,1.7,-13.9,,,,,,6.7],
[,,941,.8,,.8,4,.74,-222,,,,,.8,,1],
[,,172,.8,,.8,1,.76,7.7,3.73,-482,.08,.15,,.14],
[,,448,.01,.1,.3,3,.39,-0.5,,,,,,.2,.1,.08],
[,,150,.05,,.05,,1.3,,,,,,3],
[,.2,40,.5,,1.5,,11,,,,,,199],
[,0,960,,1,.01,,.8,-0.01,,-190,.5,,.05,,,1],
[1.2,0,250,.02,,.15,4,.1,,,,,,,,.01,.01],
[,,44,.04,.15,.3,4,.8,,,,,,2,,.14,.39],
[,,471,,.09,.47,4,1.06,-6.7,,,,,.9,61,.1,,.82,.09,.13],
[,,63,,1,,1,1.5,,,,,,,,3.69,.08],
[,,1e3,,,.5,,,,,99,.01,.03],
[,,9220,.01,,,,5,,,,,,9],
];
</script>
<script>
document.body.style.margin=0;
const appDiv = document.getElementById('app');
const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
appDiv.append(canvas);
const ctx = canvas.getContext('2d');
window.onresize = ()=>{
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
// handling 'keydown' event will truly prevent F1-F12 etc keys from being handled by browser
document.addEventListener('keydown', function onPress(event) {
keypressed(event.keyCode, event.key);
stop_event(event);
return false;
});
document.addEventListener('keyup', function onPress(event) {
//keypressed(event.keyCode);
stop_event(event);
return false;
});
function stop_event(event) {
event.cancelBubble = true;
event.returnValue = false;
event.keyCode = 0;
if (event.stopPropagation) event.stopPropagation();
event.preventDefault();
}
function draw(keycode, key, size) {
const i = keycode % presets.length;
ctx.fillStyle = `rgb(${50 + (1<<i)%180},${50 + (2<<i)%180},${50 + (3<<i)%180})`;
ctx.fillRect(0,0,canvas.width,canvas.height);
if (size>1500) return;
ctx.font = size+"px Arial";
ctx.strokeText(key, canvas.width/2, canvas.height/2+size/4);
ctx.fillStyle = `rgb(${100 + (2<<i)%100},${100 + (3<<i)%100},${100 + (1<<i)%100})`;
ctx.textAlign="center";
ctx.fillText(key, canvas.width/2, canvas.height/2+size/4);
}
function playsound(keycode) {
const i = keycode % presets.length;
zzfx(...presets[i]);
}
let key="";
let keycode=0;
let size=30;
function keypressed(_keycode, _key) {
playsound(keycode);
key = _key;
keycode = _keycode;
size=30;
}
function drawloop(timestamp) {
size=size+1+size/100;
draw(keycode, key, ++size);
}
function animate(timestamp) {
drawloop(timestamp);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment