2b:null 2c:["$","title",null,{"children":"SIR simulation of infection (WebGL) | sw1227 | Observable"}] 31:T5f4,updateFrag = ` precision mediump float; uniform sampler2D prevState; uniform float radius; uniform float seed; uniform float beta; uniform float gamma; varying vec2 v_tex_pos; // Constants // S: [1, 0, 0, 0], I: [0, 1, 0, 0], R: [0, 0, 1, 0], empty: [0, 0, 0, 0] const vec4 S = vec4(1.0, 0.0, 0.0, 0.0); const vec4 I = vec4(0.0, 1.0, 0.0, 0.0); const vec4 R = vec4(0.0, 0.0, 1.0, 0.0); // pseudo-random generator const vec3 rand_constants = vec3(12.9898, 78.233, 4375.85453); float rand(const vec2 co) { float t = dot(rand_constants.xy, co); return fract(sin(t) * (rand_constants.z + t)); } void main() { // Previous state of this pixel vec4 state = texture2D(prevState, v_tex_pos); // Update state vec4 newState = state; if (state.r > 0.9) { // Susceptible float n = 0.0; // Number of "Infected" in 8-neighbor for(int dx=-1; dx<=1; ++dx) { for(int dy=-1; dy<=1; ++dy) { vec4 neighbor = texture2D(prevState, v_tex_pos + vec2(dx, dy) / radius); n += neighbor.g; // Increment if neighbor is Infected } } // Probability of being infected by at least one neighbor float prob = 1.0 - pow(1.0 - beta, n); if (rand(seed * v_tex_pos) < prob) { newState = I; } } if (state.g > 0.9) { // Infected if (rand(seed * v_tex_pos) < gamma) { newState = R; } } // Else(R or empty): same as the previous state gl_FragColor = newState; }`32:[] 2f:{"id":"631f1848634f1d26","slug":"sir-simulation-with-webgl","title":"SIR simulation of infection (WebGL)","thumbnail":"3fe0342652add1daca3eebb63dea24086e1366508200ca5d5d31d779e453485e","access_level":"public","create_time":"$D2020-04-05T04:59:12.506Z","update_time":"$D2020-04-05T05:47:00.093Z","view_time":null,"first_public_time":"$D2020-04-05T05:44:11.421Z","fork":false,"stars":20,"starred":false,"owner":{"type":"team","id":"06475ae5027cde36","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":"starter_2024"},"version":146,"publish_version":146,"role":null,"authored":false,"authors":[{"type":"individual","id":"4a648b0bd17e2c08","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":null}],"members":[{"type":"individual","id":"4a648b0bd17e2c08","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":9,"collection":{"id":"f828b02efcb99767","slug":"math","title":"Math","owner":{"id":"06475ae5027cde36","login":"sw1227","name":"sw1227"}},"type":"notebook","body":{"title":"SIR simulation of infection (WebGL)","cells":[{"id":0,"value":"md`# SIR simulation of infection (WebGL)\n[SIR model](https://en.wikipedia.org/wiki/Compartmental_models_in_epidemiology#The_SIR_model) is a polular mathematical model of infectious diseases (e.g. COVID-19).\n\n\nIn this notebook, multi-agent version of SIR model is implemented with some simplifications. Since the dynamics of the agents are implemented in GLSL, this million-scale (1024 x 1024) simulation runs in real-time.\n\nFIXME: maybe rand-generator not working in iOS Chrome/Safari?\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"viewof density = {\n const form = html`\n`;\n form.i.oninput = () => form.o.value = `Density: ${form.value = form.i.valueAsNumber}`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"// Note: this parameter is different from \"beta\" in SIR differential equation\nbeta = 0.25","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"// Note: this parameter is different from \"gamma\" in SIR differential equation\ngamma = 1 / 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"gl.canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"radius = 1024","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"nInfected = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"generateInitState = (nInfected, density) => {\n const initialState = (Array(radius * radius * 4)).fill(0);\n\n const nSusceptible = Math.floor(radius * radius * density - nInfected);\n const shuffled = [...Array(radius * radius).keys()] // Shuffle twice\n .sort(() => 0.5 - Math.random()).sort(() => 0.5 - Math.random());\n const infectedIdx = shuffled.slice(0, nInfected);\n const susceptibleIdx = shuffled.slice(nInfected, nInfected + nSusceptible);\n\n infectedIdx.forEach(i => {\n initialState[4 * i + 1] = 255;\n });\n susceptibleIdx.forEach(i => {\n initialState[4 * i] = 255;\n });\n\n return initialState;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"state = {\n const initialState = generateInitState(nInfected, density);\n return (Array(2)).fill().map(() =>\n gl.regl.framebuffer({\n color: gl.regl.texture({\n radius: radius,\n data: initialState\n }),\n depth: false,\n depthStencil: false\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"drawQuad = gl.regl({\n vert: quadVert,\n frag: quadFrag,\n attributes: {\n position: [[0, 0], [1, 0], [0, 1], [0, 1], [1, 0], [1, 1]]\n },\n uniforms: {\n prevState: ({ tick }) => state[tick % 2]\n },\n count: 6\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"update = gl.regl({\n vert: quadVert,\n frag: updateFrag,\n attributes: {\n position: [[0, 0], [1, 0], [0, 1], [0, 1], [1, 0], [1, 1]]\n },\n uniforms: {\n radius: radius,\n beta: beta,\n gamma: gamma,\n seed: gl.regl.prop(\"seed\"),\n prevState: ({ tick }) => state[tick % 2]\n },\n count: 6\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"{\n return gl.regl.frame(({tick}) => {\n drawQuad();\n state[(tick + 1) % 2].use(() => {\n update({seed: Math.random()});\n })\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"quadVert = `\nprecision mediump float;\nattribute vec2 position;\nvarying vec2 v_tex_pos;\n\nvoid main() {\n v_tex_pos = position;\n gl_Position = vec4(2.0 * position - 1.0, 0, 1);\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"quadFrag = `\nprecision mediump float;\n\nuniform sampler2D prevState;\nvarying vec2 v_tex_pos;\n\nvoid main() {\n vec4 state = texture2D(prevState, v_tex_pos);\n\n vec3 color = vec3(1.0, 1.0, 1.0); // Default: empty\n if (state.r > 0.9) { // Susceptible\n color = vec3(0.5, 0.9, 0.9);\n }\n if (state.g > 0.9) { // Infected\n color = vec3(0.9, 0.4, 0.4);\n }\n if (state.b > 0.9) { // Recovered(Removed)\n color = vec3(0.5, 0.5, 1.0);\n }\n gl_FragColor = vec4(color, 1.0);\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"gl = createGL()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function createGL (opts) {\n var canvas = html`