fragment-tools 0.1.13 → 0.1.15

package/src/client/app/ui/OutputRenderer.svelte

@@ -1,23 +1,27 @@
 <script>
-import { onDestroy, onMount } from "svelte";
-import { fragment, Texture } from "../lib/gl";
-import { transitions } from "../transitions/index.js";
-import { rendering, monitors } from "../stores/rendering.js";
-import { multisampling, threshold, transition } from "../stores/multisampling.js";
-
-export let paused = false;
-
-let _raf;
-let canvas;
-let output;
-let _mounted;
-let uniforms = {
-    threshold: { value: 0, type: "float" },
-    uSampler0: { value: null, type: "sampler2D" },
-    uSampler1: { value: null, type: "sampler2D" },
-}
-
-let defaultFragmentShader = /* glsl */`
+	import { onDestroy, onMount } from 'svelte';
+	import { fragment, Texture } from '../lib/gl';
+	import { transitions } from '../transitions/index.js';
+	import { rendering, monitors } from '../stores/rendering.js';
+	import {
+		multisampling,
+		threshold,
+		transition,
+	} from '../stores/multisampling.js';
+
+	export let paused = false;
+
+	let _raf;
+	let canvas;
+	let output;
+	let _mounted;
+	let uniforms = {
+		threshold: { value: 0, type: 'float' },
+		uSampler0: { value: null, type: 'sampler2D' },
+		uSampler1: { value: null, type: 'sampler2D' },
+	};
+
+	let defaultFragmentShader = /* glsl */ `
 precision highp float;
 
 uniform float threshold;
