aboutsummaryrefslogtreecommitdiff
path: root/src/patterns.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/patterns.js')
-rw-r--r--src/patterns.js74
1 files changed, 74 insertions, 0 deletions
diff --git a/src/patterns.js b/src/patterns.js
new file mode 100644
index 0000000..2960dea
--- /dev/null
+++ b/src/patterns.js
@@ -0,0 +1,74 @@
+/**
+ * Pattern definitions - 8x8 1-bit patterns
+ * 0 = foreground color, 1 = background color
+ */
+export const patterns = {
+ stitch: [
+ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1,
+ 0, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
+ 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1,
+ ],
+ shingles: [
+ 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1,
+ 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1,
+ 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 1,
+ ],
+ shadowGrid: [
+ 1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1,
+ 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 1, 0, 0,
+ 1, 1, 1, 1, 0, 1, 0, 0, 1, 1, 1, 1, 0, 1, 0, 0,
+ ],
+ wicker: [
+ 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 1,
+ 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 0, 1, 0, 0, 0,
+ 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 0, 0, 1, 1, 1, 0,
+ ],
+};
+
+/**
+ * Create a canvas pattern from a pattern definition
+ * @param {CanvasRenderingContext2D} ctx - Canvas context
+ * @param {Array<number>} patternData - 8x8 pattern array
+ * @param {number} pixelSize - Size of each pattern pixel
+ * @param {string} fgColor - Foreground color (for 0 values)
+ * @param {string} bgColor - Background color (for 1 values)
+ * @returns {Promise<CanvasPattern>} Canvas pattern
+ */
+export async function createPattern(
+ ctx,
+ patternData,
+ pixelSize,
+ fgColor,
+ bgColor,
+) {
+ const size = 8;
+ let patternCanvas;
+
+ const isNode = typeof window === "undefined";
+
+ if (isNode) {
+ const { createCanvas } = await import("canvas");
+ patternCanvas = createCanvas(size * pixelSize, size * pixelSize);
+ } else {
+ patternCanvas = window.document.createElement("canvas");
+ patternCanvas.width = size * pixelSize;
+ patternCanvas.height = size * pixelSize;
+ }
+
+ const patternCtx = patternCanvas.getContext("2d");
+
+ for (let y = 0; y < size; y++) {
+ for (let x = 0; x < size; x++) {
+ const value = patternData[y * size + x];
+ patternCtx.fillStyle = value === 0 ? fgColor : bgColor;
+ patternCtx.fillRect(
+ x * pixelSize,
+ y * pixelSize,
+ pixelSize,
+ pixelSize,
+ );
+ }
+ }
+
+ return ctx.createPattern(patternCanvas, "repeat");
+}