(Conway's) Game of Life - Hexagonal Version

View Build
Key Action
1 - 9 Set FPS
0 Stop
QWERTYUIOPL Show An Identified Pattern
SPACE Add more random live cells

HTML

            
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Megalife</title>
    <link rel="stylesheet" href="style.css">
    <script src="hexlife.js" defer></script>
</head>
<body>
    <canvas width=400 height=400></canvas>
</body>
</html>
            
        

CSS

            
body{
    margin: 0;
}
canvas{
    border: 1px solid black;
}
            
        

JS

            
let canvas = document.querySelector("canvas")
let ctx = canvas.getContext('2d')
let dims = 60
let p = .06

canvas.width = window.innerWidth
canvas.height = window.innerHeight

let data = [...Array(dims)].map(u=>[...Array(dims)].map(h=>0))
let mem = structuredClone(data)
for(let x = 0; x < dims; x++){
    for(let y = 0; y< dims; y++){
        data[x][y] = Math.random() < p? 1 : 0
    }
}
function update(){
    mem = structuredClone(data)
    let temp = [...Array(dims)].map(u=>[...Array(dims)].map(h=>0))
    for(let r =0; r0) {
                    // if(c>0) temp[r-1][c-1] += 1
                    if(c0) temp[r+1][c-1] += 1
                    // if(c0) temp[r][c-1] += 1
                if(c 4) data[r][c] = 0
                else data[r][c] = 1
            }
            else{
                if (temp[r][c] == 2) data[r][c] = 1
                else data[r][c] = 0
            }
        }
    }

}

let q = 0.289
let qq = .9
let fps = 1

function draw(){
    ctx.beginPath()
    ctx.rect(0,0,canvas.width,canvas.height)
    ctx.fillStyle = "black"
    ctx.fill()
    for(let r =0; r{
    update()
    draw()
}
let loop = setInterval(function(){
    main()
},1000/fps)



document.onkeydown = (e) => {
    if(e.code == "Space") {
        e.preventDefault()
        // data = [...Array(dims)].map(u=>[...Array(dims)].map(h=>0))
        // mem = structuredClone(data)
        for(let x = 0; x < dims; x++){
            for(let y = 0; y< dims; y++){
                data[x][y] = Math.random() < p? 1 : data[x][y]
            }
        }
    }
    else if(e.code == "Digit1"){
        clearInterval(loop)
        fps = 1
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "Digit2"){
        clearInterval(loop)
        fps = 2
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "Digit3"){
        clearInterval(loop)
        fps = 4
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "Digit4"){
        clearInterval(loop)
        fps = 6
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "Digit5"){
        clearInterval(loop)
        fps = 10
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "Digit6"){
        clearInterval(loop)
        fps = 20
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "Digit7"){
        clearInterval(loop)
        fps = 30
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "Digit8"){
        clearInterval(loop)
        fps = 1000
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "Digit9"){
        clearInterval(loop)
        fps = 1000000
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "Digit0"){
        clearInterval(loop)
    }
    else if(e.code == "KeyQ"){
        data = [...Array(dims)].map(u=>[...Array(dims)].map(h=>0))
        mem = structuredClone(data)
        data[30][30] = 1
        data[32][30] = 1
        data[29][29] = 1
        data[30][32] = 1
        data[34][29] = 1
        data[29][34] = 1
        draw()
        clearInterval(loop)
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "KeyW"){
        data = [...Array(dims)].map(u=>[...Array(dims)].map(h=>0))
        mem = structuredClone(data)
        data[30][30] = 1
        data[31][31] = 1
        draw()
        clearInterval(loop)
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "KeyE"){
        data = [...Array(dims)].map(u=>[...Array(dims)].map(h=>0))
        mem = structuredClone(data)
        data[30][30] = 1
        data[31][31] = 1
        data[32][32] = 1
        draw()
        clearInterval(loop)
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "KeyR"){
        data = [...Array(dims)].map(u=>[...Array(dims)].map(h=>0))
        mem = structuredClone(data)
        data[30][30] = 1
        data[31][31] = 1
        data[29][32] = 1
        draw()
        clearInterval(loop)
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "KeyT"){
        data = [...Array(dims)].map(u=>[...Array(dims)].map(h=>0))
        mem = structuredClone(data)
        data[30][30] = 1
        data[30][31] = 1
        data[29][31] = 1
        draw()
        clearInterval(loop)
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "KeyY"){
        data = [...Array(dims)].map(u=>[...Array(dims)].map(h=>0))
        mem = structuredClone(data)
        data[29][30] = 1
        data[30][31] = 1
        data[29][31] = 1
        data[30][32] = 1
        data[28][33] = 1
        data[31][29] = 1
        draw()
        clearInterval(loop)
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "KeyU"){
        data = [...Array(dims)].map(u=>[...Array(dims)].map(h=>0))
        mem = structuredClone(data)
        data[30][30] = 1
        data[30][31] = 1
        data[31][31] = 1
        data[32][30] = 1
        data[31][29] = 1
        data[32][29] = 1
        draw()
        clearInterval(loop)
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "KeyI"){
        data = [...Array(dims)].map(u=>[...Array(dims)].map(h=>0))
        mem = structuredClone(data)
        data[30][30] = 1
        data[31][30] = 1
        data[33][29] = 1
        data[32][31] = 1
        data[30][28] = 1
        draw()
        clearInterval(loop)
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "KeyO"){
        data = [...Array(dims)].map(u=>[...Array(dims)].map(h=>0))
        mem = structuredClone(data)
        data[30][30] = 1
        data[31][30] = 1
        data[29][32] = 1
        data[31][32] = 1
        draw()
        clearInterval(loop)
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "KeyP"){
        data = [...Array(dims)].map(u=>[...Array(dims)].map(h=>0))
        mem = structuredClone(data)
        data[30][30] = 1
        data[31][30] = 1
        data[32][30] = 1
        data[29][31] = 1
        data[33][29] = 1
        draw()
        clearInterval(loop)
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "KeyL"){
        data = [...Array(dims)].map(u=>[...Array(dims)].map(h=>0))
        mem = structuredClone(data)
        data[30][30] = 1
        data[31][30] = 1
        data[31][29] = 1
        data[29][31] = 1
        data[30][31] = 1
        data[33][29] = 1
        data[29][33] = 1
        draw()
        clearInterval(loop)
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
    else if(e.code == "KeyK"){
        data = [...Array(dims)].map(u=>[...Array(dims)].map(h=>0))
        mem = structuredClone(data)
        data[30][30] = 1
        data[31][30] = 1
        data[30][31] = 1
        data[29][32] = 1
        data[30][32] = 1
        data[28][34] = 1
        data[29][34] = 1
        draw()
        clearInterval(loop)
        loop = setInterval(function(){
            main()
        },1000/fps)
    }
}