69 lines
No EOL
1.4 KiB
Text
69 lines
No EOL
1.4 KiB
Text
---
|
|
title: 10print
|
|
tags:
|
|
- demoArt
|
|
---
|
|
{% layout 'hippie-view/simple.liquid' %}
|
|
|
|
{% block style %}
|
|
<style>
|
|
canvas {
|
|
display: block;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<canvas id="pattern"></canvas>
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
<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 %} |