diff --git a/README.md b/README.md index 9a26826..b4b1b2b 100644 --- a/README.md +++ b/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 diff --git a/frontend/src/scripting/drawing/pipeline.ts b/frontend/src/scripting/drawing/pipeline.ts new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/scripting/drawing/renderer.ts b/frontend/src/scripting/drawing/renderer.ts index d9e2c2c..b507900 100644 --- a/frontend/src/scripting/drawing/renderer.ts +++ b/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) { 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, - resolution: [this.gl.canvas.width, this.gl.canvas.height],*/ + cameraPosition: [this.cameraPosition.x, this.cameraPosition.y], + viewBoxSize: [this.gl.canvas.width, this.gl.canvas.height], + resolution: [this.gl.canvas.width, this.gl.canvas.height], }; this.gl.useProgram(this.programInfo.program); diff --git a/frontend/src/scripting/helper/keyboard-listener.ts b/frontend/src/scripting/helper/keyboard-listener.ts new file mode 100644 index 0000000..6c946ee --- /dev/null +++ b/frontend/src/scripting/helper/keyboard-listener.ts @@ -0,0 +1,21 @@ +export class KeyboardListener { + private keysDown: Set = 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()) + ); + } +} diff --git a/frontend/src/scripting/main.ts b/frontend/src/scripting/main.ts index b225256..70cb939 100644 --- a/frontend/src/scripting/main.ts +++ b/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 = () => { - try { - const canvas: HTMLCanvasElement = document.querySelector('canvas#main'); - const renderer = new Renderer(canvas, [passthroughVertexShader, distanceFragmentShader]); - renderer.start(); - } catch (e) { - console.error(e); - } + const renderer = new Renderer(canvas, [ + passthroughVertexShader, + distanceFragmentShader, + ]); + renderer.start(); + } catch (e) { + console.error(e); + } }; diff --git a/frontend/src/scripting/shared/line.ts b/frontend/src/scripting/shared/line.ts new file mode 100644 index 0000000..86c0924 --- /dev/null +++ b/frontend/src/scripting/shared/line.ts @@ -0,0 +1,7 @@ +import { Vec2 } from './vec2'; + +export interface Line { + a: Vec2; + b: Vec2; + normal: Vec2; +} diff --git a/frontend/src/scripting/shared/vec2.ts b/frontend/src/scripting/shared/vec2.ts new file mode 100644 index 0000000..48ea69a --- /dev/null +++ b/frontend/src/scripting/shared/vec2.ts @@ -0,0 +1,4 @@ +export interface Vec2 { + x: number; + y: number; +} diff --git a/frontend/src/scripting/shared/world-map.ts b/frontend/src/scripting/shared/world-map.ts new file mode 100644 index 0000000..9deccb4 --- /dev/null +++ b/frontend/src/scripting/shared/world-map.ts @@ -0,0 +1,18 @@ +import { Line } from './line'; + +export class WorldMap { + private lines: Array = []; + + 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 = */ + } + } +} diff --git a/frontend/src/shaders/dist copy.frag b/frontend/src/shaders/dist copy.frag new file mode 100644 index 0000000..173be51 --- /dev/null +++ b/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); +} diff --git a/frontend/src/shaders/dist.frag b/frontend/src/shaders/dist.frag index 173be51..930ac7f 100644 --- a/frontend/src/shaders/dist.frag +++ b/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 -#define WORLD_SIZE 4 -#define N (20) +float interpolate(float from, float to, float quotient) { + float steppedQ = sin(quotient * pi - pi * 0.5) * 0.5 + 0.5; + return from + (to - from) * clamp(steppedQ, 0.0, 1.0); +} -#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; -}; +vec2 rotate90deg(in vec2 vector) { + return vec2(-vector.y, vector.x); +} struct Line { - uint parent; vec2 a; vec2 b; -}; + vec2 normal; + bool isLineEnd; +}[16] lines; -struct Triangle { - uint parent; - vec2 a; - vec2 b; - vec2 c; -}; +float noise(float x){ + return fract(sin(x) * 43758.5453123); +} -// uniform Object[100] objects; +float terrain(float x) { + float result = 0.0; -Circle[3] circles; -Line[1] lines; -Triangle[1] triangles; + float frequency = 0.01; + float amplitude = 1.0; -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); -} + for (int i = 0; i < 8; i++) { + result += sin(2.0 * pi * x * frequency - 2.0 * pi * noise(float(i) * 200.0)) * amplitude; + frequency *= 1.5; + amplitude /= 1.2; + } -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); - return length(pa - ba*h); + h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0); + 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) -{ - return length(position - circle.center) - circle.radius; +Line endDummyLineFromLine(Line line) { + return Line(line.b, line.b + rotate90deg(line.normal), line.normal, false); } -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; - } - } +float getDistance(in vec2 target) { + float minDistance = inf; + 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]); - if (distanceToCurrent < distance) { - distance = distanceToCurrent; - nearestParentIndex = lines[i].parent; + Line current = lines[i]; + + Line next; + 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++) { - float distanceToCurrent = triangleDistance(target, triangles[i]); - if (distanceToCurrent < distance) { - distance = distanceToCurrent; - nearestParentIndex = triangles[i].parent; - } - } - - return distance; + return minDistance; } 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(vec2(0.0, 300.0), vec2(550.0, 140.0), vec2(1.0), false); + lines[1] = Line(vec2(550.0, 140.0), vec2(750.0, 130.0), vec2(1.0), false); + 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)); - - triangles[0] = Triangle(0u, vec2(400.0, 100.0), vec2(200.0, 240.0), vec2(600.0, 340.0)); + for (int i = 0; i < lines.length(); i++) { + vec2 tangent = lines[i].b - lines[i].a; + 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); - uint index; - vec3 color = vec3(1.0) * linearstep(0.0, 1.0, getDistance(position, index)); - fragmentColor = vec4(color, 1.0); + + vec2 pixelPosition = gl_FragCoord.xy + vec2(0.5); + vec2 position = pixelPosition / resolution * viewBoxSize + cameraPosition; + + fragmentColor = vec4(vec3(1.0) * clamp(0.0, 1.0, getDistance(position)), 1.0); } diff --git a/frontend/src/shaders/rainbow.frag b/frontend/src/shaders/rainbow.frag new file mode 100644 index 0000000..c4915c4 --- /dev/null +++ b/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); \ No newline at end of file