73 lines
1.5 KiB
Text
73 lines
1.5 KiB
Text
|
---
|
||
|
|
title: 10print
|
||
|
|
tags:
|
||
|
|
- demoExample
|
||
|
|
---
|
||
|
|
{% assign pageBase = "../../" -%}
|
||
|
|
{% layout "hippie/full.liquid" %}
|
||
|
|
|
||
|
|
{% block head %}
|
||
|
|
{{ block.super -}}
|
||
|
|
<style>
|
||
|
|
canvas {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
<canvas id="10print"></canvas>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block script %}
|
||
|
|
{{ block.super -}}
|
||
|
|
<script>
|
||
|
|
// Page script
|
||
|
|
const canvas = document.getElementById('10print');
|
||
|
|
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 %}
|