update,

_ref/GOLproject/GOL.js

@@ -0,0 +1,229 @@
+const boxColor = 150;
+let unitLength = 20;
+const strokeColor = 111;
+let columns;
+let rows;
+let currentBoard;
+let nextBoard;
+let loneliness = 2;
+let overPopulation = 3;
+let fr = 25;
+
+//scale button
+document.querySelector("#scale").addEventListener("change", function (event) {
+    unitLength = Number(event.target.value);
+    setup();
+});
+function init() {
+    for (let i = 0; i < columns; i++) {
+        for (let j = 0; j < rows; j++) {
+            currentBoard[i][j] = 0;
+            nextBoard[i][j] = 0;
+        }
+    }
+}
+
+//speed button
+document.querySelector("#speed").addEventListener("change", function (event) {
+    frameRate(Number(event.target.value));
+});
+
+
+// setup
+function setup() {
+    const canvas = createCanvas(windowWidth, windowHeight - 100);
+    canvas.parent(document.querySelector("#canvas"));
+
+    columns = floor(width / unitLength);
+    rows = floor(height / unitLength);
+
+    currentBoard = [];
+    nextBoard = [];
+    for (let i = 0; i < columns; i++) {
+        currentBoard[i] = [];
+        nextBoard[i] = [];
+    }
+    init();
+}
+
+// window resize
+function windowResized() {
+    resizeCanvas(windowWidth, windowHeight);
+    // columns & rows increase and decrease size
+    columns = Math.floor(windowWidth / unitLength);
+    rows = Math.floor(windowWidth / unitLength);
+
+    for (let i = currentBoard.length; i < columns; i++) {
+        for (let j = 0; j < rows; j++) {
+            currentBoard[i] = [];
+            nextBoard[i] = [];
+        }
+    }
+    for (let i = 0; i < columns; i++) {
+        for (let j = 0; j < rows; j++) {
+            currentBoard[i][j] = 0;
+            nextBoard[i][j] = 0;
+        }
+    }
+}
+
+document.querySelector("#life-number").addEventListener("change", (e) => {
+    loneliness = Number(e.target.value);
+});
+
+document.querySelector("#fd-number").addEventListener("input", () => {
+    generate();
+});
+
+function draw() {
+    background(255);
+    generate();
+    for (let i = 0; i < columns; i++) {
+        for (let j = 0; j < rows; j++) {
+            if (currentBoard[i][j] == 1) {
+                fill(boxColor);
+            } else {
+                fill(218);
+            }
+            stroke(strokeColor);
+            rect(i * unitLength, j * unitLength, unitLength, unitLength);
+        }
+    }
+}
+
+function generate() {
+    for (let x = 0; x < columns; x++) {
+        for (let y = 0; y < rows; y++) {
+            let neighbors = 0;
+            for (let i of [-1, 0, 1]) {
+                for (let j of [-1, 0, 1]) {
+                    if (i == 0 && j == 0) {
+                        continue;
+                    }
+                    neighbors +=
+                        currentBoard[(x + i + columns) % columns][
+                            (y + j + rows) % rows
+                        ];
+                }
+            }
+            if (currentBoard[x][y] == 1 && neighbors < loneliness) {
+                nextBoard[x][y] = 0;
+            } else if (currentBoard[x][y] == 1 && neighbors > overPopulation) {
+                nextBoard[x][y] = 0;
+            } else if (currentBoard[x][y] == 0 && neighbors == 3) {
+                nextBoard[x][y] = 1;
+            } else {
+                nextBoard[x][y] = currentBoard[x][y];
+            }
+        }
+    }
+    [currentBoard, nextBoard] = [nextBoard, currentBoard];
+}
+
+const shape = {
+    ship: [
+        [0, 1, 1],
+        [1, 0, 1],
+        [1, 1, 0],
+    ],
+
+    glider: [
+        [0, 0, 1],
+        [1, 0, 1],
+        [0, 1, 1],
+    ],
+
+    boat: [
+        [0, 1, 0],
+        [1, 0, 1],
+        [0, 1, 1],
+    ],
+};
+
+function addShape(key) {
+    const x = Math.round(random() * columns);
+    const y = Math.round(random() * rows);
+    for (let i = 0; i < shape[key].length; i++) {
+        for (let j = 0; j < shape[key][i].length; j++) {
+            currentBoard[(x + i) % columns][(y + j) % rows] = shape[key][i][j];
+        }
+    }
+}
+
+document.querySelector("#addButton").addEventListener("click", () => {
+    const select = document.querySelector("#shape-type").value;
+    addShape(select);
+    // same as -> addShape(document.querySelector('#number').value)
+});
+
+//reset
+document.querySelector("#reset-game").addEventListener("click", function () {
+    initReset();
+});
+function initReset() {
+    for (let i = 0; i < columns; i++) {
+        for (let j = 0; j < rows; j++) {
+            currentBoard[i][j] = 0;
+            nextBoard[i][j] = 0;
+        }
+    }
+}
+//stop function
+document.querySelector("#stop").addEventListener("click", () => {
+    noLoop();
+});
+
+//start
+document.querySelector("#start").addEventListener("click", () => {
+    loop();
+});
+
+//random
+document.querySelector("#random-game").addEventListener("click", function () {
+    randomGame();
+});
+
+function randomGame() {
+    for (let i = 0; i < columns; i++) {
+        for (let j = 0; j < rows; j++) {
+            currentBoard[i][j] = random() > 0.8 ? 1 : 0;
+            nextBoard[i][j] = 0;
+        }
+    }
+}
+
+//mouse control //
+
+function mouseDragged() {
+    if (mouseX > unitLength * columns || mouseY > unitLength * rows) {
+        return;
+    }
+    const x = Math.floor(mouseX / unitLength);
+    const y = Math.floor(mouseY / unitLength);
+    currentBoard[x][y] = 1;
+    fill(boxColor);
+    stroke(strokeColor);
+    rect(x * unitLength, y * unitLength, unitLength, unitLength);
+}
+
+function mousePressed() {
+    noLoop();
+    mouseDragged();
+}
+
+function mouseReleased() {
+    loop();
+}
+
+function mouseDragged() {
+    if (mouseX > unitLength * columns || mouseY > unitLength * rows) {
+        return;
+    }
+    const x = Math.floor(mouseX / unitLength);
+    const y = Math.floor(mouseY / unitLength);
+    console.log(currentBoard[x][y]);
+    currentBoard[x][y] = 1;
+    fill(boxColor);
+    stroke(strokeColor);
+    rect(x * unitLength, y * unitLength, unitLength, unitLength);
+}