sunpig/plate6.html

## plate6.html
<!doctype html>
<html>
<body>
<h1>Plate 6</h1>
<canvas id="plate6" style="border:1px solid black"></canvas>
<script>
	(function(){
		function setNewGrey (ctx) {
			grey = Math.floor(150 + (Math.random() * 75));
			ctx.strokeStyle = `rgba(${grey}, ${grey}, ${grey}, 1)`;
		}
		function drawDiagonal1 (ctx, i, j, boxSize) {
			ctx.beginPath();
			ctx.moveTo(i*boxSize, j*boxSize);
			ctx.lineTo((i+1)*boxSize, (j+1)*boxSize);
			ctx.stroke();
		}
		function drawDiagonal2 (ctx, i, j, boxSize) {
			ctx.beginPath();
			ctx.moveTo((i+1)*boxSize, j*boxSize);
			ctx.lineTo(i*boxSize, (j+1)*boxSize);
			ctx.stroke();
		}
		function drawDiagonal3 (ctx, i, j, boxSize) {
			drawDiagonal1(ctx, i, j, boxSize);
			drawDiagonal2(ctx, i, j, boxSize);
		}

		const rgbWhite = 'rgba(255, 255, 255, 1)';
		const boxSize = 20;
		const canvasSize = boxSize * 22;
		const plate6 = document.getElementById('plate6');

		const ctx = plate6.getContext('2d');
		plate6.width = canvasSize;
		plate6.height = canvasSize;

		draw = function(ctx) {
			ctx.fillStyle = rgbWhite;
			ctx.fillRect(0, 0, canvasSize, canvasSize);

			// Draw boxes
			ctx.lineWidth = 1;
			// Crisp line widths: https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width/7531540#7531540
			setNewGrey(ctx);
			ctx.strokeRect(
				boxSize + 0.5,
				boxSize + 0.5,
				boxSize * 20,
				boxSize * 20,
			);
			for (let i=1; i<20; i++) {
				setNewGrey(ctx);
				ctx.strokeRect(
					boxSize + 0.5,
					boxSize * (1 + i) + 0.5,
					boxSize * 20,
					0
				);
				setNewGrey(ctx);
				ctx.strokeRect(
					boxSize * (1 + i) + 0.5,
					boxSize + 0.5,
					0,
					boxSize * 20
				);
			}

			ctx.drawBoxContents = function() {
				ctx.moveTo(boxSize * i)
				ctx.strokeRect(
					boxSize + 0.5,
					boxSize * (1 + i) + 0.5,
					boxSize * 20,
					0
				);
			}
			let lastStyle;
			for (let i=1; i<21; i++) {
				for (let j=1; j<21; j++) {
					setNewGrey(ctx);
					let style = Math.floor(Math.random() * 4);
					// Build in an element of repetition
					if (Math.random() < 0.5) {
						style = lastStyle;
					}
					if (style == 1) {
						drawDiagonal1(ctx, i, j, boxSize);
					} else if (style == 2) {
						drawDiagonal2(ctx, i, j, boxSize);
					} else if (style == 3) {
						drawDiagonal3(ctx, i, j, boxSize);
					}
					lastStyle = style;
				}
			}
		}

		draw(ctx);

		plate6.addEventListener('click', () => draw(ctx));
	})();
</script>
</body>
</html>
	<!doctype html>
	<html>
	<body>
	<h1>Plate 6</h1>
	<canvas id="plate6" style="border:1px solid black"></canvas>
	<script>
	(function(){
	function setNewGrey (ctx) {
	grey = Math.floor(150 + (Math.random() * 75));
	ctx.strokeStyle = `rgba(${grey}, ${grey}, ${grey}, 1)`;
	}
	function drawDiagonal1 (ctx, i, j, boxSize) {
	ctx.beginPath();
	ctx.moveTo(iboxSize, jboxSize);
	ctx.lineTo((i+1)boxSize, (j+1)boxSize);
	ctx.stroke();
	}
	function drawDiagonal2 (ctx, i, j, boxSize) {
	ctx.beginPath();
	ctx.moveTo((i+1)boxSize, jboxSize);
	ctx.lineTo(iboxSize, (j+1)boxSize);
	ctx.stroke();
	}
	function drawDiagonal3 (ctx, i, j, boxSize) {
	drawDiagonal1(ctx, i, j, boxSize);
	drawDiagonal2(ctx, i, j, boxSize);
	}

	const rgbWhite = 'rgba(255, 255, 255, 1)';
	const boxSize = 20;
	const canvasSize = boxSize * 22;
	const plate6 = document.getElementById('plate6');

	const ctx = plate6.getContext('2d');
	plate6.width = canvasSize;
	plate6.height = canvasSize;

	draw = function(ctx) {
	ctx.fillStyle = rgbWhite;
	ctx.fillRect(0, 0, canvasSize, canvasSize);

	// Draw boxes
	ctx.lineWidth = 1;
	// Crisp line widths: https://stackoverflow.com/questions/7530593/html5-canvas-and-line-width/7531540#7531540
	setNewGrey(ctx);
	ctx.strokeRect(
	boxSize + 0.5,
	boxSize + 0.5,
	boxSize * 20,
	boxSize * 20,
	);
	for (let i=1; i<20; i++) {
	setNewGrey(ctx);
	ctx.strokeRect(
	boxSize + 0.5,
	boxSize * (1 + i) + 0.5,
	boxSize * 20,
	0
	);
	setNewGrey(ctx);
	ctx.strokeRect(
	boxSize * (1 + i) + 0.5,
	boxSize + 0.5,
	0,
	boxSize * 20
	);
	}

	ctx.drawBoxContents = function() {
	ctx.moveTo(boxSize * i)
	ctx.strokeRect(
	boxSize + 0.5,
	boxSize * (1 + i) + 0.5,
	boxSize * 20,
	0
	);
	}
	let lastStyle;
	for (let i=1; i<21; i++) {
	for (let j=1; j<21; j++) {
	setNewGrey(ctx);
	let style = Math.floor(Math.random() * 4);
	// Build in an element of repetition
	if (Math.random() < 0.5) {
	style = lastStyle;
	}
	if (style == 1) {
	drawDiagonal1(ctx, i, j, boxSize);
	} else if (style == 2) {
	drawDiagonal2(ctx, i, j, boxSize);
	} else if (style == 3) {
	drawDiagonal3(ctx, i, j, boxSize);
	}
	lastStyle = style;
	}
	}
	}

	draw(ctx);

	plate6.addEventListener('click', () => draw(ctx));
	})();
	</script>
	</body>
	</html>