grid.js

var grid = [];
var colors = [
	"#1D2B53",
	"#7E2553",
	"#AB5236",
	"#5F574F",
	"#83769C",
	"#008751",
	"#00E436",
	"#29ADFF",
	"#FF77A8",
	"#FF004D",
	"#FFA300",
	"#FFEC27",
	"#fafafa"
];

function setup() {
	createCanvas(windowWidth, windowHeight);
	frameRate(30)
	initGrid(floor(width/10), floor(height/10));
}

function draw() {
	background(34, 34, 34);
	noStroke();
	fill(255)

	for (let x = 0; x < grid.length; x++) {
		for (let y = 0; y < grid[x].length; y++) {
			decreaseEnergy(x, y)

			drawPixel(x, y)
		}
	}
}

function touchStarted() {
	increaseEnergy(round(mouseX/10), round(mouseY/10))
}

function touchMoved() {
	increaseEnergy(round(mouseX/10), round(mouseY/10))
}


function initGrid(gridWidth, gridHeight) {
	for (let x = 0; x < gridWidth; x++) {
		grid[x] = [];

		for (let y = 0; y < gridHeight; y++) {
			grid[x][y] = random(0, colors.length);
		}
	}
}

function drawPixel(x, y) {
	let val = floor(grid[x][y])
	fill(colors[val])
	rect(x*10, y*10, 5, 5)
}

function decreaseEnergy(x, y) {
	let mod = (random(0, 1) / 6);
	if (grid[x][y] - mod < 0) {
		grid[x][y] = 0;
	} else {
		grid[x][y] = grid[x][y] - mod;
	}
}

function increaseEnergy(x, y) {
	grid[x][y] = colors.length;
}