2c:null 2d:["$","title",null,{"children":"Seashell patterns (WIP) | Chris Viau | Observable"}] 32:T665,renderSimulationTexture = { const cellWidth = config.width / simulationConfig.numCells; // Pixel-size of a cell const cellHeight = config.height / simulationConfig.numExecutions; const container = html`

`; const graphCanvas = container.querySelector(".graph"); const graphCtx = graphCanvas.getContext("2d"); graphCanvas.width = config.width; graphCanvas.height = config.height; const textureCanvas = container.querySelector(".texture"); const textureCtx = textureCanvas.getContext("2d"); textureCanvas.width = config.width; textureCanvas.height = config.height; const simulationGenerator = simulate(simulationConfig); for (const simulationValues of simulationGenerator) { renderTexture({ i: simulationValues.i, numCells: simulationConfig.numCells, cellWidth, cellHeight, activatorX: simulationValues.activatorX, inhibitorX: simulationValues.inhibitorX, fa: simulationConfig.fa, fb: simulationConfig.fb, ctx: textureCtx }); renderGraph({ i: simulationValues.i, numExecutions: simulationConfig.numExecutions, numCells: simulationConfig.numCells, cellWidth, activatorX: simulationValues.activatorX, inhibitorX: simulationValues.inhibitorX, sourceDensity: simulationValues.sourceDensity, substanceCX: simulationValues.substanceCX, fa: simulationConfig.fa, fb: simulationConfig.fb, fc: simulationConfig.fc, fs: simulationConfig.fs, ctx: graphCtx }); } return container; }33:T552,viewof simulationConfig = { const form = html``; form.oninput = () => (form.value = { activatorDiffusion: form.activatorDiffusion.valueAsNumber, activatorRemovalRate: form.activatorRemovalRate.valueAsNumber, activatorProductionRate: form.activatorProductionRate.valueAsNumber, inhibitorDiffusion: form.inhibitorDiffusion.valueAsNumber, inhibitorRemovalRate: form.inhibitorRemovalRate.valueAsNumber, substanceCRemovalRate: 0, numExecutions: 100, // Number of displays numIterations: 20, // number of iterations between the displays numCells: 100, // number of cells boundary: "tight", fa: 60, fb: 60, fc: 0 }); form.oninput(); return form; }34:Tf57,function* computeConcentrations( { numExecutions, numIterations, numCells, activatorDiffusion, activatorRemovalRate, activatorProductionRate, inhibitorDiffusion, inhibitorRemovalRate, substanceCDiffusion, substanceCRemovalRate, boundary }, { activatorX, inhibitorX, substanceCX, sourceDensity } ) { for (let i = 0; i <= numExecutions; i++) { // total number of plots for (let j = 0; j <= numIterations; j++) { // calculations between plots // boundary // CASE "cyclic" let activatorLeftCell = activatorX[numCells], inhibitorLeftCell = inhibitorX[numCells], substanceCLeftCell = substanceCX[numCells]; // activatorLeftCell is the concentration in the cell left of the actual cell. Left-most cell = last cell = cyclic activatorX[numCells + 1] = activatorX[1]; // Concentration in a virtual cell on the right inhibitorX[numCells + 1] = inhibitorX[1]; // equal concentration of the left-most cell substanceCX[numCells + 1] = substanceCX[1]; // for all substances // CASE "tight" // let activatorLeftCell = activatorX[1] // inhibitorLeftCell = inhibitorX[1] // substanceCLeftCell = substanceCX[1] // activatorLeftCell is the concentration in the cell left of the actual cell. Left-most cell = virtual cell with the same concentration // activatorX[numCells + 1] = activatorX[numCells] // concentration in a virtual cell to the right of the // inhibitorX[numCells + 1] = inhibitorX[numCells] // right-most cell is equal to the concentration in the // substanceCX[numCells + 1] = substanceCX[numCells] // right-most cell, this for all substances // ---------- Reactions ------ for (let k = 0; k <= numCells; k++) { // k = current cell let activatorConcentration = activatorX[k], // local activator-concentration inhibitorConcentration = inhibitorX[k], // local inhibitor1-concentration substanceCConcentration = substanceCX[k]; // local inhibitor2-concentration // Calculation of a new activator and inhibitor concentration in cell i let Diffactivator = activatorDiffusion * (activatorLeftCell - activatorConcentration + (activatorX[k + 1] - activatorConcentration)); // Exchange with neighbor activatorX[k] = activatorConcentration + (sourceDensity[k] * (activatorConcentration * activatorConcentration + activatorProductionRate)) / (inhibitorConcentration + substanceCConcentration) - activatorRemovalRate * activatorConcentration + Diffactivator; inhibitorX[k] = inhibitorConcentration + sourceDensity[k] * activatorConcentration * activatorConcentration - inhibitorRemovalRate * inhibitorConcentration + inhibitorDiffusion * (inhibitorLeftCell - inhibitorConcentration + (inhibitorX[k + 1] - inhibitorConcentration)); if (substanceCRemovalRate > 0) { // c only in oscillating patterns and phyllotactivatorXis substanceCX[k] = substanceCConcentration + substanceCRemovalRate * activatorConcentration - substanceCRemovalRate * substanceCConcentration + substanceCDiffusion * (substanceCLeftCell - substanceCConcentration + (substanceCX[k + 1] - substanceCConcentration)); } // The not yet changed concentrations are used as left cell concentrations in the subsequent cell activatorLeftCell = activatorConcentration; inhibitorLeftCell = inhibitorConcentration; substanceCLeftCell = substanceCConcentration; } } yield { i, activatorX, inhibitorX, substanceCX }; } return true; }35:T6ac,function renderGraph({ i, numExecutions, numCells, cellWidth, activatorX, inhibitorX, sourceDensity, substanceCX, fa, fb, fc, fs, ctx }) { // const normalizedExecutionNumber = i / numExecutions // ctx.strokeOpacity = normalizedExecutionNumber ctx.fillStyle = `rgba(255, 255, 255, ${1 / numExecutions})`; ctx.fillRect(0, 0, config.width, config.height); // ctx.lineWidth = 0.1 + i / normalizedExecutionNumber ctx.beginPath(); ctx.strokeStyle = "deepskyblue"; let x1 = 0; // Position of the first rectangle let afl = activatorX[0] * fa; ctx.moveTo(x1, afl); for (let k = 0; k <= numCells; k++) { let x2 = x1 + cellWidth; afl = activatorX[k] * fa; ctx.lineTo(x2, afl); // activator x1 = x2; } ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = "orange"; x1 = 0; let bfl = inhibitorX[0] * fb; ctx.moveTo(x1, bfl); for (let k = 0; k <= numCells; k++) { let x2 = x1 + cellWidth; bfl = inhibitorX[k] * fb; ctx.lineTo(x2, bfl); // inhibitor x1 = x2; } ctx.stroke(); // ctx.beginPath() // ctx.strokeStyle = "violet" // x1 = 0 // let sfl = sourceDensity[0] * fs // ctx.moveTo(x1, sfl) // for (let k=0; k<=n; k++) { // let x2 = x1 + cellWidth // sfl = sourceDensity[k] * fs // ctx.lineTo(x2, sfl) // source density // x1 = x2 // } // ctx.stroke() // if (substanceCRemovalRate > 0) { ctx.beginPath(); ctx.strokeStyle = "lime"; x1 = 0; let cfl = substanceCX[0] * fc; ctx.moveTo(x1, cfl); for (let k = 0; k <= numCells; k++) { let x2 = x1 + cellWidth; cfl = substanceCX[k] * fc; ctx.lineTo(x2, cfl); // second inhibitor x1 = x2; } ctx.stroke(); // } }36:[] 30:{"id":"13e1d6b4072432ef","slug":"seashell-patterns","title":"Seashell patterns (WIP)","thumbnail":"9eec087405ea2cccc7b35913af2a02bcfb7765946d6bfdb90ad0d7a9b79b3249","access_level":"public","create_time":"$D2018-09-28T17:49:02.598Z","update_time":"$D2018-09-28T20:57:58.469Z","view_time":null,"first_public_time":"$D2018-09-28T18:19:26.177Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ec5efd42ce7e8331","login":"biovisualize","name":"Chris Viau","avatar_url":"https://avatars-next.observableusercontent.com/65bb5f5e54396fa26f909d2d00260f5710d56692cc2360f902c4d61182af1022","tier":"starter_2024"},"version":228,"publish_version":228,"role":null,"authored":false,"authors":[{"type":"individual","id":"9f1f6ac72dad100b","login":"biovisualize","name":"Chris Viau","avatar_url":"https://avatars-next.observableusercontent.com/65bb5f5e54396fa26f909d2d00260f5710d56692cc2360f902c4d61182af1022","tier":null}],"members":[{"type":"individual","id":"9f1f6ac72dad100b","login":"biovisualize","name":"Chris Viau","avatar_url":"https://avatars-next.observableusercontent.com/65bb5f5e54396fa26f909d2d00260f5710d56692cc2360f902c4d61182af1022","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Seashell patterns (WIP)","cells":[{"id":0,"value":"md`# Seashell patterns (WIP)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function simulate(config) {\n const { numCells, numExecutions, activatorRemovalRate } = config;\n const activatorX = [],\n inhibitorX = [],\n substanceCX = [],\n sourceDensity = [];\n\n // ----------- Initial conditions --------------------------\n for (let k = 0; k <= numCells; k++) {\n const isRandomlyActivated = ~~(Math.random() * 1.5) > 0.5;\n sourceDensity[k] = activatorRemovalRate * (0.99 + 0.02 * Math.random()); // \"Source density\" = Production of the activator, proportional to the decay rate +- 2% fluctuation\n activatorX[k] = isRandomlyActivated ? 1 : 0.3; // general initial activator concentration\n inhibitorX[k] = 1; //general initial inhibitor concentration\n substanceCX[k] = 0;\n }\n\n return computeConcentrations(config, {\n activatorX,\n inhibitorX,\n substanceCX,\n sourceDensity\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"function renderTexture({\n i,\n numCells,\n cellWidth,\n cellHeight,\n activatorX,\n inhibitorX,\n fa,\n fb,\n ctx\n}) {\n let afl = activatorX[0] * fa;\n let bfl = inhibitorX[0] * fb;\n for (let k = 0; k <= numCells; k++) {\n afl = activatorX[k] * fa;\n bfl = inhibitorX[k] * fb;\n const concentration = (afl - bfl + 75) / 120;\n ctx.fillStyle = `rgba(0, 0, 0, ${concentration})`;\n // textureCtx.fillStyle = `rgba(0, 0, 0, ${+(afl > bfl)})`\n ctx.fillRect(k * cellWidth, i * cellHeight, cellWidth, cellHeight); // concentration\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"config = {\n return {\n height: 300,\n width: 300\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"