fragment-tools 0.1.0

package/src/client/app/modules/Params.svelte

@@ -0,0 +1,112 @@
+<script context="module">
+import { writable } from "svelte/store";
+
+export const params = writable([]);
+
+let ID = 0;
+
+</script>
+
+<script>
+import { onMount, onDestroy } from "svelte";
+import { props } from "../stores";
+import { sketches } from "../stores/sketches.js";
+import { monitors } from "../stores/rendering";
+import Module from "../ui/Module.svelte";
+import Field from "../ui/Field.svelte";
+import OutputParams from "../ui/ParamsOutput.svelte";
+import ModuleHeaderAction from "../ui/ModuleHeaderAction.svelte";
+
+export let mID;
+export let hasHeader = true;
+export let output = true;
+
+let id = ID++;
+let selected = id;
+let sketch, sketchKey, sketchProps = {};
+let monitor, showOutputParams;
+
+onMount(() => {
+    $params = [
+        ...$params,
+        {
+            id,
+        }
+    ];
+});
+
+onDestroy(() => {
+    $params = $params.filter((p) => p.id !== id);
+});
+
+$: options = [
+    ...$monitors.map((monitor, index) => {
+        return { value: index, label: `monitor ${index + 1}`}
+    }),
+    ...$params.length > 1 ? [{ value: "output", label: "output"}] : [],
+];
+
+monitors.subscribe((value) => {
+    monitor = $monitors[Math.min(selected, $monitors.length - 1)];
+    sketchKey = monitor ? monitor.selected : undefined;
+});
+
+$: {
+    sketch = $sketches[sketchKey];
+    sketchProps = $props[sketchKey];
+}
+
+$: showOutputParams = (monitor && monitor.selected === "output") ||
+        ($params.length === 1) ||
+        (selected === "output");
+
+</script>
+
+<Module {mID} {hasHeader} name={`Parameters`} slug="params" >
+    <div slot="header-right">
+        {#if options.length > 1 }
+        <ModuleHeaderAction
+            value={selected}
+            permanent
+            border
+            on:change={(event) => selected = event.detail}
+            options={options}
+        />
+        {/if }
+    </div>
+    {#if showOutputParams && output }
+        <OutputParams />
+    {/if}
+
+    {#if sketch }
+        {#if typeof props === "object"}
+            {#if output}
+                <Field key="framerate" value={isFinite(sketch.fps) ? sketch.fps : 60} params={{disabled: true}}/>
+            {/if}
+            {#if sketch.duration && sketch.duration > 0 && output }
+                <Field key="duration" value={sketch.duration} params={{disabled: true, suffix: "s"}}/>
+            {/if }
+            {#each Object.keys(sketchProps) as key, i}
+                {#if !sketchProps[key].hidden}
+                <Field
+                    context={sketchKey}
+                    key={key}
+                    value={sketchProps[key].value}
+                    params={sketchProps[key].params || {}}
+                    type={sketchProps[key].type}
+                    on:click={() => {
+                        $props[sketchKey][key].value._refresh = true;
+                    }}
+                    on:change={(event) => {
+                        $props[sketchKey][key].value = event.detail;
+
+                        if (typeof $props[sketchKey][key].onChange === 'function') {
+                            $props[sketchKey][key].onChange($props[sketchKey][key]);
+                        }
+                    }}
+                />
+                {/if}
+            {/each}
+        {/if}
+    {/if}
+</Module>

package/src/client/app/renderers/2DRenderer.js

@@ -0,0 +1,5 @@
+export let onMountPreview = ({ canvas }) => {
+    return {
+        context: canvas.getContext("2d"),
+    }
+};

package/src/client/app/renderers/FragmentRenderer.js

@@ -0,0 +1,62 @@
+import { fragment } from "../lib/gl";
+import { client } from "@fragment/client";
+import { getShaderPath } from "../utils/glsl.utils";
+import { clearError } from "../stores/errors";
+
+let frags = [];
+
+export let onMountPreview = ({ canvas, id }) => {
+	let frag = fragment({
+		canvas,
+	});
+
+	frags.push({
+		id,
+		frag,
+	});
+
+	return { frag };
+};
+
+export let onResizePreview = ({ id, width, height, pixelRatio }) => {
+	let { frag } = frags.find(f => f.id === id);
+
+	frag.resize({ width, height, pixelRatio });
+};
+
+export let onDestroyPreview = ({ canvas, id }) => {
+	let fragIndex = frags.findIndex(f => f.id === id);
+	let { frag } = frags[fragIndex];
+	
+	clearError(frag.gl.__uuid);
+
+	frag.destroy();
+	frags.splice(fragIndex, 1);
+};
+
+client.on('shader-update', (data) => {
+	frags.forEach(({ frag }) => clearError(frag.gl.__uuid));
+
+	const { filepath, source } = data;
+
+	const programs = frags.map(({ frag }) => frag.program);
+
+	programs.forEach((program) => {
+		const { fragment, vertex } = program;
+
+		const shaders = {
+			vertexShader: vertex,
+			fragmentShader: fragment
+		};
+
+		Object.keys(shaders).forEach((key) => {
+			const shaderPath = getShaderPath(shaders[key]);
+
+			if (shaderPath === filepath) {
+				console.log(`[fragment] shader update ${shaderPath.replace(__CWD__, "")}`);
+				program[key] = source;
+				program.needsUpdate = true;
+			}
+		});
+	});
+});

package/src/client/app/renderers/P5Renderer.js

@@ -0,0 +1,39 @@
+import p5 from "p5";
+
+let previews = [];
+
+export let onMountPreview = ({ id, width, height }) => {
+	const p = new p5((sketch) => {
+		sketch.setup = () => {
+			sketch.createCanvas(width, height);
+		}
+	});
+
+	const preview = {
+		id,
+		p,
+	};
+
+	previews.push(preview);
+	
+    return {
+		canvas: p.canvas,
+		p,
+    };
+};
+
+export let onResizePreview = ({ id, width, height, pixelRatio }) => {
+	const preview = previews.find(p => p.id === id);
+
+	if (preview) {
+		preview.p.resizeCanvas(width * pixelRatio, height * pixelRatio, false);
+	}
+};
+
+export let onDestroyPreview = ({ id }) => {
+	const preview = previews.find(p => p.id === id);
+
+	if (preview) {
+		preview.p.remove();
+	}
+};

package/src/client/app/renderers/THREERenderer.js

@@ -0,0 +1,128 @@
+import { WebGLRenderer, Scene } from "three";
+import { Texture, fragment } from "@fragment/lib/gl";
+import { client } from "@fragment/client";
+import { getShaderPath } from "../utils/glsl.utils";
+import { clearError } from "../stores/errors";
+
+let renderer;
+let previews = [];
+let fragmentShader = /* glsl */`
+    precision highp float;
+    uniform sampler2D uSampler;
+    varying vec2 vUv;
+
+    void main() {
+        vec3 mapTexel = texture2D(uSampler, vUv).rgb;
+        gl_FragColor = vec4(mapTexel, 1.);
+    }
+`;
+
+export let init = ({ canvas }) => {
+    renderer = new WebGLRenderer({ antialias: true });
+
+    return {
+        renderer,
+    };
+};
+
+export let onMountPreview = ({ id, canvas, width, height, pixelRatio }) => {
+    let { gl, render, resize, uniforms, destroy } = fragment({
+        canvas,
+        shader: fragmentShader,
+        uniforms: {
+            uSampler: { value: null, type: "sampler2D" },
+        },
+    });
+
+    let texture = new Texture(gl, {
+        image: renderer.domElement,
+    });
+
+    uniforms.uSampler.value = texture;
+
+    let scene = new Scene();
+
+    previews.push({
+        id,
+        scene,
+        texture,
+        render,
+        resize,
+        destroy,
+    });
+
+    return {
+        scene,
+        renderer,
+    };
+};
+
+export let onDestroyPreview = ({ id, canvas }) => {
+    const previewIndex = previews.findIndex(p => p.id === id);
+    const preview = previews[previewIndex];
+
+    clearError(renderer.getContext().__uuid);
+
+    if (preview) {
+        preview.texture.destroy();
+        preview.destroy();
+        previews.splice(previewIndex, 1);
+    }
+};
+
+export let onAfterUpdatePreview = ({ id }) => {
+    const preview = previews.find(p => p.id === id);
+
+    if (preview) {
+        preview.texture.needsUpdate = true;
+        preview.render();
+    }
+};
+
+export let resize = ({ width, height, pixelRatio }) => {
+    renderer.setPixelRatio(pixelRatio);
+    renderer.setSize(width, height);
+
+    for (let i = 0; i < previews.length; i++) {
+        const preview = previews[i];
+        preview.resize({ width, height, pixelRatio });
+    }
+};
+
+/* HOT SHADER RELOADING */
+client.on('shader-update', (data) => {
+    clearError(renderer.getContext().__uuid);
+    const { filepath, source } = data;
+
+    const scenes = previews.map((preview) => preview.scene);
+    const materials = [];
+
+    scenes.forEach(scene => {
+        scene.traverse((child) => {
+            if (child.material) {
+                const { material } = child;
+
+                if (material.isShaderMaterial || material.isRawShaderMaterial) {
+                    materials.push(material);
+                }
+            }
+        })
+    });
+
+    materials.forEach(material => {
+        const { vertexShader, fragmentShader } = material;
+
+        Object.keys({ vertexShader, fragmentShader }).forEach((key) => {
+            const shader = material[key];
+            const shaderPath = getShaderPath(shader);
+
+            if (shaderPath === filepath) {
+                console.log(`[fragment] shader update ${shaderPath.replace(__CWD__, "")}`);
+                material[key] = source;
+                material.needsUpdate = true;
+            }
+        });
+    });
+
+    
+});

package/src/client/app/stores/audioAnalysis.js

@@ -0,0 +1,10 @@
+import { readable } from "svelte/store";
+import Tempo from "../lib/tempo/index.js";
+
+export const audioAnalysis = new Tempo({
+});
+audioAnalysis.listen();
+
+window.audioAnalysis = audioAnalysis;
+
+export const tempo = readable(audioAnalysis);

package/src/client/app/stores/console.js

@@ -0,0 +1,76 @@
+import { writable } from "svelte/store";
+import { tree, traverse } from "./layout";
+
+export const logs = writable([]);
+
+let mirrored = ["log", "warn", "error", "dir"];
+let enabled = false;
+let refs = {};
+
+tree.subscribe((t) => {
+	let hasConsole = false;
+	traverse((c) => {
+		if (c.type === "module" && c.name === "console") {
+			hasConsole = true;
+		}
+	}, t);
+
+	if (hasConsole && !enabled) {
+		enable();
+	} else if (enabled && !hasConsole) {
+		disable();
+	}
+});
+
+let clear = console.clear;
+
+function enable() {
+	enabled = true;
+	mirrored.forEach((key) => {
+		const ref = console[`${key}`]
+		refs[`${key}`] = ref;
+
+		console[`${key}`] = (...args) => {
+			let isFromVite = args.some((log) => typeof log === "string" && log.includes('[vite]'));
+
+			if (!isFromVite) {
+				ref(...args);
+			}
+
+			logs.update((logs) => {
+				if (isFromVite) return logs;
+
+				if (logs.length > 0) {
+					const lastLog = logs[logs.length - 1];
+					const { level: lastLevel, args: lastArgs } = lastLog;
+
+					if (lastLevel === key && lastArgs[0] === args[0]) {
+						logs[logs.length - 1].count++;
+						return logs;
+					}
+				}
+
+				return [
+					...logs,
+					{ level: key, args, count: 1 },
+				];
+			});
+		};
+	});
+
+	console.clear = () => {
+		clear();
+		logs.update(() => []);
+	};
+}
+
+function disable() {
+	enabled = false;
+	mirrored.forEach((key) => {
+		const ref = refs[key];
+
+		console[`${key}`] = ref;
+	});
+
+	console.clear = clear;
+}

package/src/client/app/stores/errors.js

@@ -0,0 +1,25 @@
+import { createStore } from "./utils";
+
+export const errors = createStore('errors', new Map());
+
+export function displayError(error, context) {
+	errors.update((current) => {
+		current.set(context, error);
+
+		return current;
+	});
+}
+
+export function clearError(context) {
+	errors.update((current) => {
+		if (current.has(context)) {
+			current.delete(context);
+		}
+
+		return current;
+	});
+}
+
+export function clearErrors() {
+	errors.update(() => new Map());
+}

package/src/client/app/stores/exports.js

@@ -0,0 +1,28 @@
+import { writable } from "svelte/store";
+import { createStore } from "./utils";
+
+export const IMAGE_ENCODINGS = ["png", "jpeg", "webp"];
+
+export const VIDEO_FORMATS = {
+	FRAMES: "frames",
+	MP4: "mp4",
+	GIF: "gif",
+	WEBM: "webm",
+};
+
+export const exports = createStore(`exports`, {
+	imageEncoding: IMAGE_ENCODINGS[0],
+	videoFormat: Object.values(VIDEO_FORMATS)[0],
+	pixelsPerInch: 72,
+	framerate: 60,
+	useDuration: true,
+	loopCount: 1,
+	imageQuality: 100,
+	videoQuality: 100,
+}, {
+	persist: !__PRODUCTION__,
+	reset: false,
+});
+
+export const recording = writable(false);
+export const capturing = writable(false);

package/src/client/app/stores/index.js

@@ -0,0 +1,2 @@
+export { props } from "./props";
+export { exports } from "./exports";

package/src/client/app/stores/layout.js

@@ -0,0 +1,187 @@
+import { writable, get } from "svelte/store";
+import { getStore, createStore } from "./utils";
+import { onMount } from "svelte";
+
+export const tree = getStore("layout.current", {}, {
+    persist: !__PRODUCTION__
+});
+
+export const layout = createStore('layout', {
+    editing: false,
+    previewing: false,
+    registerChild: (component, children) => {
+        onMount(() => {
+            component.children = children();
+
+            if (component.root) {
+                tree.set(cleanNodes(component));
+            }
+        });
+    },
+});
+
+function cleanNodes(value) {
+    return JSON.parse(JSON.stringify(value, (key, value) => {
+        if (!(value instanceof HTMLElement)) {
+            return value;
+        }
+    }));
+}
+
+export function traverse(fn = () => {}, node = get(tree)) {
+    const { children = [] } = node;
+
+    fn(node);
+
+    for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        traverse(fn, child);
+    }
+};
+
+export const replaceChildren = (component, newChildren) => {
+    tree.update((t) => {
+        traverse((c) => {
+            if (c.id === component.id) {
+                c.children = newChildren;
+            }
+        }, t);
+
+        return t;
+    });
+};
+
+export const swapRoot = (newRoot) => {
+    tree.update((t) => {
+        traverse((c) => {
+            if (!c.root && c.type !== "module") {
+                c.depth = c.depth + 1;
+            }
+        }, newRoot);
+
+        return newRoot;
+    })
+};
+
+export const addSibling = (component, sibling) => {
+    tree.update((t) => {
+        traverse((c) => {
+            if (c.id === component.parent) {
+                const index = c.children.findIndex( k => k.id === component.id);
+
+                const { size } = c.children[index];
+                c.children[index].size = size * 0.5;
+                sibling.size = size * 0.5;
+
+                const newChildren = [
+                    ...c.children,
+                ];
+
+                newChildren.splice(index + 1, 0, sibling);
+
+                c.children = newChildren;
+            }
+        });
+
+        return t;
+    })
+};
+
+export const addChildren = (component, newChild) => {
+    tree.update((t) => {
+        traverse((c) => {
+            if (c.id === component.id) {
+                c.children = [
+                    ...c.children,
+                    newChild,
+                ];
+            }
+        }, t);
+
+        return t;
+    })
+};
+
+export const remove = (node) => {
+    tree.update((t) => {
+        traverse((c) => {
+            const { children = [] } = c;
+            const childIndex = children.findIndex( k => k.id === node.id);
+
+            if (childIndex >= 0) {
+                const newChildren = [...children];
+                newChildren.splice(childIndex, 1);
+
+                newChildren.forEach((k) => {
+                    k.size = 1. / newChildren.length;
+                });
+
+                if (newChildren.length === 0) {
+                    remove(c);
+                }
+
+                c.children = newChildren;
+            }
+        }, t);
+
+        return t;
+    });
+};
+
+/**
+ * Assign new or reassign existing properties to an exisiting component in the lauout
+ * @param {Number} id - the id of the component to update
+ * @param {object} newProperties - the new properties to assign to the component
+ */
+export const updateComponent = (component, newProperties = {}) => {
+    tree.update((t) => {
+        let updated = false;
+
+        traverse((c) => {
+            if (c.id === component.id) {
+                updated = true;
+                if (typeof newProperties === "object") {
+                    Object.assign(c, newProperties);
+                } else if (typeof newProperties === "function") {
+                    Object.assign(c, newProperties(c));
+                }
+            }
+        }, t);
+
+        if (!updated) {
+            console.warn(`Cannot find component to update with id ${component.id}`);
+        }
+
+        return t;
+    });
+};
+
+export const updateModule = (m, newProperties = {}) => {
+    tree.update((t) => {
+        traverse((c) => {
+            if (c.mID === m.mID) {
+                if (typeof newProperties === "object") {
+                    Object.assign(c, newProperties);
+                } else if (typeof newProperties === "function") {
+                    Object.assign(c, newProperties(c));
+                }
+            }
+        }, t);
+
+        return t;
+    });
+};
+
+export const resize = (nodes = []) => {
+    tree.update((t) => {
+        traverse((c) => {
+            nodes.forEach(n => {
+                if (n.id === c.id) {
+                    c.size = n.size;
+                }
+            });
+        }, t);
+
+        return t;
+    });
+};

package/src/client/app/stores/multisampling.js

@@ -0,0 +1,16 @@
+import { createStore } from "./utils";
+
+export const multisampling = createStore("multisampling", [], {
+	persist: !__PRODUCTION__,
+	reset: true,
+});
+
+export const threshold = createStore("threshold", 0, {
+	persist: !__PRODUCTION__,
+	reset: false,
+});
+
+export const transition = createStore("transition", false, {
+	persist: !__PRODUCTION__,
+	reset: false,
+});