hydra+p5+cycle
code:js
await loadScript("https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js")
await loadScript('https://cdn.jsdelivr.net/npm/hydra-midi@latest/dist/index.js')
const c = (n) => {
f = getTime() / 60 * cpm % 1
data = {}
dn.firstCycle().forEach(h => {
w = h.whole
begin = w.begin.n / w.begin.d
end = w.end.n / w.end.d
if (!(h.value in data)) {
datah.value = { "l": 0, "o": 0, "i": 0 }
}
if (begin < f && f < end) {
r = (f - begin) / (end - begin)
datah.value = {
"l": r,
"o": 1 - Math.pow(2, -10 * r),
"i": Math.pow(2, 10 * (r - 1))
}
}
})
return data
}
new p5((p) => {
p.setup = () => {
q = p.createCanvas(p.windowWidth, p.windowHeight)
}
p.draw = () => {
p.background(0)
p.translate(p.width / 2, p.height / 2)
p.circle(0, 0, p.lerp(0, 500, c(0)"bd""o"))
}
})
s0.init({ src: q.canvas })
src(s0)
.out()
code:js
window.d = {}
stack(
s(d0="bd")
).cpm(window.cpm=60)