@bigmistqke/view.gl 0.1.0 → 0.1.2

package/dev/dist/assets/bezier-DuLTb2d1.js

@@ -0,0 +1,294 @@
+import { i as interleave, u as uniform, a as attribute, g as glsl, c as compile, v as view } from './tag-C_bg62fD.js';
+import { c as createElement, a as cursor } from './utils-CvCgsM08.js';
+
+const canvas = createElement("canvas");
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+const gl = canvas.getContext("webgl2", { antialias: true });
+if (!gl) {
+  throw new Error("WebGL not supported");
+}
+const state = {
+  position: { x: 0, y: 0 },
+  // Pan offset in screen pixels
+  scale: 1,
+  // Zoom level
+  controlPoints: [
+    { x: 200, y: 400 },
+    // P0: Start point of the bezier curve
+    { x: 400, y: 100 },
+    // P1: Control point (influences curvature)
+    { x: 600, y: 400 }
+    // P2: End point of the bezier curve
+  ],
+  dragIndex: -1
+  // Index of control point being dragged (-1 = none)
+};
+function screenToWorld(screenX, screenY) {
+  return {
+    x: (screenX - state.position.x) / state.scale,
+    y: (screenY - state.position.y) / state.scale
+  };
+}
+function worldToScreen(worldX, worldY) {
+  return {
+    x: worldX * state.scale + state.position.x,
+    y: worldY * state.scale + state.position.y
+  };
+}
+function getControlPointAt(x, y, threshold = 20) {
+  for (let i = 0; i < state.controlPoints.length; i++) {
+    const screen = worldToScreen(state.controlPoints[i].x, state.controlPoints[i].y);
+    const dx = x - screen.x;
+    const dy = y - screen.y;
+    if (dx * dx + dy * dy < threshold * threshold) {
+      return i;
+    }
+  }
+  return -1;
+}
+canvas.addEventListener("pointerdown", (event) => {
+  const hitIndex = getControlPointAt(event.clientX, event.clientY);
+  if (hitIndex >= 0) {
+    state.dragIndex = hitIndex;
+    cursor(event, (event2) => {
+      const world = screenToWorld(event2.clientX, event2.clientY);
+      state.controlPoints[state.dragIndex] = world;
+      render();
+    });
+  } else {
+    cursor(event, (event2) => {
+      state.position.x -= event2.deltaX;
+      state.position.y -= event2.deltaY;
+      render();
+    });
+  }
+});
+canvas.addEventListener(
+  "wheel",
+  (event) => {
+    const rect = canvas.getBoundingClientRect();
+    const mouseX = event.clientX - rect.left;
+    const mouseY = event.clientY - rect.top;
+    const scaleFactor = event.deltaY > 0 ? 0.95 : 1.05;
+    const oldScale = state.scale;
+    const newScale = Math.max(0.1, Math.min(10, oldScale * scaleFactor));
+    const worldX = (mouseX - state.position.x) / oldScale;
+    const worldY = (mouseY - state.position.y) / oldScale;
+    state.scale = newScale;
+    state.position.x = mouseX - worldX * newScale;
+    state.position.y = mouseY - worldY * newScale;
+    render();
+  },
+  { passive: true }
+);
+window.addEventListener("resize", () => {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  render();
+});
+const curveVertex = glsl`#version 300 es
+// Attributes (per-vertex data)
+${interleave("data", [
+  attribute.float("a_t"),
+  attribute.float("a_side")
+])}     // Bezier parameter t ∈ [0,1]
+
+// Uniforms (shared data for all vertices)
+${uniform.vec2("u_resolution")}   // Canvas size in pixels
+${uniform.vec2("u_offset")}       // Pan offset in pixels
+${uniform.float("u_scale")}       // Zoom level
+${uniform.vec2("u_p0")}          // Control point P0 (start)
+${uniform.vec2("u_p1")}          // Control point P1 (control)
+${uniform.vec2("u_p2")}          // Control point P2 (end)
+${uniform.float("u_thickness")}   // Curve thickness in world units
+
+void main() {
+  // STEP 1: Evaluate the quadratic bezier curve at parameter t
+  // Quadratic bezier formula: B(t) = (1-t)²P0 + 2t(1-t)P1 + t²P2
+  float t = a_t;
+  float s = 1.0 - t;  // s is often used for (1-t) for brevity
+  
+  // Calculate the position on the curve
+  vec2 position = s * s * u_p0 +         // (1-t)² * P0
+                  2.0 * s * t * u_p1 +   // 2(1-t)t * P1
+                  t * t * u_p2;          // t² * P2
+  
+  // STEP 2: Calculate the tangent vector at this point
+  // The derivative of the bezier curve gives us the tangent
+  // B'(t) = 2(1-t)(P1-P0) + 2t(P2-P1)
+  vec2 tangent = 2.0 * s * (u_p1 - u_p0) + 2.0 * t * (u_p2 - u_p1);
+  
+  // STEP 3: Create a normal vector (perpendicular to tangent)
+  // Rotate tangent 90 degrees: (x,y) → (-y,x)
+  vec2 normal = normalize(vec2(-tangent.y, tangent.x));
+  
+  // STEP 4: Offset the curve position to create thickness
+  // Move the vertex perpendicular to the curve by thickness * side
+  vec2 offsetPosition = position + normal * u_thickness * a_side;
+  
+  // STEP 5: Transform from world space to screen space
+  vec2 screenPos = offsetPosition * u_scale + u_offset;
+  
+  // STEP 6: Convert to clip space (OpenGL's coordinate system)
+  // Screen space: (0,0) is top-left, (width,height) is bottom-right
+  // Clip space: (-1,-1) is bottom-left, (1,1) is top-right
+  vec2 clipPos = (screenPos / u_resolution) * 2.0 - 1.0;
+  clipPos.y = -clipPos.y;  // Flip Y to match screen coordinates
+  
+  gl_Position = vec4(clipPos, 0, 1);
+}`;
+const curveFragment = glsl`#version 300 es
+precision mediump float;
+out vec4 fragColor;
+
+void main() {
+  // Output a solid blue color for the curve
+  vec3 curveColor = vec3(0.2, 0.6, 1.0);
+  fragColor = vec4(curveColor, 1.0);
+}`;
+const pointVertex = glsl`#version 300 es
+${attribute.vec2("a_vertex")}      // Quad vertex position (-1 to 1)
+${uniform.vec2("u_resolution")}     // Canvas size
+${uniform.vec2("u_offset")}         // Pan offset
+${uniform.float("u_scale")}         // Zoom level
+${uniform.vec2("u_pointPos")}       // Control point position in world space
+
+void main() {
+  // Create a small square around the control point position
+  vec2 screenPos = (u_pointPos * u_scale + u_offset) + a_vertex * 8.0;
+  
+  // Transform to clip space
+  vec2 clipPos = (screenPos / u_resolution) * 2.0 - 1.0;
+  clipPos.y = -clipPos.y;
+  gl_Position = vec4(clipPos, 0, 1);
+}`;
+const pointFragment = glsl`#version 300 es
+precision mediump float;
+out vec4 fragColor;
+
+void main() {
+  // Red color for control points
+  fragColor = vec4(1.0, 0.3, 0.3, 1.0);
+}`;
+const lineVertex = glsl`#version 300 es
+${attribute.vec2("a_position")}     // Line vertex position
+${uniform.vec2("u_resolution")}      // Canvas size
+${uniform.vec2("u_offset")}          // Pan offset
+${uniform.float("u_scale")}          // Zoom level
+
+void main() {
+  // Transform world position to screen space then clip space
+  vec2 screenPos = a_position * u_scale + u_offset;
+  vec2 clipPos = (screenPos / u_resolution) * 2.0 - 1.0;
+  clipPos.y = -clipPos.y;
+  gl_Position = vec4(clipPos, 0, 1);
+}`;
+const lineFragment = glsl`#version 300 es
+precision mediump float;
+out vec4 fragColor;
+
+void main() {
+  // Semi-transparent gray for control polygon
+  fragColor = vec4(0.5, 0.5, 0.5, 0.5);
+}`;
+const { program: curveProgram, schema: curveSchema } = compile(gl, curveVertex, curveFragment);
+const curveView = view(gl, curveProgram, curveSchema);
+const { program: pointProgram, schema: pointSchema } = compile(gl, pointVertex, pointFragment);
+const pointView = view(gl, pointProgram, pointSchema);
+const { program: lineProgram, schema: lineSchema } = compile(gl, lineVertex, lineFragment);
+const lineView = view(gl, lineProgram, lineSchema);
+const curveSegments = 100;
+function generateTriangleStrip() {
+  return new Float32Array(
+    function* () {
+      for (let i = 0; i <= curveSegments; i++) {
+        const t = i / curveSegments;
+        yield t;
+        yield -1;
+        yield t;
+        yield 1;
+      }
+    }()
+  );
+}
+const stripData = generateTriangleStrip();
+curveView.interleavedAttributes.data.set(stripData);
+const pointVertices = new Float32Array([
+  -1,
+  -1,
+  // Bottom-left
+  1,
+  -1,
+  // Bottom-right
+  -1,
+  1,
+  // Top-left
+  -1,
+  1,
+  // Top-left (repeated for second triangle)
+  1,
+  -1,
+  // Bottom-right (repeated for second triangle)
+  1,
+  1
+  // Top-right
+]);
+pointView.attributes.a_vertex.set(pointVertices);
+function updateLineData() {
+  const lineVerticesData = new Float32Array([
+    state.controlPoints[0].x,
+    state.controlPoints[0].y,
+    // P0
+    state.controlPoints[1].x,
+    state.controlPoints[1].y,
+    // P1
+    state.controlPoints[1].x,
+    state.controlPoints[1].y,
+    // P1 (repeated)
+    state.controlPoints[2].x,
+    state.controlPoints[2].y
+    // P2
+  ]);
+  lineView.attributes.a_position.set(lineVerticesData);
+}
+updateLineData();
+function render() {
+  if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  }
+  gl.viewport(0, 0, canvas.width, canvas.height);
+  gl.clearColor(0.1, 0.1, 0.15, 1);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  updateLineData();
+  gl.useProgram(lineProgram);
+  lineView.attributes.a_position.bind();
+  lineView.uniforms.u_resolution.set(canvas.width, canvas.height);
+  lineView.uniforms.u_offset.set(state.position.x, state.position.y);
+  lineView.uniforms.u_scale.set(state.scale);
+  gl.drawArrays(gl.LINES, 0, 4);
+  gl.useProgram(curveProgram);
+  curveView.interleavedAttributes.data.bind();
+  curveView.uniforms.u_resolution.set(canvas.width, canvas.height);
+  curveView.uniforms.u_offset.set(state.position.x, state.position.y);
+  curveView.uniforms.u_scale.set(state.scale);
+  curveView.uniforms.u_p0.set(state.controlPoints[0].x, state.controlPoints[0].y);
+  curveView.uniforms.u_p1.set(state.controlPoints[1].x, state.controlPoints[1].y);
+  curveView.uniforms.u_p2.set(state.controlPoints[2].x, state.controlPoints[2].y);
+  curveView.uniforms.u_thickness.set(5);
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, (curveSegments + 1) * 2);
+  curveView.interleavedAttributes.data.unbind();
+  gl.useProgram(pointProgram);
+  pointView.attributes.a_vertex.bind();
+  pointView.uniforms.u_resolution.set(canvas.width, canvas.height);
+  pointView.uniforms.u_offset.set(state.position.x, state.position.y);
+  pointView.uniforms.u_scale.set(state.scale);
+  for (const point of state.controlPoints) {
+    pointView.uniforms.u_pointPos.set(point.x, point.y);
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+  }
+}
+render();

