Start converting rectangle patterns to affine transformations

Author: dpolugic

src/App.tsx

@@ -2,15 +2,26 @@ import { useEffect, useMemo, useReducer, useRef, useState } from 'react'
 
 import { drawFrameIncrementally, drawFramePreview } from './draw/draw-frame'
 import {
+  applyMatrixAndOffsetToRectangle,
   ClickedPath,
+  combineTransformations,
   findClickedScreenOrPattern,
+  getMatrixAndOffsetFromRectangle,
   getMousePoint,
   getRelativePatternPosition,
   randomId,
 } from './functions'
 import { useStableFunction } from './hooks'
 import { Preview } from './preview'
-import { AbsolutePattern, AbsolutePoint, NumberPair, PatternId, RelativePattern, State } from './types'
+import {
+  AbsolutePattern,
+  AbsolutePoint,
+  NumberPair,
+  PatternId,
+  RelativePattern,
+  State,
+  Transformation,
+} from './types'
 
 const getDraftState = (state: State, draftClick: DraftClick, mousePosition: AbsolutePoint): State => {
   const draftPattern = {
@@ -29,12 +40,35 @@ 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 transform: Transformation = getMatrixAndOffsetFromRectangle(state.screens[screenIndex]!)
+
   for (const k of nestedPath) {
-    newDraft = getRelativePatternPosition(newDraft, state.patterns[k]!.pattern)
+    transform = combineTransformations(
+      transform.matrix,
+      transform.offset,
+      state.patterns[k]!.matrix,
+      state.patterns[k]!.offset
+    )
   }
 
-  return { ...state, patterns: state.patterns.concat({ id: randomId() as PatternId, pattern: newDraft }) }
+  const newDraft = getMatrixAndOffsetFromRectangle(
+    getRelativePatternPosition(
+      draftPatternRelative,
+      applyMatrixAndOffsetToRectangle(transform.matrix, transform.offset, {
+        anchor: [0, 0],
+        target: [1, 1],
+      } as AbsolutePattern)
+    )
+  )
+
+  return {
+    ...state,
+    patterns: state.patterns.concat({
+      id: randomId() as PatternId,
+      matrix: newDraft.matrix,
+      offset: newDraft.offset,
+    }),
+  }
 }
 
 type DraftClick = {
@@ -181,9 +215,13 @@ function App() {
                 throw new Error(`Pattern with id ${id} not found`)
               }
 
+              const { matrix, offset } = getMatrixAndOffsetFromRectangle(pattern)
+
               setState(prevState => ({
                 ...prevState,
-                patterns: prevState.patterns.map(p => (p.id === id ? { ...p, pattern } : p)),
+                patterns: prevState.patterns.map((p): State['patterns'][number] =>
+                  p.id === id ? { ...p, matrix, offset } : p
+                ),
               }))
             }}
           />

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-batched-drawable-patterns.ts

@@ -36,10 +36,10 @@ export function* streamBatchedDrawablePatterns({
 
       chunk = {
         depth: entry.depth,
-        patterns: [entry.currentPattern],
+        patterns: [entry.pattern],
       }
     } else {
-      chunk.patterns.push(entry.currentPattern)
+      chunk.patterns.push(entry.pattern)
 
       if (chunk.patterns.length >= chunkSize) {
         yield chunk

src/draw/stream-drawable-patterns.ts

@@ -1,6 +1,20 @@
-import { combinePatterns, mapPatternToViewportSpace, mutateBoundariesFromPattern } from '../functions'
+import {
+  applyMatrixAndOffsetToRectangle,
+  combineTransformations,
+  getMatrixAndOffsetFromRectangle,
+  mapPatternToViewportSpace,
+  mutateBoundariesFromPattern,
+} from '../functions'
 import { Queue } from '../queue'
-import { Boundaries, Size, State, ViewportNumber, ViewportPattern } from '../types'
+import {
+  AbsolutePoint,
+  Boundaries,
+  Size,
+  State,
+  Transformation,
+  ViewportNumber,
+  ViewportPattern,
+} from '../types'
 import { MAX_DEPTH, MAX_QUEUE_SIZE, MIN_PATTERN_SIZE_PX } from './constants'
 
 // We'll ignore everything that's a bit outside the viewport.
@@ -16,7 +30,12 @@ function getViewportBoundaries(screenSize: Size): Boundaries<ViewportNumber> {
 }
 
 type QueueEntry = {
-  currentPattern: ViewportPattern
+  currentTransformation: Transformation
+  depth: number
+}
+
+type DrawablePattern = {
+  pattern: ViewportPattern
   depth: number
 }
 
@@ -65,7 +84,7 @@ export function* streamDrawablePatterns({
 }: {
   state: State
   screenSize: Size
-}): Generator<QueueEntry, void, void> {
+}): Generator<DrawablePattern, void, void> {
   console.log(
     `generateDrawQueue start. Initial screens: ${state.screens.length}, Patterns: ${state.patterns.length}`
   )
@@ -76,9 +95,14 @@ export function* streamDrawablePatterns({
 
   for (const screen of state.screens) {
     patternQueue.push({
-      currentPattern: mapPatternToViewportSpace(screen, screenSize),
+      currentTransformation: getMatrixAndOffsetFromRectangle(screen),
       depth: 0,
     })
+
+    yield {
+      pattern: mapPatternToViewportSpace(screen, screenSize),
+      depth: 0,
+    }
   }
 
   let iterations = 0
@@ -87,8 +111,6 @@ export function* streamDrawablePatterns({
 
     const entry = patternQueue.shift()
 
-    yield entry
-
     // Don't add patterns that are too deep.
     if (entry.depth >= MAX_DEPTH) {
       console.log(
@@ -97,13 +119,34 @@ 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 newTransformation = combineTransformations(
+        entry.currentTransformation.matrix,
+        entry.currentTransformation.offset,
+        matrix,
+        offset
+      )
+
+      const transformedUnit = applyMatrixAndOffsetToRectangle(
+        newTransformation.matrix,
+        newTransformation.offset,
+        {
+          anchor: [0, 0] as AbsolutePoint,
+          target: [1, 1] as AbsolutePoint,
+        }
+      )
+
+      const newScreen = mapPatternToViewportSpace(transformedUnit, screenSize)
+
+      if (isValidPattern(newScreen, viewportBoundaries)) {
+        yield {
+          pattern: newScreen,
+          depth: entry.depth + 1,
+        }
 
-      if (isValidPattern(newViewportPattern, viewportBoundaries)) {
         patternQueue.push({
-          currentPattern: newViewportPattern,
+          currentTransformation: newTransformation,
           depth: entry.depth + 1,
         })