This is a "HOW TO" for taking an image and converting it into a " Game of Life " run. Use the slider to progress through the steps.

First, grab an Image! 🖼

Draw that onto a Canvas ⬆️

Downscale the image ⬇️

More downscaling means larger cells for the game!

Convert that image to grayscale by manipulating the image data. We do this by averaging out the RGB values of each pixel.

Store the midpoint of those averages in state 👍

Convert that image into a seed by iterating over the image data and calculating which cells(pixels) are alive.

Make that calculation based on whether a pixel's average falls above or below that stored averages midpoint 🤓

Take the seed and draw it onto the canvas using `fillRect` .

The trick here is to upscale back to original image size so the canvas is sharp.

Fill the alive cells with random hue for style points! 😎

Start the game! 🕹

Limit the FPS