Illustrate music beats
Dyalog APL, 14 bytes
⊖⍉↑'='⍴¨⍨?33⍴6
Explanation
33⍴6 33 repetitions of 6
? random integer in range [1,n] for each of the 33 6s
'='⍴¨⍨ equality symbol repeated each of those number of times
↑ convert list of lists to table of rows
⍉ transpose rows into columns, columns into rows
⊖ flip upside down
Example runs
Input is indented six spaces:
⊖⍉↑'='⍴¨⍨?33⍴6
= == = ==
= = = == ==== ==
= = = === == === ==== = === =
= = ===== ==== === ==== = ==== =
=== ============== ==== ====== ==
=================================
⊖⍉↑'='⍴¨⍨?33⍴6
= = = = =
= = = == == == = =
=== == == = === ======= =
==== == == ====== ========== =
==== ============= ========== = =
=================================
⊖⍉↑'='⍴¨⍨?33⍴6
= = = =
= = = = == =
= = = = == = ==== ===
= = = = = = == = ==== ====
===== = == == ============ ====
=================================
Pyth, 13 bytes
And I outgolfed Jelly.
j_.tm*hO6\=33
Try it online!
j_.tm*hO6\=33
m 33 for 33 times:
O6 yield a random number in [0,1,2,3,4,5].
h add one.
* \= repeat "=" that number of times.
.t transpose, filling with whitespace
_ reverse
j join by newlines.
JavaScript (ES6), 116 bytes
(a=Array(33).fill``.map(_=>[,,,,,,].fill` `.fill('=',Math.random()*6)))[0].map((x,i)=>a.map(x=>x[i]).join``).join`
`
Check it out in the animated snippet below:
F = () => (a=Array(33).fill``.map(_=>[,,,,,,].fill` `.fill('=',Math.random()*6)))[0].map((x,i)=>a.map(x=>x[i]).join``).join`
`
var interval;
G = () => output.innerHTML = F().split('\n').map((r, i) => `<span id="row-${6-i}">${r}</span>`).join('\n');
A = () => {
clearInterval(interval);
if (auto.checked) {
speed.disabled = false;
interval = setInterval(G, speed.value);
} else {
speed.disabled = true;
}
}
S = () => {
if (stylized.checked) {
output.classList.add('stylized');
} else {
output.classList.remove('stylized');
}
}
generate.onclick = G;
auto.onchange = speed.onchange = A;
stylized.onchange = S;
G();
A();
S();#output {
background: #000;
color: #9fff8a;
overflow: hidden;
padding: 1em;
line-height: 1;
}
#output.stylized {
line-height: 0.25;
font-size: 2em;
margin: 0.5em 0 0 0;
padding: 0.5em;
}
.stylized #row-1 { color: #9fff8a; }
.stylized #row-2 { color: #c5ff8a; }
.stylized #row-3 { color: #e0ff8a; }
.stylized #row-4 { color: #ffe88a; }
.stylized #row-5 { color: #ffc28a; }
.stylized #row-6 { color: #ff8a8a; }<button id="generate">Generate</button>
<label>Auto: <input id="auto" type="checkbox" checked/></label>
<label>Speed: <select id="speed">
<option value="25">25</option>
<option value="50">50</option>
<option value="100" selected>100</option>
<option value="200">200</option>
<option value="400">400</option>
<option value="600">600</option>
<option value="800">800</option>
<option value="1000">1000</option>
</select></label>
<label>Stylized: <input id="stylized" type="checkbox" checked/></label>
<pre id="output"></pre>