Start converting patterns to affine transformations

Author: dpolugic

src/App.tsx

@@ -3,7 +3,9 @@ import { useEffect, useMemo, useReducer, useRef, useState } from 'react'
 import { drawFrameIncrementally, drawFramePreview } from './draw/draw-frame'
 import {
   ClickedPath,
+  combineTransformations,
   findClickedScreenOrPattern,
+  getMatrixAndOffsetFromRectangle,
   getMousePoint,
   getRelativePatternPosition,
   randomId,
@@ -29,12 +31,26 @@ const getDraftState = (state: State, draftClick: DraftClick, mousePosition: Abso
   // Re-interpret as relative pattern.
   const draftPatternRelative = draftPattern satisfies AbsolutePattern as unknown as RelativePattern
 
-  let newDraft = getRelativePatternPosition(draftPatternRelative, state.screens[screenIndex]!)
+  let newDraft = getMatrixAndOffsetFromRectangle(
+    getRelativePatternPosition(draftPatternRelative, state.screens[screenIndex]!)
+  )
   for (const k of nestedPath) {
-    newDraft = getRelativePatternPosition(newDraft, state.patterns[k]!.pattern)
+    newDraft = combineTransformations(
+      newDraft.matrix,
+      newDraft.offset,
+      state.patterns[k]!.matrix,
+      state.patterns[k]!.offset
+    )
   }
 
-  return { ...state, patterns: state.patterns.concat({ id: randomId() as PatternId, pattern: newDraft }) }
+  return {
+    ...state,
+    patterns: state.patterns.concat({
+      id: randomId() as PatternId,
+      matrix: newDraft.matrix,
+      offset: newDraft.offset,
+    }),
+  }
 }
 
 type DraftClick = {

src/draw/patterns.worker.ts

@@ -1,4 +1,4 @@
-import { AbsolutePattern, PatternId, RelativePattern, State, ViewportPattern } from '../types'
+import { AbsolutePattern, PatternId, State, ViewportPattern } from '../types'
 import { streamBatchedDrawablePatterns } from './stream-batched-drawable-patterns'
 
 type WorkerState =
@@ -77,9 +77,7 @@ self.onmessage = event => {
 function generatePatterns() {
   for (const { depth, patterns } of streamBatchedDrawablePatterns({
     state: {
-      patterns: [
-        { id: 'debug' as PatternId, pattern: { anchor: [0, 0], target: [0.5, 0.5] } as RelativePattern },
-      ],
+      patterns: [{ id: 'debug' as PatternId, matrix: [0.8, 0, 0, 0.8], offset: [0.1, 0.1] }],
       screens: [{ anchor: [0.2, 0.2], target: [0.8, 0.8] } as AbsolutePattern],
     },
     chunkSize: 5,

src/draw/stream-drawable-patterns.ts

@@ -1,4 +1,8 @@
-import { combinePatterns, mapPatternToViewportSpace, mutateBoundariesFromPattern } from '../functions'
+import {
+  applyMatrixAndOffsetToRectangle,
+  mapPatternToViewportSpace,
+  mutateBoundariesFromPattern,
+} from '../functions'
 import { Queue } from '../queue'
 import { Boundaries, Size, State, ViewportNumber, ViewportPattern } from '../types'
 import { MAX_DEPTH, MAX_QUEUE_SIZE, MIN_PATTERN_SIZE_PX } from './constants'
@@ -97,9 +101,9 @@ export function* streamDrawablePatterns({
       break
     }
 
-    for (const { pattern } of state.patterns) {
+    for (const { matrix, offset } of state.patterns) {
       // Get new pattern
-      const newViewportPattern = combinePatterns(entry.currentPattern, pattern)
+      const newViewportPattern = applyMatrixAndOffsetToRectangle(matrix, offset, entry.currentPattern)
 
       if (isValidPattern(newViewportPattern, viewportBoundaries)) {
         patternQueue.push({

src/functions.ts

@@ -249,7 +249,9 @@ export const findClickedScreenOrPattern = (
     const screen = screens[i]!
     const clickedPath = findClickedPattern(
       screen,
-      patterns.map(p => p.pattern),
+      patterns.map(
+        p => applyMatrixAndOffsetToRectangle(p.matrix, p.offset, screen) as unknown as RelativePattern
+      ),
       point
     )
 
@@ -278,3 +280,76 @@ export function randomId(): string {
   // todo: use uuid or something
   return Math.random().toString(36).substring(2, 15)
 }
+
+export function getMatrixAndOffsetFromRectangle({ anchor, target }: RelativePattern): {
+  matrix: [a: number, b: number, c: number, d: number]
+  offset: [x: number, y: number]
+} {
+  const [x1, y1] = anchor
+  const [x2, y2] = target
+
+  // The transformation is: newX = x1 + relativeX * (x2 - x1), newY = y1 + relativeY * (y2 - y1)
+  // This can be written as a matrix transformation:
+  // [newX] = [(x2-x1)    0    ] [relativeX] + [x1]
+  // [newY]   [0       (y2-y1)] [relativeY]   [y1]
+
+  const scaleX = x2 - x1
+  const scaleY = y2 - y1
+  const offsetX = x1
+  const offsetY = y1
+
+  const matrix = [scaleX, 0, 0, scaleY] satisfies [a: number, b: number, c: number, d: number]
+  const offset = [offsetX, offsetY] satisfies [x: number, y: number]
+
+  return { matrix, offset }
+}
+
+function applyMatrixAndOffsetToPoint<ParentNumber extends PatternNumber>(
+  matrix: [a: number, b: number, c: number, d: number],
+  offset: [x: number, y: number],
+  point: Point<ParentNumber>
+): Point<ParentNumber> {
+  const [a, b, c, d] = matrix
+  const [dx, dy] = offset
+  const [x, y] = point
+
+  return [x * a + y * c + dx, x * b + y * d + dy] as Point<ParentNumber>
+}
+
+export function applyMatrixAndOffsetToRectangle<ParentNumber extends PatternNumber>(
+  matrix: [a: number, b: number, c: number, d: number],
+  offset: [x: number, y: number],
+  rectangle: Pattern<ParentNumber>
+): Pattern<ParentNumber> {
+  const { anchor, target } = rectangle
+
+  return {
+    anchor: applyMatrixAndOffsetToPoint(matrix, offset, anchor),
+    target: applyMatrixAndOffsetToPoint(matrix, offset, target),
+  }
+}
+
+export function combineTransformations(
+  matrix1: [a: number, b: number, c: number, d: number],
+  offset1: [x: number, y: number],
+  matrix2: [a: number, b: number, c: number, d: number],
+  offset2: [x: number, y: number]
+): { matrix: [a: number, b: number, c: number, d: number]; offset: [x: number, y: number] } {
+  const [a1, b1, c1, d1] = matrix1
+  const [a2, b2, c2, d2] = matrix2
+  const [x1, y1] = offset1
+  const [x2, y2] = offset2
+
+  const matrix = [a1 * a2 + c1 * b2, b1 * a2 + d1 * b2, a1 * c2 + c1 * d2, b1 * c2 + d1 * d2] satisfies [
+    a: number,
+    b: number,
+    c: number,
+    d: number,
+  ]
+  const offset = [a1 * x2 + c1 * y2 + x1, b1 * x2 + d1 * y2 + y1] satisfies [x: number, y: number]
+
+  return {
+    matrix,
+    offset,
+  }
+}

src/preview.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react'
-import { getBoundariesFromPattern } from './functions'
+import { applyMatrixAndOffsetToRectangle, getBoundariesFromPattern } from './functions'
 import { NumberPair, PatternId, RelativePattern, RelativePoint, State } from './types'
 
 function getViewBox(state: State): { x: number; y: number; width: number; height: number } {
@@ -9,7 +9,12 @@ function getViewBox(state: State): { x: number; y: number; width: number; height
   let yMax = 1
 
   // Make sure that default viewBox contains entire pattern
-  for (const { pattern } of state.patterns) {
+  for (const { matrix, offset } of state.patterns) {
+    const pattern = applyMatrixAndOffsetToRectangle(matrix, offset, {
+      anchor: [0, 0] as RelativePoint,
+      target: [1, 1] as RelativePoint,
+    })
+
     const b = getBoundariesFromPattern(pattern)
 
     xMin = Math.min(xMin, b.xMin)
@@ -231,7 +236,12 @@ export const Preview: React.FC<{
         />
         <PartialLine anchor={[0, 0]} target={[1, 1]} />
 
-        {state.patterns.map(({ id, pattern }) => {
+        {state.patterns.map(({ id, matrix, offset }) => {
+          const pattern = applyMatrixAndOffsetToRectangle(matrix, offset, {
+            anchor: [0, 0] as RelativePoint,
+            target: [1, 1] as RelativePoint,
+          })
+
           const { xMin, xMax, yMin, yMax } = getBoundariesFromPattern(pattern)
 
           const width = xMax - xMin