2c:null 2d:["$","title",null,{"children":"Chemical reaction network simulator | Yaroslav Sergienko | Observable"}] 32:T71b,{ const ctx = this ? this.ctx : makeCtx(120, 78) // twoPlotsMode === 'first' ? 45 : 78); let frame; let startStamp = +new Date() / 1000; if (!('curFancyTransitionT' in window)) { window.curFancyTransitionT = 0.5; } const observer = (new window.IntersectionObserver(([entry]) => { if (entry.isIntersecting) { observer.disconnect(); if (!window.fancyGraphStarted) { window.curFancyTransitionT = twoPlotsMode === 'fancy' ? 1 : 0; window.fancyGraphStarted = true; } } }, { threshold: 0.5 })); observer.observe(ctx.canvas); (function tick(isFirst) { const dt = 0.01; const targetTransition = twoPlotsMode === 'fancy' ? 0 : 1; if (twoPlotsMode === 'none') { ctx.canvas.style.display = 'none'; } else { const delta = targetTransition - window.curFancyTransitionT; if (Math.abs(delta) < dt) { window.curFancyTransitionT = targetTransition; } else { const sign = delta / Math.abs(delta); window.curFancyTransitionT += dt * sign; } ctx.canvas.style.display = 'block'; if (isFirst || delta !== 0) { drawTwoPlots(ctx, { pseudo3dTransition: window.curFancyTransitionT, variableXValue: initialX, showSecond: twoPlotsMode !== 'first', maxTime: timeStep * stepCount, maxX: maxXValue, maxVal: maxOtherValue, timeLines: curLines.filter(({elem}) => (filterElems || []).includes(elem)), xLines: limitLines.filter(({elem}) => (filterElems || []).includes(elem)), }) } } frame = requestAnimationFrame(() => tick(false)); })(true); ctx.canvas.onclick = () => { } invalidation.then(() => { cancelAnimationFrame(frame); }); ctx.canvas.ctx = ctx; return ctx.canvas; }33:T16d9,exampleReactions = [ { 'title': 'Hello, world', 'reactions': 'X + Y -> R', 'description': '', }, { 'title': '3d engine', 'reactions': ` # N_Y + N_Y_M -> # N_Z + N_Z_M -> V + N_X -> A_Y_M + A_Z_M + C_X_P + M_XYZ_P + N_X V + N_Y -> A_X_M + A_Z_M + C_Y_P + M_XYZ_P + N_Y V + N_Z -> C_Z_P + M_XY_M + M_XYZ_P + N_Z C_X_M + C_X_P -> 2 A_X_M C_Y_M + C_Y_P -> 2 A_Y_M C_Z_M + C_Z_P -> 2 A_Z_M A_X_M + A_Y_M -> M_XY_M M_XY_M + A_Z_M -> M_XYZ_M M_XYZ_P + M_XYZ_M -> M_XYZ_P -> R + V + M_XYZ_P | 0.01 A_X_M = 0.898 A_Y_M = 0.606 A_Z_M = 1.504 C_X_M = 0.606 C_Y_M = 0.898 C_Z_M = 1.243 M_XYZ_M = 0.3 M_XYZ_P = 2.747 M_XY_M = 1.243 X = 0.5 Y = 0.5 N_X = 0.036 + 0.555 X + 0.147 Y N_Y = 0.853 + -0.517 Y N_Z = 0.737 + -0.270 X + 0.302 Y`.trim(), 'description': ` Implementation of simple ray-marched engine for rendering cube in 12 reactions.
Scroll down to "GPU-accelerated 2d plot" section and press "Recalculate" to see the cube.
Project on GitHub. `, }, { 'title': 'minimalist 3d engine', 'reactions': ` A + B -> L + M + H + O + B A + C -> K + M + I + O + C A + D -> J + N + O + D E + H -> 2 K F + I -> 2 L G + J -> 2 M K + L -> N N + M -> P O + P -> Q + O -> Q + R + A + O Q = 0.01 K = 0.898 L = 0.606 M = 1.504 E = 0.606 F = 0.898 G = 1.243 P = 0.3 O = 2.747 N = 1.243 X = 0.5 Y = 0.5 B = 0.036 + 0.555 X + 0.147 Y C = 0.853 + -0.517 Y D = 0.737 + -0.270 X + 0.302 Y`.trim(), 'description': ` Same implementation as before, but a little bit obfuscated.
Implementation of simple ray-marched engine for rendering cube in 12 reactions.
Scroll down to "GPU-accelerated 2d plot" section and press "Recalculate" to see the cube.
Project on GitHub. `, }, { 'title': 'Michaelis–Menten kinetics', 'reactions': ['X + Y -> XY', 'XY -> X + Y', 'XY -> Y + R'].join('\n'), 'description': 'X is substrate, Y is enzyme', }, { 'title': 'Max', 'reactions': ['X -> Y_M + R', 'Y -> X_M + R', 'X_M + Y_M -> R_M', 'R + R_M -> '].join('\n'), 'description': 'R = max(X, Y)', }, { 'title': 'Min', 'reactions': ['X_M -> Y + R_M', 'Y_M -> X + R_M', 'X + Y -> R', 'R + R_M -> '].join('\n'), 'description': 'R = min(X, Y)', }, { 'title': 'Abs', 'reactions': ['X -> T_P + R', 'Y -> T_M + R', 'T_P + T_M -> 2R_M', 'R + R_M -> '].join('\n'), 'description': 'R = abs(X - Y)', // }, { // 'title': 'Absence indicator', // 'reactions': ['-> R | 0.01', 'X + R -> X | 10', '2R -> R | 10'].join('\n'), // 'description': '', }, { 'title': 'Addition (destroying)', 'reactions': ['X -> R', 'Y -> R'].join('\n'), 'description': 'Addition of X and Y. Note, that after addition inputs X and Y are destroyed.', }, { 'title': 'Addition (non-destroying)', 'reactions': ['X -> X + R', 'Y -> Y + R', 'R -> '].join('\n'), 'description': 'Addition of X and Y. Note, that X and Y are not modified.', }, { 'title': 'Copy', 'reactions': ['X -> X + R', 'R -> '].join('\n'), 'description': 'Just makes non-destroying copy of X.', }, { 'title': 'Subtraction', 'reactions': ['X -> X + R', 'Y -> Y + T', 'R -> ', 'R + T -> '].join('\n'), 'description': 'R = X - Y', }, { 'title': 'Multiplication', 'reactions': ['X + Y -> X + Y + R', 'R -> '].join('\n'), 'description': 'R = X * Y', }, { 'title': 'Division', 'reactions': ['X -> X + R', 'Y + R -> Y'].join('\n'), 'description': 'R = X / Y', }, { 'title': 'Square root', 'reactions': ['X -> X + T', 'T + T -> | 0.5'].join('\n'), 'description': 'R = sqrt(X)', }, { 'title': 'Cubic root', 'reactions': ['X -> X + R', 'R + R -> R + R + T', 'R + T -> T', 'T -> '].join('\n'), 'description': 'R = X^(1/3)', }, { 'title': 'Approximate majority', 'reactions': ['X + Y -> X + T', 'Y + X -> Y + T', 'T + X -> X + X', 'T + Y -> Y + Y'].join('\n'), 'description': 'X, Y -> am(X, Y)', }, { 'title': 'Oscillator', 'reactions': ['X + Y -> 2Y', 'Y + R -> 2R', 'R + X -> 2X', 'R = 0.5'].join('\n'), 'description': '', }, { 'title': 'Predator-prey', 'reactions': ['X -> X + X | 0.5', 'X + Y -> Y + Y', 'Y -> 0 | 0.7'].join('\n'), 'description': 'Y - predator, X - prey', }, { 'title': 'Brusselator', 'reactions': `A -> A + X 2X + Y -> 3X B + X -> B + Y + D X -> E A = 1.0 B = 2.0`, 'description': 'Y - predator, X - prey', // }, { // 'title': 'Oregonator', // 'reactions': ['A + Y -> X + P', 'X + Y -> 2P', 'A + X -> 2X + 2Z', '2X -> A + P', 'B + Z -> 0.5 Y'].join('\n'), // 'description': 'Y - predator, X - prey', }, { 'title': 'Cosine (time)', 'reactions': [ 'Z_2_P -> Z_2_P + F_P', 'Z_2_M -> Z_2_M + F_M', 'F_M -> F_M + Z_2_P', 'F_P -> F_P + Z_2_M', 'Z_2_M + Z_2_P -> | 100', 'F_M + F_P -> | 50', 'F_P = 1', ].join('\n'), 'description': '', }, { 'title': 'Cosine (X)', 'reactions': `G_M -> G_M + G_P X -> X + G_P G_P -> G_P + G_M X_M -> X_M + G_M G_M + Z4_P -> G_M + Z4_P + R_P G_P + Z4_M -> G_P + Z4_M + R_P X_M + Z4_M -> X_M + Z4_M + R_P X + Z4_P -> X + Z4_P + R_P G_M + Z4_M -> G_M + Z4_M + R_M G_P + Z4_P -> G_P + Z4_P + R_M X + Z4_M -> X + Z4_M + R_M X_M + Z4_P -> X_M + Z4_P + R_M G_M + R_M -> G_M + R_M + Z4_P G_P + R_P -> G_P + R_P + Z4_P X + R_M -> X + R_M + Z4_P X_M + R_P -> X_M + R_P + Z4_P G_M + R_P -> G_M + R_P + Z4_M G_P + R_M -> G_P + R_M + Z4_M X_M + R_M -> X_M + R_M + Z4_M X + R_P -> X + R_P + Z4_M Z4_M + Z4_P -> | 50 R_M + R_P -> | 50 G_M + G_P -> | 50 X_M + X -> | 50 R_P = 1`, 'description': '', }, { 'title': 'Custom', 'reactions': '[CUSTOM]', 'description': 'Write your own set of reactions!', } ]34:[] 30:{"id":"5288cbf0a5de42b2","slug":"chemical-reaction-network-simulator","title":"Chemical reaction network simulator","thumbnail":"2b5a271ae201d405fd946c837f6ea232fd55a64ee7439bcea2ce857d8440e545","access_level":"public","create_time":"$D2020-10-31T08:07:16.249Z","update_time":"$D2020-11-29T11:07:51.945Z","view_time":null,"first_public_time":"$D2020-11-29T00:45:28.485Z","has_unpublished_edits":null,"fork":false,"stars":20,"starred":false,"owner":{"type":"team","id":"ae7dadfe8dcf0cbe","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":"starter_2024","bio":"Interactive data visualization"},"version":1607,"publish_version":1607,"role":null,"authored":false,"authors":[{"type":"individual","id":"f19682cf1ab7bdae","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":null,"bio":"Interactive data visualization"}],"members":[{"type":"individual","id":"f19682cf1ab7bdae","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"207f510839db3e82","slug":"3d-engine-in-dna-code","title":"3d engine in DNA code","owner":{"id":"ae7dadfe8dcf0cbe","login":"pallada-92","name":"Yaroslav Sergienko"}},"type":"notebook","body":{"titling":"auto","title":"Chemical reaction network simulator","cells":[{"id":1556,"value":"md`\n# Chemical reaction network simulator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1566,"value":"md`\nWikipedia: Law of mass action\n\n* You can specify its value after the vertical bar, e.g. A + B → C | 2.3\n * The reaction rate coefficient is 1 by default.\n* Use an equals sign to specify the initial concentration, e.g. A = 1.2.\n* The initial concentration definitions can depend on each other,
e.g. A = 1.2 + 3.2 B\n* Use the # character for comments.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"viewof exampleReactionId = select({\n title: \"Select an example reaction\",\n description: \"You can also enter your custom reaction system\",\n options: exampleReactions.map(({title}, no) => ({label: title.replace('->', '→'), value: no})),\n value: +defaultReactionNo || 0,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"{\n const { description } = exampleReactions[exampleReactionId];\n try {\n const r = parseReactions(reactionsInput);\n evaluateAssignments(r.assignments);\n } catch (e) {\n return html`${e.toString()}`;\n }\n return html`${description}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof reactionsInput = textarea({\n title: \"Reaction system\", \n placeholder: \"\", \n spellcheck: false,\n width: \"100%\",\n rows: 10,\n submit: \"Simulate\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"formatReactions(reactions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"viewof initialX = slider({\n min: 0, \n max: maxXValue, \n step: 0.01, \n value: 0.4, \n title: \"Initial X concentration\", \n description: \"\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"viewof initialY = slider({\n min: 0, \n max: maxYValue, \n step: 0.01, \n value: 0.6, \n title: \"Initial Y concentration\", \n description: \"\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"viewof twoPlotsMode = radio({\n title: 'Mathematical model simulation results',\n description: '',\n options: [\n { label: 'Fancy pseudo-3d graphs', value: 'fancy' },\n { label: 'Boring graphs', value: 'boring' },\n { label: 'Only the first graph (less CPU)', value: 'first' },\n { label: 'Disable', value: 'none' },\n ],\n value: 'fancy'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1039,"value":"viewof timeScale = slider({\n min: -5,\n max: 0,\n title: \"Time scale for the plots (deg10):\", \n description: \"\",\n value: -2.5,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1348,"value":"html`${reactions.reactions.length} reactions of ${reactions.species.length} species, ${Object.values(reactions.assignments).filter(v => {\n const k = Object.keys(v);\n return !(k.length === 0 || k.length === 1 && k[0] === '' && v[''] === 0);\n}).length} non-zero initial species`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1246,"value":"viewof filterElems = checkbox({\n title: \"Filter species\",\n description: \"\",\n options: reactionsWithoutXY.species.length === 0 ? ['-'] : reactionsWithoutXY.species.map(elem => ({value: elem, label: getElemPlainTextRepr(elem)})),\n value: reactionsWithoutXY.species,\n submit: false,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"viewof particlesMode = radio({\n title: 'Particle visualization',\n description: 'Please note that this is not how the mathematical model works: it doesn\\'t take the particle coordinates into account.
It is just an animation for people to get an idea of what\\'s going on.
Click on canvas to restart.',\n options: [\n { label: 'Linear motion', value: 'linear' },\n { label: 'Brownian motion', value: 'brown' },\n { label: 'Disable (make your CPU happy)', value: 'none' },\n ],\n value: 'linear'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"{\n const ctx = this ? this.ctx : makeCtx(1, 0.5);\n let frame;\n\n (function tick() {\n if (particlesMode === 'none') {\n ctx.canvas.style.display = 'none';\n } else {\n ctx.canvas.style.display = 'block';\n ps.draw(ctx, true);\n ps.update(0.005, particlesMode); \n }\n frame = requestAnimationFrame(tick);\n })();\n \n ctx.canvas.onclick = () => {\n ps.reset();\n }\n ps.draw(ctx, true);\n \n invalidation.then(() => {\n cancelAnimationFrame(frame);\n });\n ctx.canvas.ctx = ctx;\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"html`\n

GPU-accelerated 2d plot

\n\nEach of the 10 000 cells represents a reaction with particular initial X and Y concentrations.
\nThe cell color represents the limit concentration of the

species.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"viewof webglMinR = number({\n title: \"Minimum R concentration (will be black):\", \n description: \"\",\n value: exampleReactionId === \"1\" || exampleReactionId === \"2\" ? 1.8 : 0,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1113,"value":"viewof webglMaxR = number({\n title: \"Maximum R concentration (will be white)\", \n description: \"\",\n value: exampleReactionId === \"1\" || exampleReactionId === \"2\" ? 3.2 : 1,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"viewof recalculateWebglButton = button({\n value: \"Recalculate\",\n description: \"\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1145,"value":"{\n if (staticWebglParams === null) return html`Press \"Recalculate\"`;\n console.log('recalculating webgl');\n if (staticWebglParams.shader === 'NO_R') {\n return html`No reactions with \"R\" species found: use \"R\" species for this type of graph`;\n }\n const canvas = makeWebGlCanvas(staticWebglParams);\n return drawWebGLAxis(canvas, staticWebglParams);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1388,"value":"md`## Example sources:\n* [Computing Algebraic Functions with Biochemical Reaction Networks](http://mate.tue.nl/mate/pdfs/10328.pdf)\n* [CRN ++: Molecular Programming Language by Marko Vasic](https://arxiv.org/abs/1809.07430)\n* [Strong Turing Completeness of Continuous Chemical Reaction Networks and Compilation of Mixed Analog-Digital Programs](https://hal.inria.fr/hal-01519828v3/document)\n* [3d engine by Yaroslav Sergienko](https://github.com/pallada-92/dna-3d-engine)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"md`## That’s all. Here are some settings for the 2d plots:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"viewof maxXValue = number({\n title: \"Maximum X value in the 2d plots and controls\", \n description: \"\",\n value: 1,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"viewof limitXStepCount = number({\n title: \"Number of samples of X for the second plot\", \n description: \"\",\n value: 100,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"viewof maxYValue = number({\n title: \"Maximum Y value in the 2d plots and controls\", \n description: \"\",\n value: 1,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"viewof maxOtherValue = number({\n title: \"Maximum value of the other elements\", \n description: \"\",\n value: 1,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"viewof stepCount = number({\n title: \"Number of steps in the simulations (not webgl)\", \n description: \"\",\n value: 10000,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"md`## Settings for the webgl-accelerated plot:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"viewof webglResolution = number({\n title: \"Resolution of the webgl simulation\", \n description: \"\",\n value: 100,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"viewof webglMaxX = number({\n title: \"Maximum X\", \n description: \"\",\n value: 1,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"viewof webglMaxY = number({\n title: \"Maximum Y\", \n description: \"\",\n value: 1,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"viewof webglStepsCount = number({\n title: \"Number of steps in the simulation\", \n description: \"\",\n value: 100000,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"viewof webglStepSize = number({\n title: \"Simulation time step\", \n description: \"\",\n value: 0.1,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"md`\n---------\n\n---------\n\n---------\n\n---------\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1270,"value":"md`## JS, GLSL code generation routines source code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"import { generateSimJS, generateSimGlsl, makeWebGlCanvas, evaluateAssignments, float } from '10f084a9cb8fcfd3'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1273,"value":"md`## Visualizations source code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"import { makeCtx, drawTwoPlots, ParticleSystem, drawWebGLAxis, getElemPlainTextRepr } from 'd1ae09b112b77465'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"md`## Chemical reactions network parsing/formatting routines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"import { parseReactions, formatReactions } from 'b91053e22cf9cd27';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"md`## External library for dynamic form controls`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {textarea, select, radio, checkbox, number, button, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1450,"value":"md`\n---------\n\n---------\n\n---------\n\n---------\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"md`## Internals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1082,"value":"generatedShaderSource = {\n const dt = webglStepSize;\n const iterCount = webglStepsCount;\n const [inputElemX, inputElemY] = ['X', 'Y'];\n const resExpr = `(cur_R - ${float(webglMinR)}) / ${float(webglMaxR - webglMinR)}`;\n if (!reactionsWithoutX.species.includes('R')) {\n return 'NO_R';\n }\n return generateSimGlsl(\n reactionsWithoutX.reactions,\n reactionsWithoutX.assignments,\n dt, iterCount,\n inputElemX, inputElemY,\n resExpr,\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1226,"value":"staticWebglParams && staticWebglParams.shader === generatedShaderSource","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1208,"value":"mutable staticWebglParams = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"dynamicWebglParams = ({\n shader: generatedShaderSource,\n width: webglResolution,\n height: webglResolution,\n maxX: webglMaxX,\n maxY: webglMaxY,\n scale: 2,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1197,"value":"{\n console.log('window.webglParams write', window.webglParams);\n window.webglParams = dynamicWebglParams;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1214,"value":"{\n recalculateWebglButton;\n console.log('window.webglParams read', window.webglParams);\n setTimeout(() => {\n mutable staticWebglParams = window.webglParams ? {...window.webglParams} : null;\n }, 300);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"timeStep = Math.exp(timeScale * Math.log(10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"reactions = {\n const { reactions, assignments, species, speciesColors } = parseReactions(state.reactions);\n assignments.X = {'': initialX};\n assignments.Y = {'': initialY};\n speciesColors.R = 'black';\n speciesColors.R_P = 'black';\n speciesColors.R_M = 'gray';\n speciesColors['1'] = 'none';\n return { reactions, assignments, species, speciesColors };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1249,"value":"reactionsWithoutXY = {\n const { reactions, assignments, species, speciesColors } = parseReactions(state.reactions);\n speciesColors.R = 'black';\n speciesColors.R_P = 'black';\n speciesColors.R_M = 'gray';\n speciesColors['1'] = 'none';\n return { reactions, assignments, species, speciesColors };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"reactionsWithoutX = {\n const { reactions, assignments, species, speciesColors } = parseReactions(state.reactions);\n assignments.Y = {'': initialY};\n speciesColors.R = 'black';\n speciesColors.R_P = 'black';\n speciesColors.R_M = 'gray';\n speciesColors['1'] = 'none';\n return { reactions, assignments, species, speciesColors };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"simJsLimitFun = {\n const dt = timeStep;\n const iterCount = stepCount;\n const histStep = 0;\n const inputElem = 'X';\n return generateSimJS(reactionsWithoutX.reactions, reactionsWithoutX.assignments, dt, iterCount, histStep, inputElem);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1025,"value":"histStep = Math.ceil(stepCount / 1000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"simJsCurHistFun = {\n const dt = timeStep;\n const iterCount = stepCount;\n const inputElem = 'X';\n return generateSimJS(reactionsWithoutX.reactions, reactionsWithoutX.assignments, dt, iterCount, histStep, inputElem);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"curLines = {\n const simRes = simJsCurHistFun(initialX);\n const colors = reactionsWithoutX.speciesColors;\n return Object.entries(simRes).map(([elem, hist]) => {\n const points = hist.map((val, no) => {\n return [no * timeStep * histStep, val];\n });\n return {color: colors[elem], width: 0.3, points, label: elem, elem}\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"limitLines = {\n const colors = reactionsWithoutX.speciesColors;\n const zeroRes = simJsLimitFun(0);\n const simRes = Object.entries(zeroRes).map(([elem, zeroVal]) => {\n return {color: colors[elem], width: 0.3, points: [[0, zeroVal]], label: elem, elem};\n });\n for (let i=1; i<=limitXStepCount; i++) {\n const curX = maxXValue / limitXStepCount * i;\n const curLimits = simJsLimitFun(curX);\n simRes.forEach(({elem, points}) => points.push([curX, curLimits[elem]]))\n }\n return simRes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"window.onkeydown = (e) => {\n if (e.key === 'Enter' && e.ctrlKey) {\n document.querySelector('input[value=Simulate]').click();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"mutable state = loadState()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"ps = new ParticleSystem(\n evaluateAssignments(reactions.assignments),\n reactions.speciesColors,\n reactions.reactions,\n 200, 0.01, 2, 2,\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"function setParam(param, val) {\n // window.crnSimulatorState[param] = val;\n mutable state = {...mutable state, [param]: val};\n dumpState();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"function getParam(param) {\n // return window.crnSimulatorState[param];\n return mutable state[param];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"function loadState() {\n try {\n const text = window.localStorage.getItem('crnSimulatorState');\n let res = {\n customReactions: '',\n exampleReactionId: defaultReactionNo || '0',\n reaction: exampleReactions[0].reactions,\n };\n if (text) {\n try {\n res = JSON.parse(text);\n if (defaultReactionNo) {\n res.exampleReactionId = defaultReactionNo;\n }\n } catch (e) {}\n }\n // window.crnSimulatorState = res;\n return res;\n } catch (e) {\n return {\n customReactions: '',\n exampleReactionId: defaultReactionNo || '0',\n reaction: exampleReactions[0].reactions,\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"function dumpState() {\n // if (window.crnSimulatorState) {\n // const text = JSON.stringify(window.crnSimulatorState);\n // window.localStorage.setItem('crnSimulatorState', text);\n // }\n const text = JSON.stringify(mutable state);\n try {\n window.localStorage.setItem('crnSimulatorState', text);\n } catch (e) {\n // do nothing\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1518,"value":"defaultReactionNo = {\n const normalizeStr = s => s.toLowerCase().replace(/[^a-z0-9]/, ' ').trim().replace(/\\s+/g, '-')\n const hash = normalizeStr(window.location.hash);\n let res = undefined;\n exampleReactions.forEach(({ title }, no) => {\n title = normalizeStr(title);\n if (title === hash) {\n res = no;\n }\n });\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"{\n // Update textarea field text\n const { title, reactions } = exampleReactions[exampleReactionId];\n const reactionsText = reactions === '[CUSTOM]' ? getParam('customReactions') : reactions;\n setParam('exampleReactionId', exampleReactionId);\n setParam('reactions', reactionsText);\n viewof reactionsInput.children[0].children[1].value = reactionsText;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"{\n // Update saved custom reactions\n const curReactionsInput = reactionsInput;\n const { title, reactions } = exampleReactions[exampleReactionId];\n if (curReactionsInput && curReactionsInput !== reactions) {\n setParam('reactions', curReactionsInput);\n setParam('customReactions', curReactionsInput);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"tex`\\text{this text will trigger load \\KaTeX\\ css}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"