createUniform = async function createUniform(type, group = 0) {
const buffer = device.createBuffer({
label: type.name,
size: type.bytes,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
});
const { accessor, buffer: values } = new Translator(type);
const bindGroup = await validate(() =>
device.createBindGroup({
label: type.name,
layout: pipeline.getBindGroupLayout(group),
entries: [{ binding: 0, resource: { buffer } }]
})
);
return {
set(value) {
return accessor(value);
},
write() {
device.queue.writeBuffer(buffer, 0, values);
},
bind(pass) {
pass.setBindGroup(group, bindGroup);
},
buffer,
values,
bindGroup
};
}
typesSnippet = snippet("types")
animation = {
const svg = htl.svg`<svg viewBox="-100 -100 200 200">
<text x=-80 y=-80>info</text>
<circle r=10 fill-opacity=1/>
</svg>`;
const text = svg.querySelector("text");
const circle = svg.querySelector("circle");
const { cos } = Math;
let live = true;
invalidation.then(() => (live = false));
let time = performance.now();
function loop(now) {
const delta = (now - time).toFixed(2);
text.textContent = delta;
mutable times.set(delta, (mutable times.get(delta) ?? 0) + 1);
//times = mutable times;
time = now;
if (live) {
//requestAnimationFrame(loop);
}
now *= 0.001;
circle.setAttribute("cx", 80 * cos(7 * now));
circle.setAttribute("cy", 80 * cos(5 * now));
}
requestAnimationFrame(loop);
return svg;
}
mutable times = new Map()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
