<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<canvas id='canvas' width='320' height='320'></canvas>
</body>
</html>
// Code goes here
var c, ctx;
document.addEventListener("DOMContentLoaded", function() {
c = document.getElementById('canvas');
ctx = c.getContext('2d');
fillRandom();
requestAnimationFrame(doLife);
});
function randomColor(){
return 'rgba(' + Math.floor(Math.random()*256) + ',' + Math.floor(Math.random()*256) + ',' + Math.floor(Math.random()*256) + ',1)';
}
function fillRandom(){
for(var i=0; i<320; i++){
for(var j=0; j<320; j++){
ctx.fillStyle = randomColor();
ctx.fillRect(i,j,1,1);
}
}
}
function doLife(){
var imageData = ctx.getImageData(0,0,320,320);
// console.log(imageData);
var canvas = document.createElement('canvas');
var newData = canvas.getContext('2d').createImageData(320,320);
for(var x=0; x<imageData.width; x++){
for(var y=0; y<imageData.height; y++){
var alive = isAlive(x,y,imageData);
var aliveNeighbors = numAliveNeighbors(x,y,imageData);
if(alive && (aliveNeighbors < 2 || aliveNeighbors > 3)){
color = manCell(x,y,false,imageData);
} else if(!alive && aliveNeighbors == 3){
color = manCell(x,y,true,imageData);
} else {
color = getColor(x,y,imageData);
}
// console.log(color);
setColor(x,y,newData,color);
}
}
ctx.putImageData(newData,0,0);
requestAnimationFrame(doLife);
}
function isAlive(x,y, imageData){
return imageData.data[y*imageData.width*4 + x*4 + 0] >= 130;
}
function numAliveNeighbors(x,y,imageData){
var numAlive = 0;
for(var i=-1; i<=1; i++){
for(var j=-1; j<=1; j++){
if(j===0 && i===0) continue;
var newX = x+i;
var newY = y+j;
if(newX >=0 && newY >=0 && newX <imageData.width && newY < imageData.height && isAlive(newX, newY, imageData)){
numAlive++;
}
}
}
return numAlive;
}
function getColor(x,y,imageData){
return [
imageData.data[y*imageData.width*4 + x*4],
imageData.data[y*imageData.width*4 + x*4 + 1],
imageData.data[y*imageData.width*4 + x*4 + 2],
imageData.data[y*imageData.width*4 + x*4 + 3]
];
}
function setColor(x,y,imageData,color){
imageData.data[y*imageData.width*4 + x*4] = color[0];
imageData.data[y*imageData.width*4 + x*4 + 1] = color[1];
imageData.data[y*imageData.width*4 + x*4 + 2] = color[2];
imageData.data[y*imageData.width*4 + x*4 + 3] = color[3];
}
function manCell(x, y, alive, imageData){
var colors = [];
for(var i=-1; i<=1; i++){
for(var j=-1; j<=1; j++){
if(j===0 && i===0) continue;
var newX = x+i;
var newY = y+j;
if(newX >= 0 && newY >=0 && newX < imageData.width && newY < imageData.height){
var aliveCheck = isAlive(newX,newY,imageData);
if(alive && aliveCheck || !alive && !aliveCheck){
colors.push(getColor(newX,newY,imageData));
}
}
}
}
if(colors.length > 0){
return colors[Math.floor(Math.random()*colors.length)*0];
}
// console.log('huh...',x,y,alive, isAlive(x,y,imageData));
return invert(getColor(x,y,imageData));
return [Math.floor(Math.random()*256),Math.floor(Math.random()*256),Math.floor(Math.random()*256),Math.floor(Math.random()*256)];
}
function invert(color){
return [255-color[0], 255-color[1], 255-color[2], 255];
}
/* Styles go here */
canvas {
width:500px;
height: 500px;
}