30:T446,{ if (U.length == 0) { U[0] = {value: randomLattice == "all down" ? -1*calcEnergy():calcEnergy(), type: "energy", iter: 0, T: T, H: H}; M[0] = {value: calcMagnetization(), type: "magnetization", iter: 0, T: T, H: H, magnetization: externalField}; mutable stats.push(U[0]); mutable stats.push(M[0]); } while (pause) { const startTime = new Date(); const counter = U.length - 1; U[counter + 1] = { value: U[counter].value + isingNIter(nIter), type: "energy", iter: counter + 1, T: T, H: H }; M[counter + 1] = { value: calcMagnetization(), type: "magnetization", iter: counter + 1, T: T, H: H, magnetization: externalField, }; mutable stats.push(U[counter +1]); mutable stats.push(M[counter +1]); mutable stats = stats; mutable statsTemps.push(U[counter +1]) mutable statsTemps.push(M[counter +1]) mutable statsTemps = statsTemps; //runtimes.push({iterations: nIter, time: new Date()-startTime, gridSize: N}) yield Promises.delay(5, stats) } }31:T1066,/*{ const height = 450 const context = DOM.context2d(width, height); const margin = 50; const maxPoints = 900; context.clearRect(0, 0, width, height); const offsetY = 100; const offsetX = 200; const drawCoordinateSystem = () => { context.strokeStyle = "#000000"; context.lineWidth = 2; context.beginPath(); context.moveTo(margin+30, height-margin+25); context.lineTo(margin+30, margin); // Y-axis context.moveTo(margin-25, height - margin); context.lineTo(width - margin, height - margin); // X-axis context.stroke(); // Draw arrow heads context.beginPath(); context.moveTo(width - margin, height - margin); context.lineTo(width - margin - 10, height - margin - 5); context.moveTo(width - margin, height - margin); context.lineTo(width - margin - 10, height - margin + 5); context.moveTo(margin+30, margin); context.lineTo(margin - 5 +30, margin + 10); context.moveTo(margin + 30, margin); context.lineTo(margin + 5 + 30, margin + 10); context.stroke(); context.strokeStyle = "#000000"; // upper left tick context.beginPath(); context.moveTo(margin-5 +30, margin+20); context.lineTo(margin+5 + 30, margin+20); // lower left tick context.moveTo(margin-5 +30, height-offsetY); context.lineTo(margin+5 +30, height-offsetY); // lower left X context.moveTo(offsetX/3+margin, height-margin-5); context.lineTo(offsetX/3+margin, height-margin+5); // lower right X context.moveTo(width - offsetX + margin, height-margin-5); context.lineTo(width - offsetX + margin, height-margin+5); context.stroke(); // Adding tick labels //context.fillStyle = "#000000"; // context.fillText(tickValueX.toFixed(1), margin + i*(width - 2 * margin)/numberOfTicks, height - margin + tickSize); // context.fillText(tickValueY.toFixed(1), margin - tickSize, height - margin - i*(height - 2 * margin)/numberOfTicks); // context.fill(); context.font = "16px Arial"; context.fillText("Energy", margin, margin - 10); context.fillText("0", offsetX/3+margin-4, height - margin + 20); context.fillText("", width - offsetX, height - margin + 20); context.fillText("Iterations", width - 100, height - margin - 20); return context } drawCoordinateSystem(); //U[0] = {U: calcEnergy(), iter: 0}; const updateGraph = () => { const maxX = d3.max(U.map(d => d.iter)); const maxY = d3.max(U.map(d => d.U)); const minY = d3.min(U.map(d => d.U)); const energyScaling = (height - margin - 100) const xScaling = (width - margin - offsetX) / maxX; const yScaling = (height-margin-offsetY-20)/(maxY-minY); // Dynamically adjust the iteration step to maintain performance const iterationStep = Math.max(1, Math.floor(U.length / maxPoints)); context.beginPath(); for (let i = 0; i < U.length; i += iterationStep) { const x = margin + U[i].iter * xScaling + offsetX/3; //const y = (maxY-U[i].U) *yScaling + maxY-minY; const y = yScaling * (maxY - U[i].U) + offsetY/2+20 context.lineTo(x, y); } context.stroke(); // Draw points // for (let i = 100; i < U.length; i += iterationStep) { // const x = margin + U[i].iter * xScaling; // const y = height - margin - U[i].U * yScaling; // context.beginPath(); //context.arc(x, y, 2, 0, Math.PI * 2); // context.fill(); // } // Update dynamic axis labels context.font = "16px Arial"; context.fillStyle = "#000000"; // Y-axis label (Energy) context.fillText(`${(maxY).toFixed(0)}`, 0, margin+25); context.fillText(`${(minY).toFixed(0)}`, 0, height-offsetY+5); // X-axis label (Iterations) context.fillText(`${(maxX*10000).toFixed(0)}`, width - offsetX, height - margin + 20); }; while (false) { const counter = U.length - 1; U[counter + 1] = { U: U[counter].U + isingNIter(10000), iter: counter + 1 }; context.save(); context.clearRect(0, 0, width, height); drawCoordinateSystem(); updateGraph(); context.restore(); yield Promises.delay(N/150, context.canvas); } }*/32:[] 2e:{"title":"Ising Model","cells":[{"id":0,"value":"# Ising Model","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"viewof N = Inputs.range([1, 1000], {value: 100, step: 1, label: \"Grid Size\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"viewof randomLattice = Inputs.select([\"random\", \"all up\", \"all down\"], {label: \"Initial lattice configuration\", value: \"random\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"viewof T = Inputs.range([0.1, 5], {label: \"Temperature (critical temperature around 2.3)\", step: 0.1, value: 1.7})","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"viewof reset = Inputs.button(\"Reset Animation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":849,"value":"viewof paused = ButtonToggle({\n onText: `${fas`pause`} Pause Animation`,\n offText: `${fas`play`} Play Animation`,\n value: \"playing\",\n click: value => value === \"playing\" ? \"paused\" : \"playing\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"viewof externalField = Inputs.toggle({label: \"Apply an external magnetic field\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"viewof H = Inputs.range([-1, 1], {label: \"external magnetic field\", value: 0.1, step: 0.1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"md`#### The current energy of the system is: ${d3.mean(stats.slice(-200).filter(s => s.type == \"energy\").map(E => E.value)).toFixed(2)} +- ${Math.abs(d3.deviation(stats.slice(-200).filter(s => s.type == \"energy\").map(M => M.value)).toFixed(2))} (${Math.abs((d3.deviation(stats.slice(-200).filter(s => s.type == \"energy\").map(M => M.value)).toFixed(2)/d3.mean(stats.slice(-200).filter(s => s.type == \"energy\").map(E => E.value)).toFixed(2)*100).toFixed(2))}%) \\n #### With a magnetization of: ${d3.mean(stats.slice(-200).filter(s => s.type == \"magnetization\").map(E => E.value)).toFixed(2)} +- ${d3.deviation(stats.slice(-200).filter(s => s.type == \"magnetization\").map(M => M.value)).toFixed(2)} (${Math.abs((d3.deviation(stats.slice(-200).filter(s => s.type == \"magnetization\").map(M => M.value)).toFixed(2)/d3.mean(stats.slice(-200).filter(s => s.type == \"magnetization\").map(E => E.value)).toFixed(2)*100).toFixed(2))}%)\\n #### (Mean and standard deviation of the last 5000 MC-iterations)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"{\n const context = DOM.context2d(width, Math.min(450, width));\n \n const cellWidth = 450 / N;\n const cellHeight = 450 / N;\n while (true) {\n context.save();\n for (let i = 0; i < N; i++) {\n for (let j = 0; j < N; j++) {\n const value = (grid[i][j]+1)/2;\n const grayScale = Math.floor(value * 255);\n context.fillStyle = `rgb(${grayScale}, ${grayScale}, ${grayScale})`;\n context.fillRect(j * cellWidth, i * cellHeight, cellWidth, cellHeight);\n }\n }\n context.restore()\n yield Promises.delay(4/1000*N^2, context.canvas)\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"md`#### Below you can see the current energy and magnetization of our system`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"Plot.plot({\n marginLeft: 60,\n grid: true,\n marginRight: 80,\n x: {\n insetLeft: 0,\n label: \"Iterations →\"\n },\n y: {\n label: \"↑ Energy\",\n insetBottom: 0,\n tickFormat: \"\"\n },\n marks: [\n //Plot.axisFy([curMaxValue, curMinValue]),\n Plot.ruleY([curMinValue - Math.abs(curMinValue) / 10]),\n Plot.ruleX([0]),\n Plot.lineY(stats, { x: i => i.iter*nIter, y: \"value\", fy: \"type\" }),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"md`#### You can extend the graph below by running the simulation for multiple temperatures. The datapoints are the mean value of the last 50 000 Isingiterations.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"Plot.plot({\n marginLeft: 60,\n grid: true,\n marginRight: 80,\n x: {\n insetLeft: 0,\n label: \"Temperature →\"\n },\n y: {\n label: \"↑\",\n insetBottom: 0,\n tickFormat: \"\"\n },\n marks: [\n //Plot.axisFy([curMaxValue, curMinValue]),\n Plot.ruleY([0]),\n Plot.ruleX([0]),\n Plot.dot(magTempData, { x: \"T\", y: \"mean\", fy: \"type\"}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"md`#### The graphs here are the energies, each for different temperatures! If you have activated the external (magnetic) field and vary with some values, the colours of the lines indicate the different strength of the fields.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"Plot.plot({\n marginLeft: 60,\n grid: true,\n color: {\n type: \"linear\",\n domain: [-1, 1],\n scheme: \"turbo\",\n legend: true// use the \"accent\" scheme\n },\n \n marginRight: 80,\n x: {\n insetLeft: 0,\n label: \"Iterations →\"\n },\n y: {\n label: \"↑ Energy\",\n insetBottom: 0,\n tickFormat: \"\"\n },\n marks: [\n //Plot.axisFy([curMaxValue, curMinValue]),\n Plot.ruleY([curMinValue - Math.abs(curMinValue) / 10]),\n Plot.ruleX([-stats.length / 25]),\n Plot.lineY(statsTemps.filter(s => s.type == \"energy\"), { x: i => i.iter*nIter, y: \"value\", fy: \"T\", stroke: s => s.H}),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1015,"value":"Plot.plot({\n marginLeft: 60,\n grid: true,\n color: {\n type: \"linear\",\n domain: [-1, 1],\n scheme: \"turbo\",\n legend: true// use the \"accent\" scheme\n },\n \n marginRight: 80,\n x: {\n insetLeft: 0,\n label: \"Iterations →\"\n },\n y: {\n label: \"↑ Magnetization\",\n insetBottom: 0,\n tickFormat: \"\"\n },\n marks: [\n //Plot.axisFy([curMaxValue, curMinValue]),\n Plot.ruleY([curMinValue - Math.abs(curMinValue) / 10]),\n Plot.ruleX([-stats.length / 25]),\n Plot.lineY(statsTemps.filter(s => s.type == \"magnetization\"), { x: i => i.iter*nIter, y: \"value\", fy: \"T\", stroke: s => s.H}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":956,"value":"stats.slice(-1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"isingNIter = (nIter) => {\n const dE = []\n for (let iter = 0; iter < nIter; iter++) {\n const randRow = Math.floor(Math.random() * N);\n const randCol = Math.floor(Math.random() * N);\n dE.push(deltaEnergy(randRow, randCol))\n }\n return d3.sum(dE)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"deltaEnergy = (row, col) => {\n let externalEnergy = 0;\n if (externalField) externalEnergy = mu*H*grid[row][col];\n const dE = (2 * grid[row][col] * (grid[(row + 1 + N) % N][col] + grid[row][(col + 1 + N) % N] +\n grid[(row - 1 + N) % N][col] + grid[row][(col - 1 + N) % N]) - externalEnergy);\n \n if (dE < 0 || Math.random() < Math.exp(-dE / T)) {\n grid[row][col] *= -1;\n return dE \n }\n return 0\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"calcEnergy = () => {\n let energy = 0;\n for (let row = 0; row < N; row++) {\n for (let col = 0; col < N; col++) {\n let externalEnergy = 0\n if (externalField) externalEnergy = mu*H*grid[row][col];\n energy += (grid[row][col] * (grid[(row + 1 + N) % N][col] + grid[row][(col + 1 + N) % N] +\n grid[(row - 1 + N) % N][col] + grid[row][(col - 1 + N) % N]) - externalEnergy)\n }\n }\n return energy\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"calcMagnetization = () => {\n return d3.sum(grid.map(row => d3.sum(row)))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"curMinValue = d3.min(stats.map((u) => u.U))","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"curMaxValue = d3.max(stats.map((u) => u.U))","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"mutable stats = {\n randomLattice;\n reset;\n T;\n N;\n return [];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"mutable U = {\n randomLattice;\n reset;\n T;\n N;\n return [];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":625,"value":"mutable M = {\n randomLattice;\n reset;\n T;\n N;\n return [];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"mutable grid = {\n reset;\n T;\n N;\n if (randomLattice == \"random\") return Array.from({length: N}, () => Array.from({length: N}, () => Math.random() < 0.5 ? -1 : 1))\n else if (randomLattice == \"all up\") return Array.from({length: N}, () => Array.from({length: N}, () => 1))\n else if (randomLattice == \"all down\") return Array.from({length: N}, () => Array.from({length: N}, () => -1))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":747,"value":"mutable statsTemps = [];","pinned":true,"hidden":false,"mode":"ojs"},{"id":879,"value":"magTempData = {\n const magData = statsTemps.filter(t => t.type == \"magnetization\" && !t.magnetization);\n const engData = statsTemps.filter(t => t.type == \"energy\" && !t.magnetization);\n const temps = [];\n magData.forEach(m => temps.includes(m.T) ? null:temps.push(m.T));\n return temps.reduce((arr, T) => {\n const magDataForTemp = magData.filter(M => M.T == T);\n const engDataForTemp = engData.filter(E => E.T == T);\n const meanM = d3.mean(magDataForTemp.slice(-10).map(M => Math.abs(M.value)));\n const meanE = d3.mean(engDataForTemp.slice(-10).map(E => E.value));\n const varianceM = d3.variance(magDataForTemp.slice(-10).map(M => Math.abs(M.value)));\n const varianceE = d3.variance(engDataForTemp.slice(-10).map(E => E.value));\n return arr.concat([{\n T: T,\n mean: meanM,\n variance: varianceM,\n type: \"magnetization\"\n }, {\n T: T,\n mean: meanE,\n variance: varianceE,\n type: \"energy\",\n }])\n }, []);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":706,"value":"mu = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":550,"value":"nIter = 5000;","pinned":true,"hidden":false,"mode":"ojs"},{"id":861,"value":"pause = paused == \"playing\" ? true:false","pinned":true,"hidden":false,"mode":"ojs"},{"id":839,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":844,"value":"import { ButtonToggle } from \"@harrystevens/toggle-button-text\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":852,"value":"import { style as faStyle, fas } from \"@airbornemint/fontawesome\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":854,"value":"faStyle({solid: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}