game: add grid

src/components/Game.js

@@ -1,24 +1,49 @@
 import React from "react";
 import Sketch from "react-p5";
 
-let x = 50;
-let y = 50;
+let positions = [];
+let initialPosition;
+
+let stepX;
+let stepY;
+let numCols = 50;
+let numRows = 25;
+
 
 export default (props) => {
   const setup = (p5, canvasParentRef) => {
-    // use parent to render the canvas in this ref
-    // (without that p5 will render the canvas outside of your component)
-    p5.createCanvas(500, 500).parent(canvasParentRef);
+    p5.createCanvas(1000, 500).parent(canvasParentRef);
+
+    stepX = p5.width / numCols; //to make sure they are evenly spaced, we divide the width and height by numberOfColumns
+    stepY = p5.height / numRows; //and numberOfRows respectively
+
+    for (let x = 0; x < p5.width; x += stepX) {
+      //start at the first column, where x = 0
+
+      for (let y = 0; y < p5.height; y += stepY) {
+        //go through all the rows (y = 0, y = yStep * 1, y  = yStep * 2, etc.)
+
+        const p = p5.createVector(x, y); //we create a vector at this location
+
+        positions.push(p); // and then we put the vector into the array
+      }
+      //at the end of the inner for loop, we go back to the first loop, and we increment x
+      //now our column is going to b x = xStep*1, and we populate all the rows with the inner for loop
+      //and again, and again until x > width
+    }
   };
 
   const draw = (p5) => {
-    p5.background(0);
-    p5.ellipse(x, y, 70, 70);
-    // NOTE: Do not use setState in the draw function or in functions that are executed
-    // in the draw function...
-    // please use normal variables or class properties for these purposes
-    x++;
+    p5.fill(100, 100, 100); //pink is cool
+    p5.noStroke();
+
+    for (let i = 0; i < positions.length; i++) {
+      //go through all our positions
+      p5.ellipse(positions[i].x, positions[i].y, 2, 2); //put a circle at each of them
+    }
   };
 
-  return <Sketch setup={setup} draw={draw} />;
+  return (
+      <Sketch setup={setup} draw={draw} />
+  );
 };