Try batching draw calls

Author: dpolugic

src/draw.ts

@@ -28,6 +28,7 @@ const COLORS = '0123456789abcdef'
 const MIN_DEPTH = 3
 const MAX_DEPTH = Infinity
 const MAX_DRAW_CALLS = 1e4 // number of shapes to draw per frame
+const MAX_DRAW_TIME_MS = 15 // how long to draw a frame in ms
 const MAX_QUEUE_SIZE = 1e6
 const MIN_PATTERN_SIZE = 0.0005 // ignore patterns where either side is smaller than this
 const DEBUG = true as boolean
@@ -85,30 +86,6 @@ const measure = (f: () => void): number => {
   return performance.now() - start
 }
 
-// ---
-
-const drawScreen = (
-  ctx: CanvasRenderingContext2D,
-  screenSize: Size,
-  absolutePattern: AbsolutePattern,
-  strokeStyle: string
-): void => {
-  const viewportPattern = mapPatternToViewportSpace(absolutePattern, screenSize)
-  const [p1, p2, p3, p4] = getPatternPoints(viewportPattern)
-
-  ctx.strokeStyle = strokeStyle
-
-  ctx.beginPath()
-  ctx.moveTo(...p1)
-  ctx.lineTo(...p2)
-  ctx.lineTo(...p3)
-  ctx.lineTo(...p4)
-  ctx.closePath()
-
-  ctx.fill()
-  ctx.stroke()
-}
-
 type QueueEntry = {
   currentPattern: AbsolutePattern
   depth: number
@@ -136,7 +113,9 @@ function* generateDrawQueue(state: State): Generator<QueueEntry, void, void> {
 
     // Don't add patterns that are too deep.
     if (entry.depth >= MAX_DEPTH) {
-      console.log(`MAX_DEPTH (${MAX_DEPTH}) reached at depth ${entry.depth}. Breaking from generateDrawQueue loop.`)
+      console.log(
+        `MAX_DEPTH (${MAX_DEPTH}) reached at depth ${entry.depth}. Breaking from generateDrawQueue loop.`
+      )
       break
     }
 
@@ -158,7 +137,58 @@ function* generateDrawQueue(state: State): Generator<QueueEntry, void, void> {
     }
   }
 
-  console.log(`generateDrawQueue done. Total iterations: ${iterations}. Final queue size: ${patternQueue.size}`)
+  console.log(
+    `generateDrawQueue done. Total iterations: ${iterations}. Final queue size: ${patternQueue.size}`
+  )
+}
+
+type Chunk = {
+  depth: number
+  patterns: AbsolutePattern[]
+}
+
+function* generateChunkedDraws(state: State, chunkSize: number): Generator<Chunk, void, void> {
+  const drawQueueIterator = generateDrawQueue(state)
+
+  let chunk: Chunk = {
+    depth: 0,
+    patterns: [],
+  }
+
+  while (true) {
+    const iteratorResult = drawQueueIterator.next()
+
+    if (iteratorResult.done) {
+      if (chunk.patterns.length > 0) {
+        yield chunk
+      }
+
+      break
+    }
+
+    const entry = iteratorResult.value
+
+    if (chunk.depth !== entry.depth) {
+      if (chunk.patterns.length > 0) {
+        yield chunk
+      }
+
+      chunk = {
+        depth: entry.depth,
+        patterns: [entry.currentPattern],
+      }
+    } else {
+      chunk.patterns.push(entry.currentPattern)
+    }
+
+    if (chunk.patterns.length >= chunkSize) {
+      yield chunk
+      chunk = {
+        depth: entry.depth,
+        patterns: [],
+      }
+    }
+  }
 }
 
 export function* drawFrameIncrementally(
@@ -168,28 +198,60 @@ export function* drawFrameIncrementally(
   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
   ctx.fillStyle = 'black'
   ctx.lineWidth = 1
-  
+
   const screenSize = getScreenSize(ctx)
 
-  const drawQueueIterator = generateDrawQueue(state)
+  const chunkedDrawsIterator = generateChunkedDraws(state, 1000)
+
+  let iterations = 0
 
   while (true) {
+    iterations += 1
+
     let drawScreenCalls = 0
 
     const duration = measure(() => {
-      // Manual iteration
+      const start = performance.now()
+      
       while (true) {
-        const iteratorResult = drawQueueIterator.next()
+        const iteratorResult = chunkedDrawsIterator.next()
 
         if (iteratorResult.done) break
 
-        const { currentPattern, depth } = iteratorResult.value
-
-        drawScreenCalls += 1
-
-        drawScreen(ctx, screenSize, currentPattern, COLORS[Math.min(COLORS.length - 1, depth)]!)
-
-        if (depth > MIN_DEPTH && drawScreenCalls >= MAX_DRAW_CALLS) break
+        const { depth, patterns } = iteratorResult.value
+
+        drawScreenCalls += patterns.length
+
+        // Draw screen
+        ctx.strokeStyle = COLORS[Math.min(COLORS.length - 1, depth)]!
+        ctx.beginPath()
+      
+        for (const absolutePattern of patterns) {
+          const viewportPattern = mapPatternToViewportSpace(absolutePattern, screenSize)
+          const [p1, p2, p3, p4] = getPatternPoints(viewportPattern)
+      
+          ctx.moveTo(...p1)
+          ctx.lineTo(...p2)
+          ctx.lineTo(...p3)
+          ctx.lineTo(...p4)
+          ctx.closePath()
+        }
+
+        ctx.fill()
+        ctx.stroke()
+
+        if (iterations === 1) {
+          // On the first iteration, draw until passing both MIN_DEPTH and MAX_DRAW_CALLS.
+          // We don't want to use a time-based limit here because it would cause flickering.
+          if (depth > MIN_DEPTH && drawScreenCalls >= MAX_DRAW_CALLS) {
+            break
+          }
+        } else {
+          // On subsequent iterations, draw until MAX_DRAW_TIME_MS is reached.
+          if (performance.now() - start > MAX_DRAW_TIME_MS) {
+            break
+          }
+        }
       }
     })
 

src/queue.ts

@@ -32,10 +32,6 @@ export class Queue<T> {
 
   /**
     * Compact the queue to make sure it doesn't grow indefinitely.
-    * Must be triggered manually.
-    * This is a naive approach and could be improved.
-    * 
-    * We could try using a circular buffer instead.
     */
   compact() {
     this.#queue = this.#queue.slice(this.#head)

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,