hippie/source/screens/demo/examples/10print.liquid

---
title: 10print
tags:
- demoExample
---
{% layout "hippie/simple.liquid" %}

{% block head %}
{{ block.super -}}
<style>
	canvas {
		display: block;
	}
</style>
{% endblock %}

{% block body %}
<canvas id="pattern"></canvas>
{% endblock %}

{% block script %}
<script>
	// Page script
	const canvas = document.getElementById('pattern');
	const ctx = canvas.getContext('2d');

	const lineWidth = 20;
	const randomSeed = Math.random;

	// Function to draw the 10PRINT pattern
	function draw10Print() {
		// Clear the canvas
		ctx.clearRect(0, 0, canvas.width, canvas.height);

		// Set line style
		ctx.strokeStyle = 'black';
		ctx.lineWidth = 2;

		// Loop through the canvas grid
		for (let x = 0; x < canvas.width; x += lineWidth) {
			for (let y = 0; y < canvas.height; y += lineWidth) {
				// Randomly choose between two diagonal lines
				if (randomSeed() > 0.5) {
					// Draw line from top-left to bottom-right
					ctx.beginPath();
					ctx.moveTo(x, y);
					ctx.lineTo(x + lineWidth, y + lineWidth);
					ctx.stroke();
				} else {
					// Draw line from top-right to bottom-left
					ctx.beginPath();
					ctx.moveTo(x + lineWidth, y);
					ctx.lineTo(x, y + lineWidth);
					ctx.stroke();
				}
			}
		}
	}

	function resizeCanvas() {
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
	}

	resizeCanvas();
	draw10Print();

	// window.addEventListener('resize', resizeCanvas);
	canvas.addEventListener('click', draw10Print);
</script>
{% endblock %}