// 10 PRINT
<html onmousemove=innerHTML+="╱╲"[event.pageX%3]>.2 + .1
// 0.30000000000000004for (i = 0; i < 10; i += .1) {
}
// i = 10.09999999999998for (i = 0; i < 10; i += 1/8) {
}
// i = 10text = '';
for (i = 0; i < 5; i += 1/8)
text +=
i % 1 ? Math.floor(i)
: '\n';
b.textContent = text;ctx.fillStyle = `hsl(${time},13%, 37%)`third = Math.PI * 2 / 3;
ctx.fillStyle = 'rgb('+ [
127 + 127 * Math.cos(time - third),
127 + 127 * Math.cos(time),
127 + 127 * Math.cos(time + third)
] +')';// Don't clear the screen completly
ctx.fillStyle = 'rgba(0, 0, 0, .1)';
ctx.fillRect(0, 0, width, height);
// .. before doing your visuals// CSS
background: pink;
box-shadow: 0 0 10vmin hotpink;// Canvas
ctx.fillStyle = 'pink';
ctx.shadowColor = 'hotpink';
ctx.shadowBlur = 16;
ctx.fillRect(50, 50, 100, 100);// Audio element + WAVE PCM
h = d = 'data:audio/wav;base64,' +
'UklGRiQAAABXQVZFZm10IBAAAAABAAEAwF0AAMBdAAABAAgAZGF0YQAA';
for (t = 0; t++ < 8e5;)
d += String.fromCharCode(/* ByteBeat */);
Z = new Audio(h + btoa(d));
Z.play();// Audio API + script processor
A = new AudioContext;
S = A.createScriptProcessor(L = 1024, T = 0, 1);
S.connect(A.destination);
S.onaudioprocess = e => {
for (i = 0; i < L; i++)
e.outputBuffer.getChannelData(0)[i] = /* ByteBeat */
};// Hihat
osc = Math.random() * 2 - 1;
env = Math.pow(1 - positionInNote, 8);
vol = 1;
sample = osc * env * vol;update = now => {
requestAnimationFrame(update);
// Visuals
};
// Let's start
update();// Two birds one stone
scriptNode.onaudioprocess = e => {
// Visuals & Audio
}~
Fun Rewarding Structure Focus