diff --git a/src/helper/rgb.ts b/src/helper/rgb.ts new file mode 100644 index 0000000..a6ef20a --- /dev/null +++ b/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); diff --git a/src/helper/rgb255.ts b/src/helper/rgb255.ts new file mode 100644 index 0000000..56c47ff --- /dev/null +++ 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); diff --git a/src/scenes/rain/rain-scene.ts b/src/scenes/rain/rain-scene.ts index f2e5307..82f5374 100644 --- a/src/scenes/rain/rain-scene.ts +++ b/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 = []; - private light1: CircleLight = new CircleLight( - vec2.create(), - vec3.fromValues(0.5, 0, 1), - 1 - ); - private light2: CircleLight = new CircleLight( - vec2.create(), - vec3.fromValues(1, 0, 0.5), - 1 - ); + private light1: CircleLight = new CircleLight(vec2.create(), rgb255(184, 41, 255), 2); + private light2: CircleLight = new CircleLight(vec2.create(), rgb255(255, 31, 109), 2); 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, }); diff --git a/src/scenes/tunnel-scene.ts b/src/scenes/tunnel-scene.ts index 19811b0..35130d0 100644 --- a/src/scenes/tunnel-scene.ts +++ b/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({ diff --git a/src/styles/index.scss b/src/styles/index.scss index 6183808..3f3f1a9 100644 --- a/src/styles/index.scss +++ b/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); - height: min(500px, 90vw); + width: min(500px, 80vw); + height: min(500px, 80vw); padding: 1rem; h1 {