Cache noise columns in chunk generator

src/app/preview/NoiseSettingsPreview.ts

@@ -73,14 +73,14 @@ export class NoiseSettingsPreview extends Preview {
   }
 
   getSize(): [number, number] {
-    return [this.width, this.state.height / 2]
+    return [this.width, this.state.height]
   }
 
   draw(model: DataModel, img: ImageData) {
-    this.generator.reset(this.state, this.depth, this.scale)
+    this.generator.reset(this.state, this.depth, this.scale, this.offsetX, this.width)
     const data = img.data
     for (let x = 0; x < this.width; x += 1) {
-      const noise = this.generator.iterateNoiseColumn(x - this.offsetX).reverse()
+      const noise = this.generator.iterateNoiseColumn(x + this.offsetX).reverse()
       for (let y = 0; y < this.state.height; y += 1) {
         const i = (y * (img.width * 4)) + (x * 4)
         const color = this.getColor(noise, y)
@@ -93,7 +93,7 @@ export class NoiseSettingsPreview extends Preview {
   }
 
   onDrag(dx: number, dy: number) {
-    this.offsetX += dx
+    this.offsetX -= dx
   }
 
   private getColor(noise: number[], y: number): number {

src/app/preview/noise/NoiseChunkGenerator.ts

@@ -7,13 +7,16 @@ export class NoiseChunkGenerator {
   private mainPerlinNoise: PerlinNoise
   private depthNoise: PerlinNoise
 
-  private settings: any
+  private settings: any = {}
   private chunkWidth: number = 4
   private chunkHeight: number = 4
   private chunkCountY: number = 32
   private biomeDepth: number = 0.1
   private biomeScale: number = 0.2
 
+  private noiseColumnCache: (number[] | null)[] = []
+  private xOffset: number = 0
+
   constructor() {
     this.minLimitPerlinNoise = PerlinNoise.fromRange(hexId(), -15, 0)
     this.maxLimitPerlinNoise = PerlinNoise.fromRange(hexId(), -15, 0)
@@ -21,14 +24,16 @@ export class NoiseChunkGenerator {
     this.depthNoise = PerlinNoise.fromRange(hexId(), -15, 0)
   }
 
-  public reset(settings: any, depth: number, scale: number) {
+  public reset(settings: any, depth: number, scale: number, xOffset: number, width: number) {
     this.settings = settings
     this.chunkWidth = settings.size_horizontal * 4
     this.chunkHeight = settings.size_vertical * 4
-    // dividing by two as cheap optimization
-    this.chunkCountY = Math.floor(settings.height / this.chunkHeight) / 2
+    this.chunkCountY = Math.floor(settings.height / this.chunkHeight)
     this.biomeDepth = depth
     this.biomeScale = scale
+
+    this.noiseColumnCache = Array(width).fill(null)
+    this.xOffset = xOffset
   }
   
   public iterateNoiseColumn(x: number): number[] {
@@ -49,6 +54,9 @@ export class NoiseChunkGenerator {
   }
 
   private fillNoiseColumn(x: number): number[] {
+    const cachedColumn = this.noiseColumnCache[x - this.xOffset]
+    if (cachedColumn) return cachedColumn
+
     const data = Array(this.chunkCountY + 1)
 
     let scaledDepth = 0.265625 * this.biomeDepth
@@ -83,6 +91,8 @@ export class NoiseChunkGenerator {
       }
       data[y] = noise
     }
+
+    this.noiseColumnCache[x - this.xOffset] = data
     return data
   }