31:T69a,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, numExecutions: simulationConfig.numExecutions, 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; }32:T555,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; }33:Te1c,function* computeConcentrations( { numExecutions, numIterations, numCells, activatorDiffusion, activatorRemovalRate, activatorProductionRate, inhibitorDiffusion, inhibitorRemovalRate, substanceCDiffusion, substanceCRemovalRate, boundary }, { activatorX, inhibitorX, substanceCX, sourceDensity } ) { // total number of plots for (let i = 0; i <= numExecutions; i++) { // simulation iteration for each plot for (let j = 0; j <= numIterations; j++) { // cyclic boundary // concentration in the cell left of the actual cell. Left-most cell = last cell let activatorLeftCell = activatorX[numCells], inhibitorLeftCell = inhibitorX[numCells], substanceCLeftCell = substanceCX[numCells]; activatorX[numCells + 1] = activatorX[1]; inhibitorX[numCells + 1] = inhibitorX[1]; substanceCX[numCells + 1] = substanceCX[1]; // 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 // Calculation of a new activator and inhibitor concentration in cell k for (let k = 0; k <= numCells; k++) { // local concentrations let activatorConcentration = activatorX[k], inhibitorConcentration = inhibitorX[k], substanceCConcentration = substanceCX[k]; let exchangeWithNeighbor = activatorDiffusion * (activatorLeftCell - activatorConcentration + (activatorX[k + 1] - activatorConcentration)); activatorX[k] = activatorConcentration + (sourceDensity[k] * (activatorConcentration * activatorConcentration + activatorProductionRate)) / (inhibitorConcentration + substanceCConcentration) - activatorRemovalRate * activatorConcentration + exchangeWithNeighbor; inhibitorX[k] = inhibitorConcentration + sourceDensity[k] * activatorConcentration * activatorConcentration - inhibitorRemovalRate * inhibitorConcentration + inhibitorDiffusion * (inhibitorLeftCell - inhibitorConcentration + (inhibitorX[k + 1] - inhibitorConcentration)); // substanceC only in oscillating patterns and phyllotaxis if (substanceCRemovalRate > 0) { substanceCX[k] = substanceCConcentration + substanceCRemovalRate * activatorConcentration - substanceCRemovalRate * substanceCConcentration + substanceCDiffusion * (substanceCLeftCell - substanceCConcentration + (substanceCX[k + 1] - substanceCConcentration)); } // the concentrations are used as left cell concentrations in the subsequent cell activatorLeftCell = activatorConcentration; inhibitorLeftCell = inhibitorConcentration; substanceCLeftCell = substanceCConcentration; } } yield { i, activatorX, inhibitorX, substanceCX }; } return true; }34:T6e8,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(); // } }35:T502,function renderTexture({ i, numExecutions, numCells, cellWidth, cellHeight, activatorX, inhibitorX, fa, fb, ctx }) { const imageData = ctx.getImageData( 0, i * cellHeight, config.width, cellHeight ); const buf = new ArrayBuffer(imageData.data.length); const buf8 = new Uint8ClampedArray(buf); const colorData = new Uint32Array(buf); const concentrationExtent = [-2, 2]; let extent = [Number.MAX_VALUE, Number.MIN_VALUE]; for (let k = 0; k <= numCells; k++) { const concentration = activatorX[k] - inhibitorX[k]; // if (concentration < extent[0]) extent[0] = concentration; // else if (concentration > extent[1]) extent[1] = concentration; const normalized = (concentration - concentrationExtent[0]) / (concentrationExtent[1] - concentrationExtent[0]); const clamped = Math.min(Math.max(normalized, 0), 1); let color = clamped * 255; for (let l = 1; l <= cellWidth; l++) { for (let m = 0; m <= cellHeight; m++) { colorData[m * config.width + k * cellWidth + l] = (color << 24) | // alpha (0 << 16) | // blue (0 << 8) | // green 0; // red } } } imageData.data.set(buf8); ctx.putImageData(imageData, 0, i * cellHeight); }36:[] 2f:{"title":"Seashell patterns simulation","cells":[{"id":0,"value":"md`# Seashell patterns simulation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":111,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"config = {\n return {\n height: 300,\n width: 300\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}