window.onload = function() { var can = document.getElementById("canvas"); var c = can.getContext("2d"); can.width = window.innerWidth; can.height = window.innerHeight; c.fillStyle = "#AFAFAF"; c.fillRect(0,0,can.width,can.height); var CELLWIDTH = 3; function Cell(x, y){ this.x = x; this.y = y; this.glows = false; this.willGlow = false; this.hasGlown = false; this.show = function(){ if(this.glows == true){ c.fillStyle = "#00DDDD" c.fillRect(this.x, this.y, CELLWIDTH, CELLWIDTH); } } this.nextGlowing = function(){ var indexX = this.x/CELLWIDTH; var indexY = this.y/CELLWIDTH; if(indexX > 0){ if(cells[indexY][indexX-1].glows == true){ return true; } } if(indexY > 0){ if(cells[indexY-1][indexX].glows == true){ return true; } } if(indexX < row.length-1){ if(cells[indexY][indexX+1].glows == true){ return true; } } if(indexY < cells.length-1){ if(cells[indexY+1][indexX].glows == true){ return true; } } return false; } this.glowClose = function(){ var indexX = this.x/CELLWIDTH; var indexY = this.y/CELLWIDTH; var minX = indexX-3; var maxX = indexX+3; var minY = indexY-3; var maxY = indexY+3; if(minX < 0){ minX = 0; }else if(maxX >row.length-1){ maxX = row.length-1; } if(minY < 0){ minY = 0; }else if(maxY>cells.length-1){ maxY = cells.length-1; } for(var i = minY;i < maxY;i++){ for(var j=minX;j< maxX;j++){ if(cells[i][j].glows || cells[i][j].hasGlown){ return true; } } } return false; } this.glowChance = function(){ if(Math.random()< 0.0001){ this.glows = true; } } } var cells = []; var row = []; for(var y = 0; y*CELLWIDTH < window.innerHeight; y++){ row = []; for(var x = 0; x*CELLWIDTH < window.innerWidth; x++){ row.push(new Cell(x*CELLWIDTH, y*CELLWIDTH)); } cells.push(row); } //console.log(row.length); //console.log(cells[0].length); setInterval(function(){ c.fillStyle = "rgba(51, 51, 51, 0.2)"; c.fillRect(0,0,can.width,can.height); for(var y = 0; y*CELLWIDTH < window.innerHeight; y++){ for(var x = 0; x*CELLWIDTH < window.innerWidth; x++){ cells[y][x].show() if(cells[y][x].nextGlowing() && cells[y][x].glows){ cells[y][x].willGlow =false; }else if(cells[y][x].nextGlowing()){ cells[y][x].willGlow = true; } } } for(var y = 0; y*CELLWIDTH < window.innerHeight; y++){ for(var x = 0; x*CELLWIDTH < window.innerWidth; x++){ if(cells[y][x].hasGlown){ cells[y][x].willGlow =false; cells[y][x].hasGlown =false; } if(cells[y][x].glows){ cells[y][x].hasGlown = true; cells[y][x].glows = false; cells[y][x].willGlow =false; } cells[y][x].glows = cells[y][x].willGlow; cells[y][x].willGlow = false; if(cells[y][x].glowClose() == false){ cells[y][x].glowChance(); } } } }, 50); }

Glowwave