Pixels - Houdini

pixels.js

registerPaint('pixels', class {
	static get inputProperties() { return ['--size', '--art']; }
	paint(ctx, geom, properties) {
		const size = properties.get('--size').toString();
		const art = JSON.parse(properties.get('--art').toString());

		Object.keys(art).forEach(index => {
			const row = art[index];
			Object.keys(row).forEach(index2 => {
				const column = row[index2];
				ctx.fillStyle = column;
				ctx.beginPath();
				ctx.rect(index2 * size, index * size, size, size);
				ctx.fill();
			})
		});
	}
});