@@ -36,114 +40,117 @@ void main() {
 }
 `;
 
-$: t = transitions[$transition];
-$: fragmentShader = t ? t.fragmentShader : defaultFragmentShader;
-$: {
-    if (output) {
-        output.fragmentShader = fragmentShader;
-    }
-}
+	$: t = transitions[$transition];
+	$: fragmentShader = t ? t.fragmentShader : defaultFragmentShader;
+	$: {
+		if (output) {
+			output.fragmentShader = fragmentShader;
+		}
+	}
 
-onMount(() => {
-    output = fragment({
-        canvas,
-        shader: fragmentShader,
-        uniforms,
-    });
+	onMount(() => {
+		output = fragment({
+			canvas,
+			shader: fragmentShader,
+			uniforms,
+		});
 
-    uniforms.uSampler0.value = new Texture(output.gl);
-    uniforms.uSampler1.value = new Texture(output.gl);
+		uniforms.uSampler0.value = new Texture(output.gl);
+		uniforms.uSampler1.value = new Texture(output.gl);
 
-    assignTextures();
-    resize();
-    render();
+		assignTextures();
+		resize();
+		render();
 
-    rendering.subscribe(() => {
-        resize();
-    });
+		rendering.subscribe(() => {
+			resize();
+		});
 
-    _mounted = true;
-});
+		_mounted = true;
+	});
 
-onDestroy(() => {
-    cancelAnimationFrame(_raf);
+	onDestroy(() => {
+		cancelAnimationFrame(_raf);
 
-    output.destroy();
-    output = null;
-});
+		output.destroy();
+		output = null;
+	});
 
-function assignTextures([monitorID0, monitorID1] = $multisampling) {
-    if (!output) return;
+	function assignTextures([monitorID0, monitorID1] = $multisampling) {
+		if (!output) return;
 
-    if (monitorID0 >= 0) {
-        uniforms.uSampler0.value.image = $monitors.find((monitor) => monitor.id === monitorID0).canvas;
-    }
+		if (monitorID0 >= 0) {
+			uniforms.uSampler0.value.image = $monitors.find(
+				(monitor) => monitor.id === monitorID0,
+			).canvas;
+		}
 
-    if (monitorID1 >= 0) {
-        uniforms.uSampler1.value.image = $monitors.find((monitor) => monitor.id === monitorID1).canvas;
-    }
-}
+		if (monitorID1 >= 0) {
+			uniforms.uSampler1.value.image = $monitors.find(
+				(monitor) => monitor.id === monitorID1,
+			).canvas;
+		}
+	}
 
-multisampling.subscribe(assignTextures);
+	multisampling.subscribe(assignTextures);
 
-function render() {
-    uniforms.threshold.value = $threshold;
+	function render() {
+		uniforms.threshold.value = $threshold;
 
-    if (!paused) {
-        uniforms.uSampler0.value.needsUpdate = true;
-        uniforms.uSampler1.value.needsUpdate = true;
+		if (!paused) {
+			uniforms.uSampler0.value.needsUpdate = true;
+			uniforms.uSampler1.value.needsUpdate = true;
 
-        output.render();
-    }
+			output.render();
+		}
 
-    _raf = requestAnimationFrame(render);
-}
-
-function resize() {
-    if (!output) return;
+		_raf = requestAnimationFrame(render);
+	}
 
-    const { width, height, pixelRatio } = $rendering;
+	function resize() {
+		if (!output) return;
 
-    output.resize({
-        width,
-        height,
-        pixelRatio,
-    })
-}
+		const { width, height, pixelRatio } = $rendering;
 
+		output.resize({
+			width,
+			height,
+			pixelRatio,
+		});
+	}
 </script>
 
 <div class="output-renderer">
-    <div class="canvas-container" style="max-width: {$rendering.width}px;">
-        <canvas bind:this={canvas}></canvas>
-    </div>
+	<div class="canvas-container" style="max-width: {$rendering.width}px;">
+		<canvas bind:this={canvas}></canvas>
+	</div>
 </div>
 
 <style>
-.output-renderer {
-    position: relative;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    justify-content: center;
-
-    background-color: var(--background-color, var(--color-lightblack));
-}
-
-.output-renderer :global(canvas) {
-    max-width: 100%;
-    max-height: 100%;
-    background: black;
-
-    width: auto !important;
-    height: auto !important;
-}
-
-.canvas-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: 100%;
-    max-height: 100%;
-}
+	.output-renderer {
+		position: relative;
+		display: flex;
+		width: 100%;
+		height: 100%;
+		justify-content: center;
+
+		background-color: var(--background-color, var(--color-lightblack));
+	}
+
+	.output-renderer :global(canvas) {
+		max-width: 100%;
+		max-height: 100%;
+		background: black;
+
+		width: auto !important;
+		height: auto !important;
+	}
+
+	.canvas-container {
+		position: relative;
+		display: flex;
+		align-items: center;
+		height: 100%;
+		max-height: 100%;
+	}
 </style>

package/src/client/app/ui/ParamsMultisampling.svelte

@@ -1,109 +1,110 @@
 <script>
-import { multisampling, threshold, transition } from "../stores/multisampling.js";
-import { monitors } from "../stores/rendering.js";
-import { transitions } from "../transitions/index.js";
-import Field from "./Field.svelte";
-import FieldGroup from "./FieldGroup.svelte";
+	import {
+		multisampling,
+		threshold,
+		transition,
+	} from '../stores/multisampling.js';
+	import { monitors } from '../stores/rendering.js';
+	import { transitions } from '../transitions/index.js';
+	import Field from './Field.svelte';
+	import FieldGroup from './FieldGroup.svelte';
 
-let monitorDisabled = false;
-let sampler0 = -1;
-let sampler1 = -1;
+	let monitorDisabled = false;
+	let sampler0 = -1;
+	let sampler1 = -1;
 
-const transitionOptions = Object.keys(transitions).map((key) => {
-    const transition = transitions[key];
-    const label = transition.name ? transition.name : key;
-    return { value: key, label };
-});
-
-if (!$transition) {
-    $transition = transitionOptions[0].value;
-}
+	const transitionOptions = Object.keys(transitions).map((key) => {
+		const transition = transitions[key];
+		const label = transition.name ? transition.name : key;
+		return { value: key, label };
+	});
 
-$: samplerOptions = $monitors
-	.map((monitor, index) => ({ label: `monitor ${index+1}`, value: monitor.id })) // set index first so it matches <Monitor>
-    .filter((option) => {
-		const monitor = $monitors.find((m) => m.id === option.value);
+	if (!$transition) {
+		$transition = transitionOptions[0].value;
+	}
 
-		return monitor.selected !== "output";
-	});
-$: {
-    monitorDisabled = samplerOptions.length === 0;
+	$: samplerOptions = $monitors
+		.map((monitor, index) => ({
+			label: `monitor ${index + 1}`,
+			value: monitor.id,
+		})) // set index first so it matches <Monitor>
+		.filter((option) => {
+			const monitor = $monitors.find((m) => m.id === option.value);
 
-    if (samplerOptions.length === 0) {
-        samplerOptions = [
-            { label: `No monitor available.`, value: -1 }
-        ];
-        sampler0 = samplerOptions[0].value;
-        sampler1 = samplerOptions[0].value;
-    } else {
-        if (sampler0 < 0) {
-            sampler0 = samplerOptions[0].value;
-        }
+			return monitor.selected !== 'output';
+		});
+	$: {
+		monitorDisabled = samplerOptions.length === 0;
 
-        if (sampler1 < 0) {
-            sampler1 = samplerOptions.length > 1 ? samplerOptions[1].value : -1;
-        }
-    }
+		if (samplerOptions.length === 0) {
+			samplerOptions = [{ label: `No monitor available.`, value: -1 }];
+			sampler0 = samplerOptions[0].value;
+			sampler1 = samplerOptions[0].value;
+		} else {
+			if (sampler0 < 0) {
+				sampler0 = samplerOptions[0].value;
+			}
 
-    $multisampling = [sampler0, sampler1];
-}
+			if (sampler1 < 0) {
+				sampler1 =
+					samplerOptions.length > 1 ? samplerOptions[1].value : -1;
+			}
+		}
 
+		$multisampling = [sampler0, sampler1];
+	}
 </script>
+
 <FieldGroup name="monitors">
-    <Field
-        key="sampler0"
-        value={sampler0}
-        on:change={event => {
-            sampler0 = Number(event.detail);
-        }}
-        params={
-            {
-                options: samplerOptions,
-                disabled: monitorDisabled
-            }
-        }
-    />
-    <Field
-        key="sampler1"
-        value={sampler1}
-        on:change={event => {
-            sampler1 = Number(event.detail);
-        }}
-        params={
-            {
-                options: samplerOptions,
-                disabled: monitorDisabled
-            }
-        }
-    />
+	<Field
+		key="sampler0"
+		value={sampler0}
+		on:change={(event) => {
+			sampler0 = Number(event.detail);
+		}}
+		params={{
+			options: samplerOptions,
+		}}
+		disabled={monitorDisabled}
+	/>
+	<Field
+		key="sampler1"
+		value={sampler1}
+		on:change={(event) => {
+			sampler1 = Number(event.detail);
+		}}
+		params={{
+			options: samplerOptions,
+		}}
+		disabled={monitorDisabled}
+	/>
 </FieldGroup>
 <FieldGroup name="transition">
-    <Field
-        key="type"
-        value={$transition}
-        on:change={(event) => {
-            $transition = event.detail;
-        }}
-        params={{
-            options: transitionOptions,
-        }}
-    />
-    <Field
-        key="threshold"
-        value={$threshold}
-        on:change={(event) => $threshold = event.detail }
-        params={{
-            step: 0.01,
-            min: 0,
-            max: 1,
-        }}
-    />
-    <Field
-        key="switch"
-        value={() => $threshold = 1 - Math.round($threshold)}
-        params={{
-            label: `switch ${Math.round($threshold) > 0 ? `<` : `>`}`
-        }}
-    />
-    
+	<Field
+		key="type"
+		value={$transition}
+		on:change={(event) => {
+			$transition = event.detail;
+		}}
+		params={{
+			options: transitionOptions,
+		}}
+	/>
+	<Field
+		key="threshold"
+		value={$threshold}
+		on:change={(event) => ($threshold = event.detail)}
+		params={{
+			step: 0.01,
+			min: 0,
+			max: 1,
+		}}
+	/>
+	<Field
+		key="switch"
+		value={() => ($threshold = 1 - Math.round($threshold))}
+		params={{
+			label: `switch ${Math.round($threshold) > 0 ? `<` : `>`}`,
+		}}
+	/>
 </FieldGroup>