mikael-lovqvist/websperiments
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added src url parameter and a triangular lattice demo

Browse Source
This commit is contained in:
Mikael Lövqvist
2025-07-21 18:35:11 +02:00
parent 87a092632d
commit 1950943e55
3 changed files with 91 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
canvas/test1.html
View File

@@ -10,7 +10,10 @@
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async () => {
const initial_code = await (await fetch('initial.js')).text(); const params = new URLSearchParams(location.search);
const source_doc = params.get('src') || 'initial.js';
const initial_code = await (await fetch(source_doc)).text();
const initialState = cm6.createEditorState(initial_code); const initialState = cm6.createEditorState(initial_code);
const editor = document.getElementById("editor"); const editor = document.getElementById("editor");
const view = cm6.createEditorView(initialState, editor); const view = cm6.createEditorView(initialState, editor);

81
canvas/triangular-lattice.js Normal file
View File

@@ -0,0 +1,81 @@
//Create useful variables
const aspect = W / H;
const scale = aspect >= 1 ? H / 2 : W / 2;
function setup() {
// Reset transform
C.setTransform(1, 0, 0, 1, 0, 0);
// Clear canvas
C.clearRect(0, 0, W, H);
// Reset common properties
C.globalCompositeOperation = 'source-over';
C.fillStyle = 'rgba(255,200,100,1)';
C.strokeStyle = 'rgba(0,0,0,1)';
// Set up transform to map -1,-1..1,1 to canvas with aspect fit
const offsetX = W / 2;
const offsetY = H / 2;
//Apply transform
C.translate(offsetX, offsetY);
C.scale(scale, -scale);
// Set 1 pixel wide lines
C.lineWidth = 1 / scale;
}
setup();
function hash(x, y, low, high) {
const seed = x * 374761393 ^ y * 668265263; // Large primes
let h = seed ^ (seed >> 3) ^ (seed >> 13) ^ (seed << 2);
h = (h * 1274126177) & 0xffffffff;
return (h >>> 0) % (high - low) + low;
}
const s = 0.2;
for (let y = -3; y < 3; y++) {
for (let x = -3; x < 3; x++) {
const p0 = [(x + .5) * s, y * s];
const p1 = [(x + 1.5) * s, y * s];
const p2 = [(x + 1) * s, (y + 1) * s];
const p3 = [(x + 0) * s, (y + 1) * s];
// Filled parallelogram
C.beginPath();
C.moveTo(...p0);
C.lineTo(...p1);
C.lineTo(...p2);
C.lineTo(...p3);
C.closePath();
const hue = hash(x, y, 0, 360);
const sat = hash(x, y, 20, 80);
const light = hash(x, y, 60, 90);
C.fillStyle = `hsl(${hue}, ${sat}%, ${light}%)`;
C.fill();
// Triangle lines
C.strokeStyle = 'black';
C.lineWidth = 1 / scale;
// Outline parallelogram
C.beginPath();
C.moveTo(...p0);
C.lineTo(...p1);
C.lineTo(...p2);
C.lineTo(...p3);
C.closePath();
C.stroke();
// Diagonal from p0 to p2
C.beginPath();
C.moveTo(...p0);
C.lineTo(...p2);
C.stroke();
}
}

6
index.html
View File

@@ -6,7 +6,11 @@
<body> <body>
<ul> <ul>
<li> <li>
<a href="canvas/test1.html">Simple canvas playground</a> <h2>Simple canvas playground</h2>
<ul>
<li><a href="canvas/test1.html">Default configuration</a></li>
<li><a href="canvas/test1.html?src=triangular-lattice.js">Triangular lattice</a></li>
</ul>
</li> </li>
</ul> </ul>