package/dev/dist/assets/game_of_life-D7qHdFcv.js

@@ -0,0 +1,202 @@
+import { b as createFramebuffer, a as attribute, g as glsl, u as uniform, c as compile, v as view } from './tag-C_bg62fD.js';
+
+let playing = false;
+const canvas = document.createElement("canvas");
+const gl = canvas.getContext("webgl", { antialias: false });
+if (!gl) {
+  throw new Error("WebGL not supported");
+}
+document.body.append(canvas);
+function spray() {
+  return Math.floor(Math.random() * 8) * (Math.random() < 0.5 ? 1 : -1);
+}
+canvas.addEventListener("mousedown", (event) => {
+  const rect = canvas.getBoundingClientRect();
+  const controller = new AbortController();
+  playing = false;
+  window.addEventListener(
+    "mousemove",
+    (event2) => {
+      const x = Math.floor((event2.clientX - rect.left - spray()) * (canvas.width / rect.width));
+      const y = Math.floor((rect.bottom - event2.clientY - spray()) * (canvas.height / rect.height));
+      const dimensions = [2, 2];
+      const data = new Uint8Array(
+        function* () {
+          for (let i = 0; i < dimensions[0] * dimensions[1]; i++) {
+            yield 255;
+            yield 0;
+            yield 0;
+            yield 255;
+          }
+        }()
+      );
+      gl.bindTexture(gl.TEXTURE_2D, read.texture);
+      gl.texSubImage2D(
+        gl.TEXTURE_2D,
+        0,
+        x,
+        y,
+        dimensions[0],
+        dimensions[1],
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        data
+      );
+      gl.bindTexture(gl.TEXTURE_2D, write.texture);
+      gl.texSubImage2D(
+        gl.TEXTURE_2D,
+        0,
+        x,
+        y,
+        dimensions[0],
+        dimensions[1],
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        data
+      );
+      render();
+    },
+    controller
+  );
+  window.addEventListener(
+    "mouseup",
+    () => {
+      controller.abort();
+      playing = true;
+      animate();
+    },
+    controller
+  );
+});
+canvas.width = 256 * 2;
+canvas.height = 256 * 2;
+const WIDTH = canvas.width;
+const HEIGHT = canvas.height;
+const vertex = glsl`
+  ${attribute.vec2("a_vertex")}
+  varying vec2 v_uv;
+  void main() {
+    v_uv = a_vertex * 0.5 + 0.5;
+    gl_Position = vec4(a_vertex, 0, 1);
+  }
+`;
+const stepFragment = glsl`
+  precision mediump float;
+  varying vec2 v_uv;
+  ${uniform.sampler2D("u_texture")}
+  ${uniform.vec2("u_texelSize")}
+
+  int getCell(vec2 uv) {
+    // Wrap around (toroidal)
+    uv = mod(uv, 1.0);
+    float val = texture2D(u_texture, uv).r;
+    return int(step(0.5, val));
+  }
+
+  void main() {
+    int sum = 0;
+    // Iterate neighbors -1,0,1
+    for (int y = -1; y <= 1; y++) {
+      for (int x = -1; x <= 1; x++) {
+        if (x == 0 && y == 0) continue;
+        sum += getCell(v_uv + vec2(float(x), float(y)) * u_texelSize);
+      }
+    }
+    int current = getCell(v_uv);
+
+    int nextState = 0;
+    if (current == 1) {
+      if (sum == 2 || sum == 3) nextState = 1;
+      else nextState = 0;
+    } else {
+      if (sum == 3) nextState = 1;
+      else nextState = 0;
+    }
+
+    gl_FragColor = vec4(float(nextState), 0.0, 0.0, 1.0);
+  }`;
+const renderFragment = glsl`
+  precision mediump float;
+  varying vec2 v_uv;
+  ${uniform.sampler2D("u_texture")}
+  
+  void main() {
+    float cell = texture2D(u_texture, v_uv).r;
+    gl_FragColor = vec4(vec3(cell), 1.0);
+  }`;
+const { program: stepProgram, schema: stepSchema } = compile(gl, vertex, stepFragment);
+const stepView = view(gl, stepProgram, stepSchema);
+const { program: renderProgram, schema: renderSchema } = compile(gl, vertex, renderFragment);
+const renderView = view(gl, renderProgram, {
+  ...renderSchema,
+  attributes: {
+    ...renderSchema.attributes,
+    a_vertex: {
+      ...renderSchema.attributes.a_vertex,
+      buffer: stepView.attributes.a_vertex.buffer
+    }
+  }
+});
+stepView.attributes.a_vertex.set(new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]));
+const framebufferOptions = {
+  attachment: "color",
+  width: WIDTH,
+  height: HEIGHT,
+  type: "UNSIGNED_BYTE",
+  magFilter: "NEAREST",
+  minFilter: "NEAREST"
+};
+let read = createFramebuffer(gl, framebufferOptions);
+let write = createFramebuffer(gl, framebufferOptions);
+gl.bindTexture(gl.TEXTURE_2D, read.texture);
+gl.texSubImage2D(
+  gl.TEXTURE_2D,
+  0,
+  0,
+  0,
+  WIDTH,
+  HEIGHT,
+  gl.RGBA,
+  gl.UNSIGNED_BYTE,
+  new Uint8Array(
+    function* () {
+      for (let i = 0; i < WIDTH * HEIGHT; i++) {
+        yield 0;
+        yield 0;
+        yield 0;
+        yield 255;
+      }
+    }()
+  )
+);
+function step() {
+  gl.bindFramebuffer(gl.FRAMEBUFFER, write.framebuffer);
+  gl.viewport(0, 0, WIDTH, HEIGHT);
+  gl.useProgram(stepProgram);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, read.texture);
+  stepView.uniforms.u_texture.set(0);
+  stepView.uniforms.u_texelSize.set(1 / WIDTH, 1 / HEIGHT);
+  stepView.attributes.a_vertex.bind();
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+function render() {
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.useProgram(renderProgram);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, write.texture);
+  renderView.uniforms.u_texture.set(0);
+  renderView.attributes.a_vertex.bind();
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+function animate() {
+  if (playing) {
+    step();
+    render();
+    [read, write] = [write, read];
+    requestAnimationFrame(animate);
+  }
+}
+playing = true;
+animate();

