Minor improvements

README.md

@@ -1,6 +1,7 @@
-<img src="static/logo-colored.svg" width=128 height=128 alt="logo" />
+<h1>
-
+  <img src="static/logo-colored.svg" width="64" height="64" alt="SDF-2D logo" />
-# SDF-2D demo
+  SDF-2D demo
+</h1>
 
 ![Deploy everything](https://github.com/schmelczerandras/sdf-2d-demo/workflows/Deploy%20everything/badge.svg)
 

package.json

@@ -45,7 +45,7 @@
     "resolve-url-loader": "^3.1.1",
     "sass": "^1.26.3",
     "sass-loader": "^9.0.3",
-    "sdf-2d": "^0.3.0",
+    "sdf-2d": "^0.3.1",
     "source-map-loader": "^1.1.0",
     "svg-url-loader": "^6.0.0",
     "terser-webpack-plugin": "^2.3.8",

src/helper/mix.ts

@@ -1 +0,0 @@
-export const mix = (from: number, to: number, q: number) => from + (to - from) * q;

src/helper/rgba.ts

@@ -0,0 +1,4 @@
+import { vec4 } from 'gl-matrix';
+
+export const rgba = (r: number, g: number, b: number, a: number): vec4 =>
+  vec4.fromValues(r, g, b, a);

src/helper/rgba255.ts

@@ -0,0 +1,4 @@
+import { vec4 } from 'gl-matrix';
+
+export const rgba255 = (r: number, g: number, b: number, a: number): vec4 =>
+  vec4.fromValues(r / 255, g / 255, b / 255, a / 255);

src/index.html

@@ -4,10 +4,10 @@
     <meta charset="utf-8" />
     <title>SDF-2D demo</title>
 
-    <meta property="og:image:width" content="1438" />
+    <meta property="og:image:width" content="1956" />
-    <meta property="og:image:height" content="638" />
+    <meta property="og:image:height" content="937" />
     <meta property="og:url" content="https://sdf2d.schmelczer.dev" />
-    <meta property="og:image" content="https://sdf2d.schmelczer.dev/og-image.jpg" />
+    <meta property="og:image" content="https://sdf2d.schmelczer.dev/og-image.png" />
     <meta name="theme-color" content="#103783" />
     <meta
       name="description"

src/index.ts

@@ -4,7 +4,7 @@ import '../static/favicons/favicon-16x16.png';
 import '../static/favicons/favicon-32x32.png';
 import '../static/favicons/favicon.ico';
 import '../static/logo-white.svg';
-import '../static/og-image.jpg';
+import '../static/og-image.png';
 import { DeltaTimeCalculator } from './helper/delta-time-calculator';
 import { removeUnnecessaryOutlines } from './helper/remove-unnecessary-outlines';
 import { BlobScene } from './scenes/blob/blob-scene';

src/scenes/blob/blob-scene.ts

@@ -30,7 +30,7 @@ export class BlobScene implements Scene {
       ambientLight: rgb255(89, 25, 115),
       colorPalette: [
         rgb255(0, 0, 0),
-        rgb255(0, 0, 0),
+        rgb255(119, 143, 120),
         rgb255(119, 143, 120),
         rgb255(224, 96, 126),
       ],

src/scenes/rain/rain-scene.ts

@@ -1,4 +1,4 @@
-import { vec2, vec3 } from 'gl-matrix';
+import { vec2 } from 'gl-matrix';
 import { CircleLight, compile, Renderer, Tunnel } from 'sdf-2d';
 import { prettyPrint } from '../../helper/pretty-print';
 import { rgb } from '../../helper/rgb';
@@ -34,13 +34,8 @@ export class RainScene implements Scene {
 
     this.renderer.setRuntimeSettings({
       ambientLight: rgb(0.2, 0.2, 0.2),
-      backgroundColor: vec3.fromValues(1, 1, 1),
+      backgroundColor: rgb(1, 1, 1),
-      colorPalette: [
+      colorPalette: [rgb(1, 1, 1), rgb(0.3, 1, 1), rgb(1, 1, 0), rgb(0.3, 1, 1)],
-        rgb(1, 1, 1),
-        vec3.fromValues(0.3, 1, 1),
-        rgb(1, 1, 0),
-        rgb(0.3, 1, 1),
-      ],
     });
 
     for (let i = 0; i < (canvas.getBoundingClientRect().width / 800) * 20; i++) {

src/scenes/tunnel-scene.ts

@@ -5,6 +5,7 @@ import { last } from '../helper/last';
 import { prettyPrint } from '../helper/pretty-print';
 import { Random } from '../helper/random';
 import { rgb } from '../helper/rgb';
+import { rgba } from '../helper/rgba';
 import { Scene } from './scene';
 
 export class TunnelScene implements Scene {
@@ -78,7 +79,7 @@ export class TunnelScene implements Scene {
     this.renderer.setRuntimeSettings({
       isWorldInverted: true,
       ambientLight: rgb(0.35, 0.1, 0.45),
-      backgroundColor: rgb(1, 1, 1),
+      backgroundColor: rgba(1, 1, 1, 1),
       colorPalette: [rgb(0.4, 0.5, 0.6), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0)],
     });