JSFiddle - React, Tailwind, and code Playground

by avgaltsev

HTML

<canvas id="canvas" width="400" height="400"></canvas>

JavaScript

/**
 * For habr :)
 */

//window.onload = function () {
	
	var canvas = document.getElementById('canvas');
	
	var context = canvas.getContext('2d');
	
	var width = canvas.width;
	var height = canvas.height;
	
	context.fillRect(0, 0, width, height);
	
	// Color states
	var states = ['#000', '#000', '#000', '#000', '#000', '#000', '#000', '#000', '#000', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff'];
	
	// Color states (byte triplets)
	var byteStates = [];
	
	// Converting string color states to byte triplets
	for (var a = 0; a < states.length; a++) {
		byteStates[a] = [
			parseInt(states[a].charAt(1) + states[a].charAt(1), 16),
			parseInt(states[a].charAt(2) + states[a].charAt(2), 16),
			parseInt(states[a].charAt(3) + states[a].charAt(3), 16)
		]
	}
	
	// 2-dimensional array of cell states
	var field = [];
	
	// Filling up the field by random states
	for (var y = 0; y < height; y++) {
		
		var row = [];
		
		for (var x = 0; x < width; x++) {
			row[x] = Math.floor(Math.random() * byteStates.length);
		}
		
		field[y] = row;
		
	}
	
	// Field renderer
	var draw = function () {
		
		var imageData = context.getImageData(0, 0, width, height);
		
		for (var y = 0; y < height; y++) {
			
			for (var x = 0; x < width; x++) {
				
				var offset = (width * y + x) * 4;
				
				imageData.data[offset] = byteStates[field[y][x]][0];
				imageData.data[offset + 1] = byteStates[field[y][x]][1];
				imageData.data[offset + 2] = byteStates[field[y][x]][2];
				
			}
			
		}
		
		context.putImageData(imageData, 0, 0);
		
	}
	
	draw();
	
	// Ticker
	setInterval(function () {
		
		var newField = [];
		
		for (var y = 0; y < height; y++) {
			
			var newRow = [];
			
			for (var x = 0; x < width; x++) {
				
				var newState = (field[y][x] + 1) % byteStates.length;
				
				if (
					(field[(y + height - 1) % height][x] == newState) ||
					(field[(y + 1) % height][x] == newState) ||
					(field[y][(x + width - 1) % width] == newState)...