Fixed #1. Added isomorphic lattice sampler

canvas/triangular-lattice-sampler-corrected.js

@@ -0,0 +1,87 @@
+//Create useful variables
+function setup() {
+	const [W, H] = [400, 400];
+    const aspect = W / H;
+    const scale = aspect >= 1 ? H / 2 : W / 2;
+	canvas.width = W;
+	canvas.height = H;
+
+	// 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();
+
+
+
+const { Bitfield_Image_Sampler } = await import('../lib/image-functions.js');
+//Load
+const sampler = Bitfield_Image_Sampler.from_string('16,16,AAAAAAAAAAAAAA4AEQDx/xGgDqAAAAAAAAAAAAAAAAA=');
+
+const s = 0.08;
+for (let y = -10; y < 10; y++) {
+    const xo = y & 1 ? -0.5*s : 0;
+    const sxo = (y >> 1);
+    //const sxo = y & 1 ? 1 : 0;
+	for (let x = -10; x < 10; x++) {
+		const p0 = [xo + (x + .5) * s, y * s];
+		const p1 = [xo + (x + 1.5) * s, y * s];
+		const p2 = [xo + (x + 1) * s, (y + 1) * s];
+		const p3 = [xo + (x + 0) * s, (y + 1) * s];
+
+		// Filled parallelogram
+		C.beginPath();
+		C.moveTo(...p0);
+		C.lineTo(...p1);
+		C.lineTo(...p2);
+		C.lineTo(...p3);
+		C.closePath();
+
+		if (sampler.sample(sxo + x + 8, 8 - y)) {
+			C.fillStyle = `#cf8`;
+		} else {
+			C.fillStyle = `#f88`;
+		}
+
+		C.fill();
+
+		// Triangle lines
+		C.strokeStyle = '#000';
+
+		// 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();
+	}
+}

canvas/triangular-lattice-sampler.js

@@ -1,9 +1,8 @@
 //Create useful variables
-const aspect = W / H;
-const scale = aspect >= 1 ? H / 2 : W / 2;
-
 function setup() {
 	const [W, H] = [400, 400];
+    const aspect = W / H;
+    const scale = aspect >= 1 ? H / 2 : W / 2;
 	canvas.width = W;
 	canvas.height = H;
 
@@ -39,9 +38,8 @@ setup();
 const { Bitfield_Image_Sampler } = await import('../lib/image-functions.js');
 //Load
 const sampler = Bitfield_Image_Sampler.from_string('16,16,AAAAAAAAAAAAAA4AEQDx/xGgDqAAAAAAAAAAAAAAAAA=');
-console.log(sampler);
 
-const s = 0.2;
+const s = 0.08;
 for (let y = -10; y < 10; y++) {
     const xo = y & 1 ? s * .5 : 0;
     const sxo = 0;
@@ -70,7 +68,6 @@ for (let y = -10; y < 10; y++) {
 
 		// Triangle lines
 		C.strokeStyle = '#000';
-		C.lineWidth = 1 / scale;
 
 		// Outline parallelogram
 		C.beginPath();

index.html

@@ -12,6 +12,7 @@
 				<li><a href="canvas/test1.html?src=triangular-lattice.js">Triangular lattice</a></li>
 				<li><a href="canvas/test1.html?src=triangular-lattice-offset-corrected.js">Triangular lattice - corrected offset</a></li>
 				<li><a href="canvas/test1.html?src=triangular-lattice-sampler.js">Triangular lattice - sampling raster</a></li>
+				<li><a href="canvas/test1.html?src=triangular-lattice-sampler-corrected.js">Triangular lattice - sampling raster in a skewed pattern</a></li>
 				<li><a href="canvas/test1.html?src=image-loading.js">Image loading</a></li>
 			</ul>
 		</li>