site-bkgs

commit 78798652b23d537bfdb3c675e96a9ab8e6856797
parent 8a003e3033d57096212dd1c78473edc9faa1eaf0
Author: Ryan Jeffrey <ryan@ryanmj.xyz>
Date:   Tue, 20 Apr 2021 02:21:44 -0700

Optimization with GPU rendering.

Diffstat:
M
conway.js
 | 
22
+++++++++++++++++-----

1 file changed, 17 insertions(+), 5 deletions(-)
diff --git a/conway.js b/conway.js
@@ -33,6 +33,8 @@ let cells = (_ => {
   return retVal;
 })();
 
+let tmpCanvas;
+let tmpContext;
 
 function init() {
   let newCanvas = document.createElement('canvas');
@@ -45,6 +47,13 @@ function init() {
   newCanvas.height = window.innerHeight;
   document.body.style.backgroundColor = "black";
 
+  tmpCanvas = document.createElement('canvas');
+  tmpContext = tmpCanvas.getContext('2d');
+  tmpCanvas.width  = window.innerWidth;
+  tmpCanvas.height = window.innerHeight;
+  document.body.style.backgroundColor = "black";
+
+
   document.body.appendChild(newCanvas);
   
   
@@ -64,20 +73,23 @@ function startAnimating(fps) {
 
 function draw() {
   let drawCell = { 'x' : 0, 'y' : 0, 'width' : (window.innerWidth / rows), 'height' : (window.innerHeight / cols)};
+  
 
-  context.beginPath();
-  context.fillStyle = '#FFFFFF';
+  tmpContext.beginPath();
+  tmpContext.fillStyle = '#FFFFFF';
   for(let i = 0; i < rows; i++) {
     for(let j = 0; j < cols; j++) {
       drawCell.x = i * drawCell.width;
       drawCell.y = j * drawCell.height;
 
       if(cells[i][j] === lifeState.alive)
-        context.rect(drawCell.x, drawCell.y, drawCell.width, drawCell.height);
+        tmpContext.rect(drawCell.x, drawCell.y, drawCell.width, drawCell.height);
     }
   }
-  context.fill();
-  context.closePath();
+  tmpContext.fill();
+  tmpContext.closePath();
+
+  context.drawImage(tmpCanvas, 0, 0, window.innerWidth, window.innerHeight);
 }
 
 function animate() {