package/dev/dist/assets/grid-Ie22U_9K.js

@@ -0,0 +1,173 @@
+import { a as attribute, u as uniform, g as glsl, c as compile, v as view } from './tag-C_bg62fD.js';
+import { c as createElement, a as cursor } from './utils-CvCgsM08.js';
+
+const canvas = createElement("canvas", { width: window.innerWidth, height: window.innerHeight });
+const gl = canvas.getContext("webgl2", { antialias: false });
+if (!gl) {
+  throw new Error("WebGL not supported");
+}
+const state = {
+  position: { x: 0, y: 0 },
+  scale: 1,
+  elements: []
+};
+const container = createElement("div");
+state.elements.push(createGridElement({ x: 100, y: 100 }));
+function createGridElement(position = { x: 0, y: 0 }) {
+  position = {
+    x: (position.x - state.position.x) / state.scale,
+    y: (position.y - state.position.y) / state.scale
+  };
+  const element = createElement("div", {
+    innerText: "HALLO WORLD",
+    style: `position: fixed; 
+z-index: 10; 
+left: 0px; 
+top: 0px; 
+transform-origin: top left; 
+background: white; 
+padding: 2px; 
+border-radius: 2px;`,
+    parentElement: container
+  });
+  function update() {
+    element.style.transform = `translate3d(${state.position.x + position.x * state.scale}px,${state.position.y + position.y * state.scale}px,0) scale(${state.scale})`;
+  }
+  update();
+  return {
+    element,
+    position,
+    update
+  };
+}
+canvas.addEventListener("pointerdown", (event) => {
+  cursor(event, (event2) => {
+    state.position.x -= event2.deltaX;
+    state.position.y -= event2.deltaY;
+    render();
+  });
+});
+canvas.addEventListener("dblclick", (event) => {
+  state.elements.push(
+    createGridElement({
+      x: event.clientX,
+      y: event.clientY
+    })
+  );
+});
+window.addEventListener(
+  "wheel",
+  (event) => {
+    const rect = canvas.getBoundingClientRect();
+    const mouseX = event.clientX - rect.left;
+    const mouseY = event.clientY - rect.top;
+    const scaleFactor = event.deltaY > 0 ? 0.95 : 1.05;
+    const oldScale = state.scale;
+    const newScale = Math.max(0.1, Math.min(10, oldScale * scaleFactor));
+    const gridX = (mouseX - state.position.x) / oldScale;
+    const gridY = (mouseY - state.position.y) / oldScale;
+    state.scale = newScale;
+    state.position.x = mouseX - gridX * newScale;
+    state.position.y = mouseY - gridY * newScale;
+    render();
+  },
+  { passive: true }
+);
+window.addEventListener("resize", render);
+const vertex = glsl`#version 300 es
+${attribute.vec2("a_vertex")}
+${uniform.vec2("u_screenSize")}
+${uniform.vec2("u_pos")}
+${uniform.float("u_scale")}
+out vec2 v_gridCoord;
+
+// Direct mapping: (-1,-1) is bottom-left, (1,1) is top-right in clip space
+// We want (0,0) to be top-left in pixel space
+vec2 project(vec2 pos, vec2 size){
+  return vec2(
+    (pos.x + 1.0),
+    (1.0 - pos.y)
+  ) * size * 0.5;
+}
+
+void main() {
+  vec2 pixelPos = project(a_vertex, u_screenSize);
+  
+  // Apply offset and scale to get grid coordinates
+  v_gridCoord = (pixelPos - u_pos) / u_scale;
+  
+  gl_Position = vec4(a_vertex, 0, 1);
+}`;
+const renderFragment = glsl`#version 300 es
+precision highp float;
+in vec2 v_gridCoord;
+out vec4 fragColor;
+${uniform.float("u_thickness")}
+
+float grid(vec2 coord, float thickness) {
+  vec2 cell = mod(coord, 100.0);
+  vec2 derivative = fwidth(coord);
+  
+  // Convert thickness from screen pixels to grid space
+  vec2 screenThickness = derivative * thickness;
+  
+  // Ensure minimum thickness to prevent lines from disappearing
+  vec2 minThickness = max(screenThickness, derivative * 0.5);
+  
+  // Create hard edges by checking if we're within thickness of a grid line
+  float lineX = step(cell.x, minThickness.x) + step(100.0 - minThickness.x, cell.x);
+  float lineY = step(cell.y, minThickness.y) + step(100.0 - minThickness.y, cell.y);
+  
+  // Clamp to 0-1 range and return maximum (union of lines)
+  return max(min(lineX, 1.0), min(lineY, 1.0));
+}
+
+void main() {
+  // Create grid pattern with adjustable thickness
+  float gridPattern = grid(v_gridCoord, u_thickness);
+  
+  // Grid colors
+  vec3 backgroundColor = vec3(0.1, 0.1, 0.15);
+  vec3 gridColor = vec3(0.3, 0.3, 0.4);
+  vec3 color = mix(backgroundColor, gridColor, gridPattern);
+  
+  fragColor = vec4(color, 1.0);
+}`;
+const { program, schema } = compile(gl, vertex, renderFragment);
+const { attributes, uniforms } = view(gl, program, schema);
+attributes.a_vertex.set(new Float32Array([
+  -1,
+  -1,
+  // bottom-left
+  1,
+  -1,
+  // bottom-right
+  -1,
+  1,
+  // top-left
+  -1,
+  1,
+  // top-left
+  1,
+  -1,
+  // bottom-right
+  1,
+  1
+  // top-right
+]));
+function render() {
+  gl.useProgram(program);
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  gl.viewport(0, 0, canvas.width, canvas.height);
+  gl.clearColor(0, 0, 0, 1);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  attributes.a_vertex.bind();
+  uniforms.u_screenSize.set(canvas.width, canvas.height);
+  uniforms.u_pos.set(state.position.x, state.position.y);
+  uniforms.u_scale.set(state.scale);
+  uniforms.u_thickness.set(1);
+  state.elements.forEach((element) => element.update());
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+render();