Minor improvements

src/helper/rgb.ts

@@ -0,0 +1,3 @@
+import { vec3 } from 'gl-matrix';
+
+export const rgb = (r: number, g: number, b: number): vec3 => vec3.fromValues(r, g, b);

src/helper/rgb255.ts

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

src/scenes/rain/rain-scene.ts

@@ -1,21 +1,14 @@
 import { vec2, vec3 } from 'gl-matrix';
 import { CircleLight, compile, Renderer, Tunnel } from 'sdf-2d';
 import { prettyPrint } from '../../helper/pretty-print';
+import { rgb255 } from '../../helper/rgb255';
 import { Scene } from '../scene';
 import { Droplet } from './droplet';
 
 export class RainScene implements Scene {
   private droplets: Array<Droplet> = [];
-  private light1: CircleLight = new CircleLight(
+  private light1: CircleLight = new CircleLight(vec2.create(), rgb255(184, 41, 255), 2);
-    vec2.create(),
+  private light2: CircleLight = new CircleLight(vec2.create(), rgb255(255, 31, 109), 2);
-    vec3.fromValues(0.5, 0, 1),
-    1
-  );
-  private light2: CircleLight = new CircleLight(
-    vec2.create(),
-    vec3.fromValues(1, 0, 0.5),
-    1
-  );
 
   private renderer: Renderer;
   private canvas: HTMLCanvasElement;
@@ -43,7 +36,7 @@ export class RainScene implements Scene {
     );
 
     this.renderer.setRuntimeSettings({
-      ambientLight: vec3.fromValues(0.45, 0.25, 0.45),
+      ambientLight: vec3.fromValues(0.2, 0.2, 0.2),
       tileMultiplier: 10,
     });
 

src/scenes/tunnel-scene.ts

@@ -4,6 +4,7 @@ import { clamp } from '../helper/clamp';
 import { last } from '../helper/last';
 import { prettyPrint } from '../helper/pretty-print';
 import { Random } from '../helper/random';
+import { rgb } from '../helper/rgb';
 import { Scene } from './scene';
 
 export class TunnelScene implements Scene {
@@ -75,7 +76,7 @@ export class TunnelScene implements Scene {
           shaderCombinationSteps: [1, 2, 3, 4, 5, 6, 7],
         },
       ],
-      [vec3.fromValues(0.4, 1, 0.6), vec3.fromValues(1, 1, 0), vec3.fromValues(0.3, 1, 1)]
+      [rgb(0.4, 1, 0.6), rgb(1, 1, 0), rgb(0.3, 1, 1)]
     );
 
     this.renderer.setRuntimeSettings({

src/styles/index.scss

@@ -30,7 +30,7 @@ body {
   #info,
   #overlay,
   #toggle-text {
-    margin: 1rem 1.25rem;
+    margin: 1.25rem;
     position: absolute;
   }
 
@@ -105,8 +105,8 @@ body {
     #errors {
       @include card();
 
-      width: min(500px, 90vw);
+      width: min(500px, 80vw);
-      height: min(500px, 90vw);
+      height: min(500px, 80vw);
       padding: 1rem;
 
       h1 {