-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcanvasLife-3.min.html
1 lines (1 loc) · 6.8 KB
/
canvasLife-3.min.html
1
<!doctype html><html lang="de" id="*"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>canvasLife</title></head><body style="color : #81d742;"> <canvas id="myCanvas" width="400" height="400" style="border : 2px solid #81d742;">Ihr Browser ist veraltet. Bitte installieren Sie eine aktuelle Version des Browsers.</canvas><p id="buttonbar"> <input id="probability" name="probability" type="range" min="0" max="100" value="50" step="1" placeholder="Wahrscheinlichkeit für eine Zelle, dass sie in das Feld gelangt (0-100%, Standard: 50&)" onmousemove="rangeProbMove();" title="Wahrscheinlichkeit für eine Zelle, dass sie in das Feld gelangt (0-100%, Standard: 50&)" /> <span id="probabilityCells">50%</span> <button id="restart" name="restart" onclick="restart();" title="Startet die Simulation neu" value="restart"><img style="vertical-align : middle;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAA0lBMVEUAAACAqkCAuEd7rUJ9tkR7tUJ6sUN6tEF9tEN8s0N7s0F7s0J8s0J9tEF7skN8skJ7s0F9tEJ9tEJ8s0J8s0F8tEJ8s0J8s0J8s0N9tER+tEV/tUaAtUiBtkmCt0qDt0yIulONvVqQv16RwF+TwWKWwmacx2+fyHOgyXSky3qpzoGqz4Os0IWu0Yeu0Yiy1I6z1I+01ZC72Zq+256/3KDB3KLC3qTE3qbE36fK4q/O5LTP5bbR5rnR57nT57vV6b7V6b/W6cDY68Lb7cfc7cfc7cg0YrKtAAAAF3RSTlMADBIfMT5FS1hrcnh/hZmttLrV4+r3/jEDOpkAAADiSURBVHjapZDXEoIwEEXtoCiKAmuv2LH3LkL+/5fcJGhkfNP7sLl7T2azk9AfispKOhn/iiUNmPRMOJCr8FZB+shz8Ck5eF/IjL3mAzRt2xZE8wF9d04Iy0o9WhN8T2p3dw4GnoVVZUBG1yZDPqpyXWPNM6CgG3kN4Fo8igAGA2lsp27JBxMPnclAEts+6fhge8SiMxBHV3M2PLfcsdhXRzskszJd4nyq4pHiIIO2OCe31eLgXlrYGBEOwgVAdZdHZ2/XqVXefw4BZcXvymYwF4ppr9jgc4QSat4wdS0VCf2qJziAIc7jLHW7AAAAAElFTkSuQmCC" alt="restart-logo" />Restart</button> <button id="stop" name="stop" onclick="stop();" title="Stoppt die Simulation" value="stop"><img style="vertical-align : middle;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABlBMVEUAAAD/PQBxF8WcAAAAAXRSTlMAQObYZgAAABJJREFUeAFjGJqAEQ6Gv8SQBAB3iABlj2apNwAAAABJRU5ErkJggg==" alt="stop-logo" />Stop</button> <button id="go" name="go" onclick="go();" title="Führt die Simulation weiter aus" value="go"><img style="vertical-align : middle;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAADFBMVEUAAAAgl/MhlvMhlvP7jjceAAAAA3RSTlMAQL9R0SXGAAAAK0lEQVR4AdXOMQEAIAwDQeD9e0bBCUjGv6E9m3sXUKACFahABGQf97vIM/uzFQCXf4mG3wAAAABJRU5ErkJggg==" alt="go-logo" />Go</button></p><p id="statistic"> <span id="gridSize">Feldgröße: ---</span><br /> <span id="maxCellPlaces">Zellplätze: ---</span><br /> <span id="probabilityCellsStats">Wahrscheinlichkeit: ---</span><br /> <span id="livingCellsStartState">Lebende Zellen zu Startbeginn: ---</span><br /> <span id="generations">Generationen: ---</span><br /> <span id="livingCells">Lebende Zellen: ---</span><br /> <span id="celluarityGlobal">Zelldichte global: ---</span><br /> <span id="celluarityLiving">Zelldichte lebend: ---</span><br /></p> <script>var gridHeight=window.document.getElementById("myCanvas").height;var gridWidth=window.document.getElementById("myCanvas").width;var theGrid=createArray(gridWidth);var mirrorGrid=createArray(gridWidth);var drawColor="#81d742";var repeater;var maxCellPlaces=gridWidth*gridHeight;var generations=0;var livingCells=0;var livingCellsStartState=0;var celluarityGlobal=0;var celluarityLiving=0;var gridSizeTextContent="Feldgröße: ";var maxCellPlacesTextContent="Zellplätze: ";var probabilityCellsTextContent="Wahrscheinlichkeit: ";var livingCellsStartStateTextContent="Lebende Zellen zu Startbeginn: ";var generationsTextContent="Generationen: ";var livingCellsTextContent="Lebende Zellen: ";var celluarityGlobalTextContent="Zelldichte global: ";var celluarityLivingTextContent="Zelldichte lebend: ";document.getElementById("gridSize").textContent=gridSizeTextContent+gridWidth+"x"+gridHeight;document.getElementById("maxCellPlaces").textContent=maxCellPlacesTextContent+maxCellPlaces;fillRandom();tick();function RoundFloat(x,n) {if(n<1||n>14)return false;var e=Math.pow(10,n);var k=(Math.round(x*e)/e).toString();if(k.indexOf(".")==-1)k+=".";k+=e.toString().substring(1);return k.substring(0,k.indexOf(".")+n+1);} function rangeProbMove() {document.getElementById("probabilityCells").textContent=document.getElementById('probability').value+'%';} function restart() {generations=0;livingCells=0;livingCellsStartState=0;stop();fillRandom();tick();} function stop() {cancelAnimationFrame(repeater);} function go() {stop();tick();} function tick() {drawGrid();updateGrid();repeater=requestAnimationFrame(tick);} function createArray(rows) {var arr=[];for(var i=0;i<rows;i++) {arr[i]=[];} return arr;} function fillRandom() {var max=document.getElementById("probability").getAttribute("max");var value=document.getElementById("probability").value;var arr=new Array(max);for(var i=0;i<max;i++) {if(i<value)arr[i]=1;} livingCellsStartState=0;for(var j=0;j<gridHeight;j++) {for(var k=0;k<gridWidth;k++) {var rawRandom=Math.random();var improvedNum=(rawRandom*max);var randomBinary=Math.floor(improvedNum);if(arr[randomBinary]===1) {theGrid[j][k]=1;livingCellsStartState++;}else{theGrid[j][k]=0;}}} document.getElementById("livingCellsStartState").textContent=livingCellsStartStateTextContent+livingCellsStartState;document.getElementById("probabilityCellsStats").textContent=probabilityCellsTextContent+value+"%";} function drawGrid() {livingCells=0;var c=document.getElementById("myCanvas");if(c.getContext) {var ctx=c.getContext("2d");ctx.clearRect(0,0,c.width,c.height);for(var j=1;j<gridHeight;j++) {for(var k=1;k<gridWidth;k++) {if(theGrid[j][k]===1) {livingCells++;ctx.fillStyle=drawColor;ctx.fillRect(j,k,1,1);}}} celluarityGlobal=(livingCells/maxCellPlaces)*100;celluarityLiving=(livingCells/livingCellsStartState)*100;document.getElementById("generations").textContent=generationsTextContent+generations;document.getElementById("livingCells").textContent=livingCellsTextContent+livingCells;document.getElementById("celluarityGlobal").textContent=celluarityGlobalTextContent+RoundFloat(celluarityGlobal,3)+"%";document.getElementById("celluarityLiving").textContent=celluarityLivingTextContent+RoundFloat(celluarityLiving,3)+"%";}} function updateGrid() {generations++;for(var j=1;j<gridHeight-1;j++) {for(var k=1;k<gridWidth-1;k++) {var totalCells=0;totalCells+=theGrid[j-1][k-1];totalCells+=theGrid[j-1][k];totalCells+=theGrid[j-1][k+1];totalCells+=theGrid[j][k-1];totalCells+=theGrid[j][k+1];totalCells+=theGrid[j+1][k-1];totalCells+=theGrid[j+1][k];totalCells+=theGrid[j+1][k+1];if(theGrid[j][k]===0) {switch(totalCells) {case 3:mirrorGrid[j][k]=1;break;default:mirrorGrid[j][k]=0;}}else if(theGrid[j][k]===1){switch(totalCells) {case 0:case 1:mirrorGrid[j][k]=0;break;case 2:case 3:mirrorGrid[j][k]=1;break;case 4:case 5:case 6:case 7:case 8:mirrorGrid[j][k]=0;break;default:mirrorGrid[j][k]=0;}}}} for(var j=0;j<gridHeight;j++) {for(var k=0;k<gridWidth;k++) {theGrid[j][k]=mirrorGrid[j][k];}}}</script> </body></html>