Add minimal dungeon drawing code

README.md

@@ -1,11 +1,21 @@
 # decla.red
+
 ![logo](frontend/static/declared.png)
 ![Deploy everything](https://github.com/schmelczerandras/decla.red/workflows/Deploy%20everything/badge.svg)
 
-A nice looking 2D adventure.
+A good-looking 2D adventure.
 
 ## Development
 
 - npm install
 - npm run start
 - npm run build
+
+## Todo
+
+- Frontend nginx sidable logging
+- webpack glsl loader
+- procedural piano
+- lightweight object storage
+- 502 error page for ingress
+- vs code glsl formatter

frontend/src/scripting/drawing/renderer.ts

@@ -1,11 +1,15 @@
 import * as twgl from 'twgl.js';
 import { TimeIt } from '../helper/timing';
+import { KeyboardListener } from '../helper/keyboard-listener';
+import { Vec2 } from '../shared/vec2';
 
 export class Renderer {
   private gl: WebGL2RenderingContext;
   private programInfo: any;
   private bufferInfo: any;
   private vao: any;
+  private cameraPosition: Vec2 = { x: 0, y: 0 };
+  private keys: KeyboardListener = new KeyboardListener();
 
   constructor(private canvas: HTMLCanvasElement, shaderSources: Array<string>) {
     twgl.setDefaults({ attribPrefix: 'a_' });
@@ -49,9 +53,26 @@ export class Renderer {
 
     gl.clear(gl.COLOR_BUFFER_BIT);
 
+    if (this.keys.isKeyDown('w')) {
+      this.cameraPosition.y += 10;
+    }
+
+    if (this.keys.isKeyDown('s')) {
+      this.cameraPosition.y -= 10;
+    }
+
+    if (this.keys.isKeyDown('a')) {
+      this.cameraPosition.x -= 10;
+    }
+
+    if (this.keys.isKeyDown('d')) {
+      this.cameraPosition.x += 10;
+    }
+
     const uniforms = {
-      /*time: time * 0.001,
+      cameraPosition: [this.cameraPosition.x, this.cameraPosition.y],
-            resolution: [this.gl.canvas.width, this.gl.canvas.height],*/
+      viewBoxSize: [this.gl.canvas.width, this.gl.canvas.height],
+      resolution: [this.gl.canvas.width, this.gl.canvas.height],
     };
 
     this.gl.useProgram(this.programInfo.program);

frontend/src/scripting/helper/keyboard-listener.ts

@@ -0,0 +1,21 @@
+export class KeyboardListener {
+  private keysDown: Set<string> = new Set();
+
+  constructor() {
+    document.addEventListener('keydown', (event) => {
+      this.keysDown.add(event.key);
+    });
+
+    document.addEventListener('keyup', (event) => {
+      this.keysDown.delete(event.key);
+    });
+  }
+
+  isKeyDown(key: string): boolean {
+    return (
+      this.keysDown.has(key) ||
+      this.keysDown.has(key.toLowerCase()) ||
+      this.keysDown.has(key.toUpperCase())
+    );
+  }
+}

frontend/src/scripting/main.ts

@@ -1,16 +1,20 @@
 import { Renderer } from './drawing/renderer';
+import { KeyboardListener } from './helper/keyboard-listener';
 
 import passthroughVertexShader from '../shaders/passthrough.vert';
 import distanceFragmentShader from '../shaders/dist.frag';
 
+export const main = async () => {
+  try {
+    const canvas: HTMLCanvasElement = document.querySelector('canvas#main');
 
-export const main = () => {
+    const renderer = new Renderer(canvas, [
-    try {
+      passthroughVertexShader,
-        const canvas: HTMLCanvasElement = document.querySelector('canvas#main');
+      distanceFragmentShader,
-        const renderer = new Renderer(canvas, [passthroughVertexShader, distanceFragmentShader]);
+    ]);
-        renderer.start();
-    } catch (e) {
-        console.error(e);
-    }
 
+    renderer.start();
+  } catch (e) {
+    console.error(e);
+  }
 };

frontend/src/scripting/shared/line.ts

@@ -0,0 +1,7 @@
+import { Vec2 } from './vec2';
+
+export interface Line {
+  a: Vec2;
+  b: Vec2;
+  normal: Vec2;
+}

frontend/src/scripting/shared/vec2.ts

@@ -0,0 +1,4 @@
+export interface Vec2 {
+  x: number;
+  y: number;
+}

frontend/src/scripting/shared/world-map.ts

@@ -0,0 +1,18 @@
+import { Line } from './line';
+
+export class WorldMap {
+  private lines: Array<Line> = [];
+
+  constructor() {
+    const delta = 0.01;
+    for (let i = delta; i < 30; i += delta) {
+      const linePoints = {
+        a: { x: i - delta, y: Math.sin(i - delta) },
+        b: { x: i, y: Math.sin(i) },
+      };
+      /*Vec2 tangent = lines[i].b - lines[i].a;
+            lines[i].normal = vec2(-lines[i].normal.x * tangent.y, lines[i].normal.x * tangent.x);
+            linePoints.normal = */
+    }
+  }
+}

frontend/src/shaders/dist copy.frag

@@ -0,0 +1,135 @@
+#version 300 es
+
+precision mediump float;
+
+
+#define INFINITY 1.0 / 0.0
+#define WORLD_SIZE 4
+#define N (20)
+
+#define CIRCLE 1
+#define LINE 2
+#define TRIANGLE 3
+
+out vec4 fragmentColor;
+uniform vec2 resolution;
+uniform float time;
+
+
+struct Material {
+    vec3 color;
+};
+
+struct Primitive {
+    uint type;
+    uint index;
+};
+
+struct Object {
+    Material material;
+    Primitive[10] primitives;
+};
+
+struct Circle {
+    uint parent;
+    vec2 center;
+  	float radius;
+};
+
+struct Line {
+    uint parent;
+    vec2 a;
+  	vec2 b;
+};
+
+struct Triangle {
+    uint parent;
+    vec2 a;
+  	vec2 b;
+  	vec2 c;
+};
+
+// uniform Object[100] objects;
+
+Circle[3] circles;
+Line[1] lines;
+Triangle[1] triangles;
+
+float triangleDistance(in vec2 position, in Triangle triangle)
+{
+    vec2 e0 = triangle.b - triangle.a, e1 = triangle.c - triangle.b, e2 = triangle.a - triangle.c;
+    vec2 v0 = position - triangle.a, v1 = position - triangle.b, v2 = position - triangle.c;
+    vec2 pq0 = v0 - e0 * clamp(dot(v0, e0) / dot(e0, e0), 0.0, 1.0);
+    vec2 pq1 = v1 - e1 * clamp(dot(v1, e1) / dot(e1, e1), 0.0, 1.0);
+    vec2 pq2 = v2 - e2 * clamp(dot(v2, e2) / dot(e2, e2), 0.0, 1.0);
+    float s = sign(e0.x*e2.y - e0.y*e2.x);
+    vec2 d = min(min(vec2(dot(pq0,pq0), s*(v0.x*e0.y-v0.y*e0.x)),
+                     vec2(dot(pq1,pq1), s*(v1.x*e1.y-v1.y*e1.x))),
+                     vec2(dot(pq2,pq2), s*(v2.x*e2.y-v2.y*e2.x)));
+    return -sqrt(d.x)*sign(d.y);
+} 
+
+float lineDistance(in vec2 position, in Line line)
+{
+    vec2 pa = position - line.a, ba = line.b - line.a;
+    float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+    return length(pa - ba*h);
+}
+
+float circleDistance(in vec2 position, in Circle circle)
+{
+	return length(position - circle.center) - circle.radius;
+}
+
+float getDistance(in vec2 target, out uint nearestParentIndex) {
+    float distance = INFINITY;
+
+    for (int i = 0; i < circles.length(); i++) {
+        float distanceToCurrent = circleDistance(target, circles[i]);
+        if (distanceToCurrent < distance) {
+            distance = distanceToCurrent;
+            nearestParentIndex = circles[i].parent;
+        }
+    }
+
+    for (int i = 0; i < lines.length(); i++) {
+        float distanceToCurrent = lineDistance(target, lines[i]);
+        if (distanceToCurrent < distance) {
+            distance = distanceToCurrent;
+            nearestParentIndex = lines[i].parent;
+        }
+    }
+
+    for (int i = 0; i < triangles.length(); i++) {
+        float distanceToCurrent = triangleDistance(target, triangles[i]);
+        if (distanceToCurrent < distance) {
+            distance = distanceToCurrent;
+            nearestParentIndex = triangles[i].parent;
+        }
+    }
+
+    return distance;
+}
+
+void createWorld() {
+    circles[0] = Circle(0u, vec2(250.0, 100.0), 12.5);   
+    circles[1] = Circle(0u, vec2(150.0, 50.0), 32.5);
+    circles[2] = Circle(0u, vec2(300.0, 350.0), 52.5);
+
+    lines[0] = Line(0u, vec2(100.0, 300.0), vec2(550.0, 140.0));
+
+    triangles[0] = Triangle(0u, vec2(400.0, 100.0), vec2(200.0, 240.0), vec2(600.0, 340.0));
+}
+
+float linearstep(float a, float b, float q) {
+    return a + clamp((b - a) * q, 0.0, 1.0);
+}
+
+void main() {
+    createWorld();
+    
+    vec2 position = gl_FragCoord.xy + vec2(0.5);
+    uint index;
+    vec3 color = vec3(1.0) * linearstep(0.0, 1.0, getDistance(position, index));
+    fragmentColor = vec4(color, 1.0);
+}

frontend/src/shaders/dist.frag

@@ -2,134 +2,137 @@
 
 precision mediump float;
 
+const float smoothing = 10.0;
+const float inf = 1000000.0;
+const float pi = atan(1.0) * 4.0;
 
-#define INFINITY 1.0 / 0.0
+float interpolate(float from, float to, float quotient) {
-#define WORLD_SIZE 4
+    float steppedQ = sin(quotient * pi - pi * 0.5) * 0.5 + 0.5;
-#define N (20)
+    return from + (to - from) * clamp(steppedQ, 0.0, 1.0);
+}
 
-#define CIRCLE 1
+vec2 rotate90deg(in vec2 vector) {
-#define LINE 2
+    return vec2(-vector.y, vector.x);
-#define TRIANGLE 3
+}
-
-out vec4 fragmentColor;
-uniform vec2 resolution;
-uniform float time;
-
-
-struct Material {
-    vec3 color;
-};
-
-struct Primitive {
-    uint type;
-    uint index;
-};
-
-struct Object {
-    Material material;
-    Primitive[10] primitives;
-};
-
-struct Circle {
-    uint parent;
-    vec2 center;
-  	float radius;
-};
 
 struct Line {
-    uint parent;
     vec2 a;
   	vec2 b;
-};
+    vec2 normal;
+    bool isLineEnd;
+}[16] lines;
 
-struct Triangle {
+float noise(float x){
-    uint parent;
+    return fract(sin(x) * 43758.5453123);
-    vec2 a;
+}
-  	vec2 b;
-  	vec2 c;
-};
 
-// uniform Object[100] objects;
+float terrain(float x) {
+    float result = 0.0;
 
-Circle[3] circles;
+    float frequency = 0.01;
-Line[1] lines;
+    float amplitude = 1.0;
-Triangle[1] triangles;
 
-float triangleDistance(in vec2 position, in Triangle triangle)
+    for (int i = 0; i < 8; i++) {
-{
+        result += sin(2.0 * pi * x * frequency - 2.0 * pi * noise(float(i) * 200.0)) * amplitude;
-    vec2 e0 = triangle.b - triangle.a, e1 = triangle.c - triangle.b, e2 = triangle.a - triangle.c;
+        frequency *= 1.5;
-    vec2 v0 = position - triangle.a, v1 = position - triangle.b, v2 = position - triangle.c;
+        amplitude /= 1.2;
-    vec2 pq0 = v0 - e0 * clamp(dot(v0, e0) / dot(e0, e0), 0.0, 1.0);
+    }
-    vec2 pq1 = v1 - e1 * clamp(dot(v1, e1) / dot(e1, e1), 0.0, 1.0);
-    vec2 pq2 = v2 - e2 * clamp(dot(v2, e2) / dot(e2, e2), 0.0, 1.0);
-    float s = sign(e0.x*e2.y - e0.y*e2.x);
-    vec2 d = min(min(vec2(dot(pq0,pq0), s*(v0.x*e0.y-v0.y*e0.x)),
-                     vec2(dot(pq1,pq1), s*(v1.x*e1.y-v1.y*e1.x))),
-                     vec2(dot(pq2,pq2), s*(v2.x*e2.y-v2.y*e2.x)));
-    return -sqrt(d.x)*sign(d.y);
-} 
 
-float lineDistance(in vec2 position, in Line line)
+    return result;
-{
+}
+
+float lineDistance(in vec2 position, in Line line, out float h) {
     vec2 pa = position - line.a, ba = line.b - line.a;
-    float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+    h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
-    return length(pa - ba*h);
+    vec2 delta = pa - ba*h;
+    // sign can return 0, double sign prevents this
+    float side = sign(sign(dot(delta, line.normal)) - 0.5);
+    return length(delta) * side + terrain(length(ba * h));
 }
 
-float circleDistance(in vec2 position, in Circle circle)
+Line endDummyLineFromLine(Line line) {
-{
+    return Line(line.b, line.b + rotate90deg(line.normal), line.normal, false);
-	return length(position - circle.center) - circle.radius;
 }
 
-float getDistance(in vec2 target, out uint nearestParentIndex) {
+float getDistance(in vec2 target) {
-    float distance = INFINITY;
+    float minDistance = inf;
-
-    for (int i = 0; i < circles.length(); i++) {
-        float distanceToCurrent = circleDistance(target, circles[i]);
-        if (distanceToCurrent < distance) {
-            distance = distanceToCurrent;
-            nearestParentIndex = circles[i].parent;
-        }
-    }
 
+    float leftJoinAcuteness = 0.0;
+    vec2 splitterLineNormalStart = vec2(-1.0, 0.0);
+    bool skipDistanceToPrevious = true;
     for (int i = 0; i < lines.length(); i++) {
-        float distanceToCurrent = lineDistance(target, lines[i]);
+        Line current = lines[i];
-        if (distanceToCurrent < distance) {
+
-            distance = distanceToCurrent;
+        Line next;
-            nearestParentIndex = lines[i].parent;
+        if (current.isLineEnd || i + 1 == lines.length()) {
+            next = endDummyLineFromLine(current);
+        } else {
+            next = lines[i + 1];
         }
+
+        vec2 splitterLineNormalEnd = rotate90deg(normalize(current.normal + next.normal));
+
+        float h;
+        float distanceToCurrent = lineDistance(target, current, h);
+        float rightJoinAcuteness = dot(next.b - current.a, next.normal - current.normal);
+        distanceToCurrent -= interpolate(
+            sign(leftJoinAcuteness) * smoothing,
+            sign(rightJoinAcuteness) * smoothing, h
+        );
+        leftJoinAcuteness = rightJoinAcuteness;
+
+        if (
+            !(
+                   dot(target - current.a, splitterLineNormalStart * -sign(dot(current.b - current.a, splitterLineNormalStart))) > 0.0 
+                || dot(target - current.b, splitterLineNormalEnd * sign(dot(current.a - current.b, splitterLineNormalEnd))) <= 0.0
+            ) && abs(distanceToCurrent) < abs(minDistance)
+        ) {
+            minDistance = distanceToCurrent;
+        }
+        splitterLineNormalStart = splitterLineNormalEnd;
     }
 
-    for (int i = 0; i < triangles.length(); i++) {
+    return minDistance;
-        float distanceToCurrent = triangleDistance(target, triangles[i]);
-        if (distanceToCurrent < distance) {
-            distance = distanceToCurrent;
-            nearestParentIndex = triangles[i].parent;
-        }
-    }
-
-    return distance;
 }
 
 void createWorld() {
-    circles[0] = Circle(0u, vec2(250.0, 100.0), 12.5);   
+    lines[0] = Line(vec2(0.0, 300.0), vec2(550.0, 140.0), vec2(1.0), false);
-    circles[1] = Circle(0u, vec2(150.0, 50.0), 32.5);
+    lines[1] = Line(vec2(550.0, 140.0), vec2(750.0, 130.0), vec2(1.0), false);
-    circles[2] = Circle(0u, vec2(300.0, 350.0), 52.5);
+    lines[2] = Line(vec2(750.0, 130.0), vec2(650.0, 230.0), vec2(1.0), false);
+    lines[3] = Line(vec2(650.0, 230.0), vec2(850.0, 230.0), vec2(1.0), false);
+    lines[4] = Line(vec2(850.0, 230.0), vec2(800.0, 150.0), vec2(1.0), false);
+    lines[5] = Line(vec2(800.0, 150.0), vec2(1000.0, 120.0), vec2(1.0), false);
+    lines[6] = Line(vec2(1000.0, 120.0), vec2(1150, 120.0), vec2(1.0), false);
+    lines[7] = Line(vec2(1150, 120.0), vec2(10200, 350.0), vec2(1.0), true);
+    lines[8] = Line(vec2(0.0, 600.0), vec2(550.0, 440.0), vec2(-1.0), false);
+    lines[9] = Line(vec2(550.0, 440.0), vec2(750.0, 430.0), vec2(-1.0), false);
+    lines[10] = Line(vec2(750.0, 430.0), vec2(650.0, 530.0), vec2(-1.0), false);
+    lines[11] = Line(vec2(650.0, 530.0), vec2(850.0, 530.0), vec2(-1.0), false);
+    lines[12] = Line(vec2(850.0, 530.0), vec2(820.0, 450.0), vec2(-1.0), false);
+    lines[13] = Line(vec2(820.0, 450.0), vec2(1000.0, 420.0), vec2(-1.0), false);
+    lines[14] = Line(vec2(1000.0, 420.0), vec2(1150, 420.0), vec2(-1.0), false);
+    lines[15] = Line(vec2(1150, 420.0), vec2(10200, 650.0), vec2(-1.0), true);
 
-    lines[0] = Line(0u, vec2(100.0, 300.0), vec2(550.0, 140.0));
+    for (int i = 0; i < lines.length(); i++) {
-
+        vec2 tangent = lines[i].b - lines[i].a;
-    triangles[0] = Triangle(0u, vec2(400.0, 100.0), vec2(200.0, 240.0), vec2(600.0, 340.0));
+        lines[i].normal = normalize(
+            vec2(-lines[i].normal.x * tangent.y, lines[i].normal.x * tangent.x)
+        );
+    }
 }
 
-float linearstep(float a, float b, float q) {
+
-    return a + clamp((b - a) * q, 0.0, 1.0);
+uniform vec2 cameraPosition;
-}
+uniform vec2 viewBoxSize;
+uniform vec2 resolution;
+
+out vec4 fragmentColor;
 
 void main() {
     createWorld();
-    
+
-    vec2 position = gl_FragCoord.xy + vec2(0.5);
+    vec2 pixelPosition = gl_FragCoord.xy + vec2(0.5);
-    uint index;
+    vec2 position = pixelPosition / resolution * viewBoxSize + cameraPosition;
-    vec3 color = vec3(1.0) * linearstep(0.0, 1.0, getDistance(position, index));
+
-    fragmentColor = vec4(color, 1.0);
+    fragmentColor = vec4(vec3(1.0) * clamp(0.0, 1.0, getDistance(position)), 1.0);
 }

frontend/src/shaders/rainbow.frag

@@ -0,0 +1,18 @@
+vec3 rainbow(float level) {
+	float r = float(level <= 2.0) + float(level > 4.0) * 0.5;
+	float g = max(1.0 - abs(level - 2.0) * 0.5, 0.0);
+	float b = (1.0 - (level - 4.0) * 0.5) * float(level >= 4.0);
+	return vec3(r, g, b);
+}
+
+vec4 smoothRainbow(float x) {
+    float level1 = floor(x*6.0);
+    float level2 = min(6.0, floor(x*6.0) + 1.0);
+    
+    vec3 a = rainbow(level1);
+    vec3 b = rainbow(level2);
+    
+    return vec4(mix(a, b, fract(x*6.0)), 1.0);
+}
+
+fragmentColor = smoothRainbow(getDistance(position) / 30.0 + 0.5);