Move files

src/utils/colors/hex.ts

@@ -1,16 +0,0 @@
-import { rgb255 } from './rgb255';
-
-import { vec3 } from 'gl-matrix';
-
-export const hex = (hex: string): vec3 => {
-  if (hex[0] === '#') {
-    hex = hex.slice(1);
-  }
-
-  const bigint = parseInt(hex, 16);
-  const r = (bigint >> 16) & 255;
-  const g = (bigint >> 8) & 255;
-  const b = bigint & 255;
-
-  return rgb255(r, g, b);
-};

src/utils/colors/rgb255.ts

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

src/utils/colors/rgba.ts

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

src/utils/colors/rgba255.ts

@@ -1,4 +0,0 @@
-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/utils/graphics/full-screen-quad.ts

@@ -1,5 +1,5 @@
-import { smartCompile } from '../smart-compile';
 import shader from './full-screen-quad.wgsl';
+import { smartCompile } from './smart-compile';
 
 export const setUpFullScreenQuad = (
   device: GPUDevice
@@ -26,7 +26,22 @@ export const setUpFullScreenQuad = (
   return {
     buffer,
     vertex: {
-      module: smartCompile(device, shader),
+      module: smartCompile(
+        device,
+        /* wgsl */ `
+        struct VertexOutput {
+          @builtin(position) position: vec4<f32>,
+          @location(0) uv: vec2<f32>,
+        }
+        
+        @vertex
+        fn vertex(
+          @location(0) position: vec2<f32>,
+          @location(1) uv: vec2<f32>
+        ) -> VertexOutput {
+          return VertexOutput(vec4(position, 0.0, 1.0), uv);
+        }`
+      ),
       entryPoint: 'vertex',
       buffers: [
         {

src/utils/graphics/full-screen-quad/full-screen-quad.wgsl

@@ -1,12 +0,0 @@
-struct VertexOutput {
-  @builtin(position) position: vec4<f32>,
-  @location(0) uv: vec2<f32>,
-}
-
-@vertex
-fn vertex(
-  @location(0) position: vec2<f32>,
-  @location(1) uv: vec2<f32>
-) -> VertexOutput {
-  return VertexOutput(vec4(position, 0.0, 1.0), uv);
-}

src/utils/graphics/noise.ts

@@ -1,4 +1,4 @@
-import { setUpFullScreenQuad } from './full-screen-quad/full-screen-quad';
+import { setUpFullScreenQuad } from './full-screen-quad';
 import { smartCompile } from './smart-compile';
 
 const textureCache = new Map<string, GPUTexture>();

src/utils/settings-slider.ts

@@ -1,141 +0,0 @@
-import { formatNumber } from './format-number';
-
-export enum ValueScaling {
-  Linear,
-  Quadratic,
-  Logarithmic,
-}
-
-export interface SliderConfiguration {
-  min: number;
-  max: number;
-  unit?: string;
-  step?: number;
-  onChangeCallback?: (value: number) => unknown;
-  scaling: ValueScaling;
-  rounding: (value: number) => number;
-}
-
-export class SettingsSlider<T extends Record<string, number>> {
-  private static readonly DEFAULT_STEP_COUNT = 20000;
-
-  private readonly slider: HTMLInputElement;
-  private readonly valueDisplay: HTMLSpanElement;
-  private readonly sliderWrapper: HTMLDivElement;
-  private readonly config: SliderConfiguration = {
-    min: 0,
-    max: 1,
-    scaling: ValueScaling.Linear,
-    rounding: (value) => value,
-  };
-
-  public constructor(
-    private readonly settings: T,
-    private readonly settingName: keyof T & string,
-    config: Partial<SliderConfiguration> = {}
-  ) {
-    this.slider = SettingsSlider.createSlider();
-    this.valueDisplay = SettingsSlider.createValueDisplay();
-    this.sliderWrapper = SettingsSlider.createSliderWrapper(
-      this.settingName,
-      this.slider,
-      this.valueDisplay
-    );
-
-    this.slider.addEventListener('input', this.onChange.bind(this));
-
-    this.updateConfig(config);
-  }
-
-  private static createSlider() {
-    const input = document.createElement('input');
-    input.type = 'range';
-    return input;
-  }
-
-  private static createValueDisplay() {
-    return document.createElement('span');
-  }
-
-  private static createSliderWrapper(
-    name: string,
-    slider: HTMLInputElement,
-    valueDisplay: HTMLSpanElement
-  ) {
-    const wrapper = document.createElement('div');
-    wrapper.classList.add('slider');
-    const label = document.createElement('label');
-
-    const title = document.createElement('p');
-    title.innerText = SettingsSlider.formatLabel(name);
-    title.appendChild(valueDisplay);
-
-    label.appendChild(title);
-    label.appendChild(slider);
-    wrapper.appendChild(label);
-
-    return wrapper;
-  }
-
-  private static formatLabel(value: string): string {
-    const formatted = value.replace(/([A-Z])/g, ' $1');
-
-    return (
-      formatted.charAt(0).toLocaleUpperCase() + formatted.slice(1).toLocaleLowerCase()
-    );
-  }
-
-  private onChange() {
-    this.settings[this.settingName] = this.config.rounding(
-      this.inverseScaling(Number(this.slider.value))
-    ) as any;
-
-    this.config.onChangeCallback?.(this.settings[this.settingName]);
-    this.valueDisplay.innerText = formatNumber(
-      this.settings[this.settingName],
-      this.config.unit
-    );
-  }
-
-  public updateConfig(config: Partial<SliderConfiguration>) {
-    Object.assign(this.config, config);
-
-    if (this.config.step === undefined) {
-      this.config.step =
-        (this.scaling(this.config.max) - this.scaling(this.config.min)) /
-        SettingsSlider.DEFAULT_STEP_COUNT;
-    }
-
-    this.slider.min = this.scaling(this.config.min).toString();
-    this.slider.max = this.scaling(this.config.max).toString();
-    this.slider.step = this.config.step.toString();
-    this.slider.value = this.scaling(this.settings[this.settingName]).toString();
-    this.onChange();
-  }
-
-  public get element(): HTMLElement {
-    return this.sliderWrapper;
-  }
-
-  private get scaling(): (value: number) => number {
-    switch (this.config.scaling) {
-      case ValueScaling.Linear:
-        return (value) => value;
-      case ValueScaling.Quadratic:
-        return (value) => Math.sqrt(value);
-      case ValueScaling.Logarithmic:
-        return (value) => Math.log10(value);
-    }
-  }
-
-  private get inverseScaling(): (value: number) => number {
-    switch (this.config.scaling) {
-      case ValueScaling.Linear:
-        return (value) => value;
-      case ValueScaling.Quadratic:
-        return (value) => Math.pow(value, 2);
-      case ValueScaling.Logarithmic:
-        return (value) => Math.pow(10, value);
-    }
-  }
-}