2b:null 2c:["$","title",null,{"children":"Seashell patterns simulation | Chris Viau | Observable"}] 31:T5f6,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, 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, ctx: graphCtx }); } return container; }32:Tc04,function* computeConcentrations( { numExecutions, numIterations, numCells, activatorDiffusion, activatorRemovalRate, activatorProductionRate, inhibitorDiffusion, inhibitorRemovalRate, substanceCDiffusion, substanceCRemovalRate, autocatalysisSaturation, hormoneLife, inhibitorConstant, boundary = "tight" }, { activatorX, inhibitorX, substanceCX, sourceDensity } ) { const dac = 1 - activatorRemovalRate - 2 * activatorDiffusion; let dbc = 1 - inhibitorRemovalRate - 2 * inhibitorDiffusion; let hormoneConcentration = 0.5; let lifeOfInhibitor = 0; for (let i = 0; i <= numExecutions; i++) { for (let j = 0; j <= numIterations; j++) { 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]; let bsa = 0; for (let k = 0; k <= numCells; k++) { const activatorConcentration = activatorX[k], inhibitorConcentration = inhibitorX[k], substanceCConcentration = substanceCX[k]; const saturatingSelfReinforcement = sourceDensity[k] * ((activatorConcentration * activatorConcentration) / (1 + autocatalysisSaturation * activatorConcentration * activatorConcentration) + 0.0000001); const activatorExchangeWithNeighbor = activatorDiffusion * (activatorLeftCell + activatorX[k + 1]) + saturatingSelfReinforcement / (inhibitorConstant + inhibitorConcentration); const inhibitorExchangeWithNeighbor = inhibitorDiffusion * (inhibitorLeftCell + inhibitorX[k + 1]) + saturatingSelfReinforcement; activatorX[k] = activatorConcentration * dac + activatorExchangeWithNeighbor; inhibitorX[k] = inhibitorConcentration * dbc + inhibitorExchangeWithNeighbor; bsa = bsa + hormoneLife * activatorConcentration; if (substanceCRemovalRate > 0) { substanceCX[k] = substanceCConcentration + substanceCRemovalRate * activatorConcentration - substanceCRemovalRate * substanceCConcentration + substanceCDiffusion * (substanceCLeftCell - substanceCConcentration + (substanceCX[k + 1] - substanceCConcentration)); } activatorLeftCell = activatorConcentration; inhibitorLeftCell = inhibitorConcentration; substanceCLeftCell = substanceCConcentration; } hormoneConcentration = hormoneConcentration * (1 - hormoneLife) + bsa / numCells; lifeOfInhibitor = inhibitorRemovalRate / hormoneConcentration; dbc = 1 - 2 * inhibitorDiffusion - lifeOfInhibitor; } yield { i, activatorX, inhibitorX, substanceCX }; } return true; }33:T17d5,presets = ([{ activatorDiffusion: 0.0048, activatorRemovalRate: 0.0802, activatorProductionRate: 0, inhibitorDiffusion: 0.0141, inhibitorRemovalRate: 0.0198, substanceCDiffusion: 0, substanceCRemovalRate: 0, autocatalysisSaturation: 1, inhibitorConstant: 0.0061, hormoneLife: 0.053, numExecutions: 100, numIterations: 13, numCells: 100 }, { activatorDiffusion: 0.0084, activatorRemovalRate: 0.0442, activatorProductionRate: 0, inhibitorDiffusion: 0, inhibitorRemovalRate: 0.0102, substanceCDiffusion: 0, substanceCRemovalRate: 0, autocatalysisSaturation: 1.5, inhibitorConstant: 0.0609, hormoneLife: 0.041, numExecutions: 100, numIterations: 29, numCells: 100 }, { activatorDiffusion: 0.0161, activatorRemovalRate: 0.029, activatorProductionRate: 0, inhibitorDiffusion: 0.0101, inhibitorRemovalRate: 0.0069, substanceCDiffusion: 0, substanceCRemovalRate: 0, autocatalysisSaturation: 0, inhibitorConstant: 0.0757, hormoneLife: 0.086, numExecutions: 100, numIterations: 21, numCells: 100 }, { activatorDiffusion: 0.0054, activatorRemovalRate: 0.0113, activatorProductionRate: 0, inhibitorDiffusion: 0, inhibitorRemovalRate: 0.0067, substanceCDiffusion: 0, substanceCRemovalRate: 0, autocatalysisSaturation: 0, inhibitorConstant: 0.0441, hormoneLife: 0, numExecutions: 100, numIterations: 21, numCells: 100 }, { activatorDiffusion: 0.0012, activatorRemovalRate: 0.0118, activatorProductionRate: 0, inhibitorDiffusion: 0, inhibitorRemovalRate: 0.0033, substanceCDiffusion: 0, substanceCRemovalRate: 0, autocatalysisSaturation: 0, inhibitorConstant: 0.1503, hormoneLife: 0.021, numExecutions: 150, numIterations: 100, numCells: 100 }, { activatorDiffusion: 0.0018, activatorRemovalRate: 0.01112, activatorProductionRate: 0, inhibitorDiffusion: 0, inhibitorRemovalRate: 0.0028, substanceCDiffusion: 0, substanceCRemovalRate: 0, autocatalysisSaturation: 0, inhibitorConstant: 0.1322, hormoneLife: 0.021, numExecutions: 150, numIterations: 100, numCells: 100 }, { activatorDiffusion: 0.0005, activatorRemovalRate: 0.007, activatorProductionRate: 0, inhibitorDiffusion: 0, inhibitorRemovalRate: 0.0018, substanceCDiffusion: 0, substanceCRemovalRate: 0, autocatalysisSaturation: 0, inhibitorConstant: 0.0405, hormoneLife: 0.01, numExecutions: 150, numIterations: 140, numCells: 50 }, { activatorDiffusion: 0.0315, activatorRemovalRate: 0.0131, activatorProductionRate: 0, inhibitorDiffusion: 0.4059, inhibitorRemovalRate: 0.0075, substanceCDiffusion: 0, substanceCRemovalRate: 0, autocatalysisSaturation: 0, inhibitorConstant: 0, hormoneLife: 0.17, numExecutions: 100, numIterations: 12, numCells: 100 }, { activatorDiffusion: 0.0012, activatorRemovalRate: 0.0048, activatorProductionRate: 0, inhibitorDiffusion: 0.0007, inhibitorRemovalRate: 0.0034, substanceCDiffusion: 0, substanceCRemovalRate: 0, autocatalysisSaturation: 0, inhibitorConstant: 0.15, hormoneLife: 0.007, numExecutions: 100, numIterations: 170, numCells: 50 }, { activatorDiffusion: 0, activatorRemovalRate: 0.029, activatorProductionRate: 0, inhibitorDiffusion: 0.0015, inhibitorRemovalRate: 0.0081, substanceCDiffusion: 0, substanceCRemovalRate: 0, autocatalysisSaturation: 0.023, inhibitorConstant: 0, hormoneLife: 0, numExecutions: 100, numIterations: 75, numCells: 50 }, { activatorDiffusion: 0, activatorRemovalRate: 0.0509, activatorProductionRate: 0, inhibitorDiffusion: 0.0073, inhibitorRemovalRate: 0.0159, substanceCDiffusion: 0, substanceCRemovalRate: 0, autocatalysisSaturation: 0, inhibitorConstant: 0, hormoneLife: 0, numExecutions: 100, numIterations: 16, numCells: 50 }, { activatorDiffusion: 0.01, activatorRemovalRate: 0.02, activatorProductionRate: 0.001, inhibitorDiffusion: 0.4, inhibitorRemovalRate: 0.03, substanceCDiffusion: 0, substanceCRemovalRate: 0, autocatalysisSaturation: 0, inhibitorConstant: 0, hormoneLife: 0, numExecutions: 100, numIterations: 20, numCells: 100 }, { activatorDiffusion: 0.015, activatorRemovalRate: 0.08, activatorProductionRate: 0.1, inhibitorDiffusion: 0.01, inhibitorRemovalRate: 0.014, substanceCDiffusion: 0, substanceCRemovalRate: 0, autocatalysisSaturation: 0.25, inhibitorConstant: 0.05, hormoneLife: 0.11, numExecutions: 100, numIterations: 12, numCells: 100 }, { activatorDiffusion: 0.04, activatorRemovalRate: 0.1, activatorProductionRate: 0.001, inhibitorDiffusion: 0.4, inhibitorRemovalRate: 0.03, substanceCDiffusion: 0, substanceCRemovalRate: 0, autocatalysisSaturation: 0, inhibitorConstant: 0, hormoneLife: 0, numExecutions: 60, numIterations: 20, numCells: 100 }, { activatorDiffusion: 0.01, // Diffusion of the activator activatorRemovalRate: 0.02, // Removal rate of the activator activatorProductionRate: 0.001, // Activator-independent activator production rate inhibitorDiffusion: 0.4, // Diffusion of the inhibitor inhibitorRemovalRate: 0.03, // Removal rate of the inhibitor substanceCRemovalRate: 0, autocatalysisSaturation: 0, inhibitorConstant: 0, hormoneLife: 0, numExecutions: 60, // Number of displays numIterations: 20, // number of iterations between the displays numCells: 100 // number of cells }, { activatorDiffusion: 0.004, activatorRemovalRate: 0.0015, activatorProductionRate: 0.0001, inhibitorDiffusion: 0.4, inhibitorRemovalRate: 0.0025, substanceCRemovalRate: 0, autocatalysisSaturation: 0, inhibitorConstant: 0, hormoneLife: 0, numExecutions: 50, numIterations: 200, numCells: 12 }, { activatorDiffusion: 0.005, activatorRemovalRate: 0.004, activatorProductionRate: 0.05, inhibitorDiffusion: 0.4, inhibitorRemovalRate: 0.006, substanceCDiffusion: 0.003, substanceCRemovalRate: 0.0002, autocatalysisSaturation: 0, inhibitorConstant: 0, hormoneLife: 0, numExecutions: 100, numIterations: 400, numCells: 50 }])34:T421,function renderTexture({ i, numExecutions, numCells, cellWidth, cellHeight, activatorX, inhibitorX, ctx }) { const imageData = ctx.getImageData( 0, i * cellHeight, config.width, cellHeight+1 ); const buf = new ArrayBuffer(imageData.data.length); const buf8 = new Uint8ClampedArray(buf); const colorData = new Uint32Array(buf); for (let k = 0; k <= numCells; k++) { const concentration = activatorX[k] - inhibitorX[k]; const normalized = (concentration - visConfig.concentrationMin) / (visConfig.concentrationMax - visConfig.concentrationMin); const clamped = Math.min(Math.max(normalized, 0), 1); let color = clamped * 255; for (let l = 0; 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); }35:[{"id":"d73a68a40a5d19f3cea6144be163bfc1eb08c56b68cd1cc86831b9a0e1e1e3e29b742c49bb2c605f7a446a1e598e0f12e787f783c22ea1850db0e6778a3191a8","href":"https://static.observableusercontent.com/files/d73a68a40a5d19f3cea6144be163bfc1eb08c56b68cd1cc86831b9a0e1e1e3e29b742c49bb2c605f7a446a1e598e0f12e787f783c22ea1850db0e6778a3191a8","name":"seashells.jpeg","type":"image/jpeg","lastModified":1680557130413.913,"size":12067}] 2f:{"id":"cc84d8a4b9cf6eb4","slug":"seashell-patterns-simulation-4","title":"Seashell patterns simulation","thumbnail":"44e272f901eedf2c54b879eb3b67ec35d4fbae09074f00afd2825e94bed41fda","access_level":"public","create_time":"$D2018-10-13T03:39:12.690Z","update_time":"$D2023-06-20T17:54:01.924Z","view_time":null,"first_public_time":"$D2018-10-13T05:46:26.618Z","fork":true,"stars":8,"starred":false,"owner":{"type":"team","id":"ec5efd42ce7e8331","login":"biovisualize","name":"Chris Viau","avatar_url":"https://avatars-next.observableusercontent.com/65bb5f5e54396fa26f909d2d00260f5710d56692cc2360f902c4d61182af1022","tier":"starter_2024"},"version":884,"publish_version":null,"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":2,"collection":null,"type":"notebook","body":{"title":"Seashell patterns simulation","cells":[{"id":0,"value":"md`# Seashell patterns simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":882,"value":"seashells = FileAttachment(\"seashells.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":854,"value":"html`The beautiful book The Algorithmic Beauty of Sea Shells demonstrates how an impressive variety of seashell patterns can be described with a fairly simple activator-inhibitor function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"viewof presetID = html``;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"html `The slider above let's you view some presets (currently preset ${presetID}) that replicate some common seashell patterns.

Below you can tweak all parameters of the activator-inhibitor function to explore how stripe, band, dot, triangle patterns are all functionally related.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"viewof simulationConfig = formFactory(preset, {\n activatorDiffusion: { min: 0, max: 0.05, step: 0.0001 },\n activatorRemovalRate: { min: 0, max: 0.1, step: 0.0001 },\n activatorProductionRate: { min: 0, max: 1, step: 0.0001 },\n inhibitorDiffusion: { min: 0, max: 0.45, step: 0.0001 },\n inhibitorRemovalRate: { min: 0, max: 0.05, step: 0.0001 },\n substanceCDiffusion: { min: 0, max: 0.05, step: 0.0001 },\n substanceCRemovalRate: { min: 0, max: 0.05, step: 0.0001 },\n autocatalysisSaturation: { min: 0, max: 1, step: 0.001 },\n inhibitorConstant: { min: 0, max: 1, step: 0.0001 },\n hormoneLife: { min: 0, max: 1, step: 0.001 },\n numExecutions: { min: 1, max: 150, step: 1 },\n numIterations: { min: 1, max: 1000, step: 1 },\n numCells: { min: 50, max: 300, step: 50 }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof visConfig = formFactory(\n { concentrationMin: -0.4, concentrationMax: 0.3 },\n {\n concentrationMin: { min: -10, max: 10, step: 0.01 },\n concentrationMax: { min: -10, max: 10, step: 0.01 }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"html`Explanations and variants of this algorithm are well explained in the book as well as the physical and chemical mechanism it models. The function below is an interpretation of some of the BASIC code that comes with the book.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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 const rndLUT = [0, 2, 3, 5, 7, 11, 13, 16, 19, 26, 31, 34, 39, 41, 45, 47, 51, 52, 56, 57, 58, 61, 63, 65, 67, 69, 73, 79, 83, 85, 87, 94, 95, 99]\n for (let k = 0; k <= numCells; k++) {\n const isRandomlyActivated = rndLUT.indexOf(k) > -1;\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","output":"$undefined","database":"$undefined"},{"id":802,"value":"preset = presets[presetID]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"function renderGraph({\n i,\n numExecutions,\n numCells,\n cellWidth,\n activatorX,\n inhibitorX,\n sourceDensity,\n substanceCX,\n ctx\n}) {\n const vScale = 40;\n const executionSteps = 20;\n if (i % executionSteps !== 0) {\n return;\n }\n\n ctx.fillStyle = `rgba(255, 255, 255, ${1 / (numExecutions / executionSteps)})`;\n ctx.fillRect(0, 0, config.width, config.height);\n\n ctx.beginPath();\n ctx.strokeStyle = \"deepskyblue\";\n let x1 = 0;\n let afl = activatorX[0];\n ctx.moveTo(x1, afl);\n for (let k = 0; k <= numCells; k++) {\n let x2 = k * cellWidth;\n afl = activatorX[k] * vScale;\n ctx.lineTo(x2, afl); // activator\n }\n ctx.stroke();\n\n ctx.beginPath();\n ctx.strokeStyle = \"orange\";\n x1 = 0;\n let bfl = inhibitorX[0];\n ctx.moveTo(x1, bfl);\n for (let k = 0; k <= numCells; k++) {\n let x2 = k * cellWidth;\n bfl = inhibitorX[k] * vScale;\n ctx.lineTo(x2, bfl); // inhibitor\n }\n ctx.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"formFactory = function(items, formConfig) {\n const div = html``;\n\n const inputs = [];\n for (const key in items) {\n const input = inputFactory(\n { label: key, value: items[key] },\n formConfig[key]\n );\n inputs.push(div.appendChild(input));\n }\n\n div.oninput = () => {\n div.value = {};\n inputs.forEach(input => {\n div.value[input.className] = input.value;\n });\n };\n\n div.oninput();\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"inputFactory = function(config, options) {\n const container = html`\n

\n \n \n \n

\n `;\n\n const range = container.querySelector(\"[type=range]\");\n const number = container.querySelector(\"[type=number]\");\n const label = container.querySelector(\"label\");\n\n if (options) {\n Object.assign(range, options);\n }\n\n label.innerText = config.label;\n container.className = config.label;\n container.value = range.value = number.value = config.value;\n\n range.addEventListener(\n \"input\",\n () => (number.value = container.value = range.valueAsNumber)\n );\n number.addEventListener(\n \"input\",\n () => (range.value = container.value = number.valueAsNumber)\n );\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"config = {\n return {\n height: 300,\n width: 300\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"