2 lines
5.5 KiB
JavaScript
2 lines
5.5 KiB
JavaScript
const c=["30","20","51","01","62","63","03","64","54","44","34","24","14"],g=(u,t)=>{const e=`${u}${t}`;return c.includes(e)};class v{constructor(t,e,i,s){this.rows=t,this.cols=e,this.pixelSize=i,this.interRoundDelay=s,this.mouseIsDown=!1,this.paused=!1,this.intervalId=null,this.grid=[];for(let r=0;r<t;r++){this.grid.push([]);for(let h=0;h<e;h++){let a=g(h,r);this.grid[r].push(new S(a))}}for(let r=0;r<this.rows;r++)for(let h=0;h<this.cols;h++)this.grid[r][h].neighbors=this.getNeighbors(r,h);let l=this.pixelSize*this.cols,o=this.pixelSize*this.rows;this.canvas=document.createElement("canvas"),this.canvas.width=l,this.canvas.height=o,this.canvasCtx=this.canvas.getContext("2d",{alpha:!0})}start(){this.intervalId||(this.intervalId=setInterval(()=>{this.advanceRound(),this.repaint()},this.interRoundDelay))}stop(){this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null)}getNeighbors(t,e){let i=[];for(let s=t-1;s<=t+1;s++)for(let l=e-1;l<=e+1;l++)s===t&&l===e||this.grid[s]&&this.grid[s][l]&&i.push(this.grid[s][l]);return i}advanceRound(){if(!this.mouseIsDown){for(let t=0;t<this.rows;t++)for(let e=0;e<this.cols;e++)this.grid[t][e].prepareUpdate();for(let t=0;t<this.rows;t++)for(let e=0;e<this.cols;e++)this.grid[t][e].update()}}repaint(t=!1){if(this.mouseIsDown&&!t)return;let e={};for(let i=0;i<this.rows;i++)for(let s=0;s<this.cols;s++){let l=this.grid[i][s];if(!t&&!l.forceRepaint&&l.alive===l.previousState)continue;let o=l.alive?l.lifeStyle:l.deathStyle;e[o]===void 0&&(e[o]=[]),e[o].push([i,s]),l.forceRepaint=!1}for(let i in e){this.canvasCtx.fillStyle=i;for(let[s,l]of e[i])this.canvasCtx.fillRect(l*this.pixelSize,s*this.pixelSize,this.pixelSize,this.pixelSize)}}paintPixel(t,e){this.grid[t][e].setPaintStyles(this.canvasCtx),this.canvasCtx.fillRect(e*this.pixelSize,t*this.pixelSize,this.pixelSize,this.pixelSize)}setRainbowScheme(){this.grid.length,this.grid[0].length;let e=360/Math.sqrt(this.rows*this.rows+this.cols*this.cols);for(let i=0;i<this.rows;i++)for(let s=0;s<this.cols;s++){let l=Math.floor(Math.sqrt(i*i+s*s)*e),o=this.grid[i][s];o.lifeStyle=`hsl(${l}, 100%, 60%)`,o.deathStyle="#000000",o.forceRepaint=!0}}setRainbowSchemeWithin(t,e,i,s){let l=e-t,o=s-i,h=360/Math.sqrt(l*l+o*o);for(let a=t;a<e;a++)for(let n=i;n<s;n++){let p=Math.floor(Math.sqrt(a*a+n*n)*h),f=this.grid[a][n];f.lifeStyle=`hsl(${p}, 100%, 60%)`,f.deathStyle="#000000",f.forceRepaint=!0}}setPixelColors(t,e){this.grid.forEach(i=>{i.forEach(s=>{s.lifeStyle=t,s.deathStyle=e,s.forceRepaint=!0})})}setRandomPixelColors(){let t=randomInteger(1,360),e=t+randomInteger(90,270)%360;this.setPixelColors(`hsl(${t}, 100%, 60%)`,`hsl(${e}, 100%, 60%)`)}applyColorsWithin(t,e,i,s,l,o){for(let r=t;r<e;r++)for(let h=i;h<s;h++){let a=this.grid[r][h];a.lifeStyle=l,a.deathStyle=o,a.forceRepaint=!0}}applyRandomColorsWithin(t,e,i,s){let l=randomInteger(1,360),o=l+randomInteger(90,270)%360;this.applyColorsWithin(t,e,i,`hsl(${l}, 100%, 60%)`,`hsl(${o}, 100%, 60%)`)}resetLife(t){this.grid.forEach(e=>{e.forEach(i=>{i.previousState=i.alive,i.alive=Math.random()<t})}),this.repaint()}resetLifeWithin(t,e,i,s,l=.1){for(let o=t;o<e;o++)for(let r=i;r<s;r++){let h=this.grid[o][r];h&&(h.previousState=h.alive,h.alive=Math.random()<l)}this.repaint()}setRules(t,e,i,s){this.grid.forEach(l=>{l.forEach(o=>{o.underpopulation=t,o.overpopulation=e,o.reproductionMin=i,o.reproductionMax=s})})}setYinYangMode(){for(let t=0;t<this.rows;t++)for(let e=0;e<this.cols/2;e++){let i=this.grid[t][e].lifeStyle;this.grid[t][e].lifeStyle=this.grid[t][e].deathStyle,this.grid[t][e].deathStyle=i}this.repaint(!0)}setRulesWithin(t,e,i,s,l,o,r,h){for(let a=t;a<e;a++)for(let n=i;n<s;n++){let p=this.grid[a][n];p.underpopulation=l,p.overpopulation=o,p.reproductionMin=r,p.reproductionMax=h,p.forceRepaint=!0}}registerMouseListeners(){bindMultipleEventListener(this.canvas,["mousemove","touchmove"],t=>{if(t.preventDefault(),this.mouseIsDown){let e,i;if(t.touches){let s=t.target.getBoundingClientRect();e=Math.floor((t.touches[0].pageX-s.left)/this.pixelSize),i=Math.floor((t.touches[0].pageY-s.top)/this.pixelSize)}else e=Math.floor(t.offsetX/this.pixelSize),i=Math.floor(t.offsetY/this.pixelSize);this.grid[i][e].handleClick(),this.paintPixel(i,e)}}),bindMultipleEventListener(this.canvas,["mousedown","touchstart"],t=>{t.preventDefault(),t.target.getBoundingClientRect();let e,i;if(t.touches){let s=t.target.getBoundingClientRect();e=Math.floor((t.touches[0].pageX-s.left)/this.pixelSize),i=Math.floor((t.touches[0].pageY-s.top)/this.pixelSize)}else e=Math.floor(t.offsetX/this.pixelSize),i=Math.floor(t.offsetY/this.pixelSize);this.grid[i][e].handleClick(),this.paintPixel(i,e),this.mouseIsDown=!0}),bindMultipleEventListener(this.canvas,["mouseup","touchend"],t=>{t.preventDefault(),this.mouseIsDown=!1})}}class S{constructor(t){this.alive=t,this.lifeStyle="#000000",this.deathStyle="#F5FFFA",this.underpopulation=2,this.overpopulation=3,this.reproductionMin=3,this.reproductionMax=3,this.neighbors=[],this.nextState=null,this.previousState=null,this.forceRepaint=!0,this.reproductionMax<this.reproductionMin&&(this.reproductionMin=this.reproductionMax)}prepareUpdate(){let t=0,e=this.alive;for(let i of this.neighbors)i.alive&&i!==this&&t++;e&&t<this.underpopulation||e&&t>this.overpopulation?e=!1:!e&&t>=this.reproductionMin&&t<=this.reproductionMax&&(e=!0),this.nextState=e}update(){this.previousState=this.alive,this.alive=this.nextState,this.nextState=null}handleClick(){this.alive=!0}setPaintStyles(t){t.fillStyle=this.alive?this.lifeStyle:this.deathStyle}}let d=new v(8,46,10,250);document.getElementById("board")?.append(d.canvas);d.start();
|