2 files changed, 87 insertions, 6 deletions

diff --git a/script.js b/script.js
index 36fef75..fcfd1ff 100644
--- a/script.js
+++ b/script.js
@@ -25,7 +25,11 @@ worker.postMessage({ canvas: offscreen }, [offscreen]);
 
 const drawAt = (x, y, color) => {
   worker.postMessage([
-    color == WHITE ? "white" : color == BLACK ? "black" : "grey",
+    color == WHITE
+      ? [1, 1, 1, 1]
+      : color == BLACK
+        ? [0, 0, 0, 1]
+        : [0.1, 0.1, 0.1, 0.3],
     x[0],
     y[0],
     x[1] - x[0],
@@ -525,6 +529,7 @@ window.examples.addEventListener("change", () => {
 });
 
 window.render.addEventListener("click", () => {
+  clearScreen();
   clearErrors();
   reduce(
     app(parse(window.term.value))(parse("\\((((0 \\\\1) \\\\1) \\\\1) \\\\1)")),
diff --git a/worker.js b/worker.js
index f89a699..3b35129 100644
--- a/worker.js
+++ b/worker.js
@@ -1,14 +1,90 @@
-let canvas, screen;
+let canvas, gl;
 
+const createShader = (gl, type, source) => {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+  if (success) return shader;
+
+  console.error(gl.getShaderInfoLog(shader));
+  gl.deleteShader(shader);
+};
+
+const createProgram = (gl, vertexShader, fragmentShader) => {
+  const program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  const success = gl.getProgramParameter(program, gl.LINK_STATUS);
+  if (success) return program;
+
+  console.error(gl.getProgramInfoLog(program));
+  gl.deleteProgram(program);
+};
+
+const initGL = () => {
+  const vertexShaderSource = `
+  attribute vec2 a_position;
+  uniform vec2 u_resolution;
+  void main() {
+	vec2 inverted = vec2(a_position.x, u_resolution.y - a_position.y - 1.0); // !! :)
+    vec2 zeroToOne = inverted / u_resolution;
+    vec2 zeroToTwo = zeroToOne * 2.0;
+	vec2 clipSpace = zeroToTwo - 1.0;
+    gl_Position = vec4(clipSpace, 0, 1);
+  }`;
+  const fragmentShaderSource = `
+  precision mediump float;
+  uniform vec4 u_color;
+  void main() {
+    gl_FragColor = u_color;
+  }`;
+
+  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
+  const fragmentShader = createShader(
+    gl,
+    gl.FRAGMENT_SHADER,
+    fragmentShaderSource,
+  );
+
+  const program = createProgram(gl, vertexShader, fragmentShader);
+  const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
+  const colorUniformLocation = gl.getUniformLocation(program, "u_color");
+  const resolutionUniformLocation = gl.getUniformLocation(
+    program,
+    "u_resolution",
+  );
+
+  const positionBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+  gl.useProgram(program);
+  gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
+  gl.enableVertexAttribArray(positionAttributeLocation);
+  gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
+
+  return (positions, color) => {
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.uniform4f(colorUniformLocation, ...color);
+    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
+  };
+};
+
+let draw;
 self.onmessage = (msg) => {
   if (msg.data == "clear") {
-    screen.clearRect(0, 0, canvas.width, canvas.height);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
   } else if ("canvas" in msg.data) {
     canvas = msg.data.canvas;
-    screen = canvas.getContext("2d");
+    gl = canvas.getContext("webgl", { preserveDrawingBuffer: true });
+    if (!gl) alert("no webgl");
+    gl.viewport(0, 0, canvas.width, canvas.height);
+    draw = initGL();
   } else {
     [color, x, y, width, height] = msg.data;
-    screen.fillStyle = color;
-    screen.fillRect(x, y, width, height);
+    draw([x, y + height, x + width, y + height, x + width, y, x, y], color);
   }
 };