Published
Edited
Apr 5, 2020
20 stars
// Note: this parameter is different from "beta" in SIR differential equation
beta = 0.25
// Note: this parameter is different from "gamma" in SIR differential equation
gamma = 1 / 5
generateInitState = (nInfected, density) => {
const initialState = (Array(radius * radius * 4)).fill(0);
const nSusceptible = Math.floor(radius * radius * density - nInfected);
const shuffled = [...Array(radius * radius).keys()] // Shuffle twice
.sort(() => 0.5 - Math.random()).sort(() => 0.5 - Math.random());
const infectedIdx = shuffled.slice(0, nInfected);
const susceptibleIdx = shuffled.slice(nInfected, nInfected + nSusceptible);
infectedIdx.forEach(i => {
initialState[4 * i + 1] = 255;
});
susceptibleIdx.forEach(i => {
initialState[4 * i] = 255;
});
return initialState;
}
state = {
const initialState = generateInitState(nInfected, density);
return (Array(2)).fill().map(() =>
gl.regl.framebuffer({
color: gl.regl.texture({
radius: radius,
data: initialState
}),
depth: false,
depthStencil: false
})
);
}
drawQuad = gl.regl({
vert: quadVert,
frag: quadFrag,
attributes: {
position: [[0, 0], [1, 0], [0, 1], [0, 1], [1, 0], [1, 1]]
},
uniforms: {
prevState: ({ tick }) => state[tick % 2]
},
count: 6
})
update = gl.regl({
vert: quadVert,
frag: updateFrag,
attributes: {
position: [[0, 0], [1, 0], [0, 1], [0, 1], [1, 0], [1, 1]]
},
uniforms: {
radius: radius,
beta: beta,
gamma: gamma,
seed: gl.regl.prop("seed"),
prevState: ({ tick }) => state[tick % 2]
},
count: 6
})
{
return gl.regl.frame(({tick}) => {
drawQuad();
state[(tick + 1) % 2].use(() => {
update({seed: Math.random()});
})
})
}
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.
