Update world.js

world.js

@@ -3,35 +3,50 @@ import { createCompute } from "./gpu.js";
 
 export class World {
   constructor(canvas, gpu) {
+    this.canvas = canvas;
     this.ctx = canvas.getContext("2d");
     this.gpu = gpu;
-    this.size = 1024;
+
+    this.size = 512;
     this.time = 0;
+    this.ready = false;
 
     this.field = new Float32Array(this.size);
 
     if (gpu.mode === "gpu") {
       this.initGPU();
+    } else {
+      this.ready = true;
     }
   }
 
   async initGPU() {
-    const device = this.gpu.device;
+    try {
+      const device = this.gpu.device;
+
+      this.buffer = device.createBuffer({
+        size: this.field.byteLength,
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
+      });
 
-    this.buffer = device.createBuffer({
-      size: this.field.byteLength,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
-    });
+      this.readback = device.createBuffer({
+        size: this.field.byteLength,
+        usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+      });
 
-    this.readback = device.createBuffer({
-      size: this.field.byteLength,
-      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
-    });
+      this.pipeline = await createCompute(device, wgsl);
 
-    this.pipeline = await createCompute(device, wgsl);
+      this.ready = true;
+    } catch (e) {
+      console.warn("GPU init failed, falling back to CPU");
+      this.gpu.mode = "cpu";
+      this.ready = true;
+    }
   }
 
   update(dt) {
+    if (!this.ready) return;
+
     this.time += dt;
 
     if (this.gpu.mode === "gpu") {
@@ -47,41 +62,43 @@ export class World {
       pass.dispatchWorkgroups(Math.ceil(this.size / 64));
       pass.end();
 
-      encoder.copyBufferToBuffer(this.buffer, 0, this.readback, 0, this.field.byteLength);
-      device.queue.submit([encoder.finish()]);
-    }
-  }
+      encoder.copyBufferToBuffer(
+        this.buffer,
+        0,
+        this.readback,
+        0,
+        this.field.byteLength
+      );
 
-  async render() {
-    if (this.gpu.mode === "gpu") {
-      await this.readback.mapAsync(GPUMapMode.READ);
-      new Float32Array(this.readback.getMappedRange()).set(this.field);
-      this.readback.unmap();
+      device.queue.submit([encoder.finish()]);
     } else {
-      // CPU fallback
       for (let i = 0; i < this.size; i++) {
-        this.field[i] = Math.sin(this.time + i * 0.01) * 0.5 + 0.5;
+        this.field[i] = Math.sin(this.time + i * 0.02) * 0.5 + 0.5;
       }
     }
+  }
 
-    const w = this.ctx.canvas.width = this.ctx.canvas.clientWidth;
-    const h = this.ctx.canvas.height = this.ctx.canvas.clientHeight;
+  render() {
+    if (!this.ready) return;
 
-    this.ctx.clearRect(0, 0, w, h);
+    const w = this.canvas.width = this.canvas.clientWidth;
+    const h = this.canvas.height = this.canvas.clientHeight;
 
-    for (let i = 0; i < this.size; i++) {
-      const x = (i / this.size) * w;
-      const y = h / 2;
-      const r = this.field[i] * 20;
+    this.ctx.fillStyle = "#000";
+    this.ctx.fillRect(0, 0, w, h);
+
+    this.ctx.fillStyle = "#00ffd0";
 
-      this.ctx.fillStyle = "#00ffd0";
+    for (let i = 0; i < this.size; i += 4) {
+      const x = (i / this.size) * w;
+      const r = this.field[i] * 18;
       this.ctx.beginPath();
-      this.ctx.arc(x, y, r, 0, Math.PI * 2);
+      this.ctx.arc(x, h / 2, r, 0, Math.PI * 2);
       this.ctx.fill();
     }
   }
 
   apply(cmd) {
-    // Language can modulate parameters here
+    // PLME hooks here
   }
 }