fragment-tools 0.1.0

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

@@ -0,0 +1,44 @@
+import { writable, get } from "svelte/store";
+import { sketches } from "./sketches";
+
+export const props = writable({});
+
+sketches.subscribe((sketches) => {
+	const $props = get(props);
+
+	Object.keys(sketches).forEach((key) => {
+		const sketch = sketches[key];
+
+		if (sketch) { // sketch can be undefined if failed to load
+			$props[key] = reconcile(sketch.props, $props[key]);
+		}
+
+	});
+
+	props.set($props);
+});
+
+function reconcile(newProps = {}, existingProps = {}) {
+	Object.keys(newProps).forEach(propKey => {
+		newProps[propKey]._initialValue = newProps[propKey].value;
+	});
+
+	if (existingProps) {
+		Object.keys(existingProps).forEach((propKey) => {
+			let newProp = newProps[propKey];
+
+			if (newProp) {
+				let prevProp = existingProps[propKey];
+				let overrideValue = 
+					typeof prevProp._initialValue === "number" && 
+					prevProp._initialValue === newProp._initialValue;
+
+				if (overrideValue) {
+					newProp.value = prevProp.value;
+				}
+			}
+		});
+	};
+
+	return newProps;
+}

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

@@ -0,0 +1,60 @@
+import { rendering } from "./rendering";
+
+export let renderers = {};
+
+function loadRenderer(renderingMode = "2d") {
+	if (__THREE_RENDERER__ && renderingMode === "three") {
+		return import("../renderers/THREERenderer.js");
+	}
+
+	if (__FRAGMENT_RENDERER__ && renderingMode === "fragment") {
+		return import("../renderers/FragmentRenderer.js");
+	}
+
+	if (__P5_RENDERER__ && renderingMode === "p5") {
+		return import("../renderers/P5Renderer.js");
+	}
+
+	if (__2D_RENDERER__ && renderingMode === "2d") {
+		return import("../renderers/2DRenderer.js");
+	}
+}
+
+export async function findRenderer(renderingMode = "2d") {
+	if (renderers[renderingMode]) return renderers[renderingMode];
+
+	// load and save
+	renderers[renderingMode] = await loadRenderer(renderingMode);
+
+	// get
+	let renderer = renderers[renderingMode];
+	let initialized = false;
+
+	rendering.subscribe((current) => {
+		let r;
+
+		if (!initialized) {
+			if (typeof renderer.init === "function") {
+				r = renderer.init({
+					canvas: document.createElement('canvas'),
+					pixelRatio: current.pixelRatio,
+					width: current.width,
+					height: current.height,
+				});
+			}
+		}
+
+		initialized = true;
+
+		if (typeof renderer.resize === "function") {
+			renderer.resize({
+				width: current.width,
+				height: current.height,
+				pixelRatio: current.pixelRatio,
+				...r,
+			});
+		}
+	});
+
+	return renderer;
+}

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

@@ -0,0 +1,111 @@
+import { writable } from "svelte/store";
+import { client } from "../client";
+import { createStore } from "./utils";
+import { getDimensionsForPreset } from "../lib/presets";
+
+export const SIZES = {
+    FIXED: "fixed",
+    PRESET: "preset",
+    ASPECT_RATIO: "aspect-ratio",
+    WINDOW: "window",
+    SCALE: "scale",
+};
+
+export const rendering = createStore(`rendering`, {
+    width: 1024,
+    height: 1024,
+    pixelRatio: 1,
+    resizing: SIZES.FIXED,
+    aspectRatio: 1,
+    scale: 1,
+    preset: 'a4',
+}, {
+    persist: !__PRODUCTION__,
+    reset: false, 
+});
+
+export const monitors = createStore('monitors', []);
+export const preview = createStore('preview', null);
+
+export const override = (config) => {
+    const { canvasSize = SIZES.WINDOW } = config;
+    const resizing = canvasSize;
+
+    const overrides = {
+        resizing,
+    };
+
+    if (config.dimensions && config.dimensions.length === 2) {
+        const { dimensions } = config;
+        overrides.width = dimensions[0];
+        overrides.height = dimensions[1];
+
+        if (!config.canvasSize) {
+            overrides.resizing = SIZES.FIXED;
+        }
+    }
+
+    if (resizing === SIZES.PRESET) {
+        if (config.preset) {
+            const [ width, height ] = getDimensionsForPreset(config.preset, { pixelsPerInch: 300 });
+
+            overrides.width = width;
+            overrides.height = height;
+        } else {
+            overrides.resizing = SIZES.WINDOW;
+            console.warn(`Cannot apply canvasSize preset if 'preset' is not specified in config.`);
+        }
+    }
+
+    if (resizing === SIZES.ASPECT_RATIO) {
+        if (isNaN(config.aspectRatio)) {
+            overrides.resizing = SIZES.WINDOW;
+            console.warn(`Cannot apply canvasSize:"aspectRatio" if 'aspectRatio' is not specified in config.`);
+        }
+    }
+
+    if (resizing === SIZES.SCALE) {
+        if (!config.dimensions) {
+            console.warn(`Cannot apply canvasSize:"scale" if no dimensions are specified.`);
+            overrides.resizing = SIZES.WINDOW;
+        }
+
+        if (isNaN(config.scale)) {
+            console.warn(`Cannot apply canvasSize:"scale" if 'scale' is not specified in config.`);
+            overrides.resizing = SIZES.WINDOW;
+        } else {
+            overrides.scale = config.scale;
+        }
+    }
+
+    if (config.pixelRatio) {
+        const { pixelRatio } = config;
+        overrides.pixelRatio = typeof pixelRatio === "function" ? pixelRatio() : pixelRatio;
+    }
+
+    rendering.update((curr) => ({...curr, ...overrides}));
+};
+
+/* sync across clients */
+let isSynchronized = false;
+
+export const sync = writable(isSynchronized);
+
+function checkForSync({ clientCount } = {}) {
+    let prev = isSynchronized;
+    isSynchronized = clientCount > 0;
+
+    if (prev && !isSynchronized) {
+        console.warn("[fragment] Sketch is running at specified framerate.");
+    } else if (!prev && isSynchronized) {
+        console.warn("[fragment] Multiple instances of Fragment detected. Running sketch(s) at simulated framerate.");
+    }
+
+    if (prev !== isSynchronized) {
+        sync.set(isSynchronized);
+    }
+}
+
+client.on('start', checkForSync);
+client.on('client-connect', checkForSync);
+client.on('client-disconnect', checkForSync);

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

@@ -0,0 +1,40 @@
+import { createStore } from "./utils.js";
+import { displayError } from "../stores/errors";
+import { sketches as all, onSketchReload } from "@fragment/sketches";
+
+export const sketches = createStore('sketches', {});
+export const sketchesKeys = createStore('sketchesKeys', []);
+export const sketchesCount = createStore('sketchesCount', 0);
+
+async function loadSketch(collection, key) {
+	try {
+		let sketch = await collection[key]();
+
+		return sketch;
+	} catch (error) {
+		displayError(error, key);
+	}
+}
+
+async function loadAll(collection) {
+	const keys = [...Object.keys(collection)];
+	const loadedSketches = await Promise.all(keys.map((key) => loadSketch(collection, key)));
+
+	const newSketches = keys.reduce((all, key, index) => {
+		if (loadedSketches[index]) {
+			all[key] = loadedSketches[index];
+		}
+
+		return all;
+	}, {});
+
+	sketches.update(() => newSketches);
+	sketchesKeys.update(() => keys);
+	sketchesCount.update(() => keys.length);
+}
+
+loadAll(all);
+
+onSketchReload(({ sketches }) => {
+	loadAll(sketches);
+});

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

@@ -0,0 +1,27 @@
+import { readable } from "svelte/store";
+
+export const current = readable({ time: 0, deltaTime: 0 }, set => {
+    let _raf;
+    let lastTime = performance.now();
+    let startTime = lastTime - __START_TIME__;
+    let time = startTime;
+
+    function update(dt = 0) {
+        lastTime = time;
+
+        let currentTime = performance.now();
+        let deltaTime = currentTime - lastTime;
+
+        time = currentTime;
+
+        set({ time, deltaTime, startTime });
+
+        _raf = requestAnimationFrame(update)
+    }
+
+    update();
+
+    return () => {
+        cancelAnimationFrame(_raf);
+    }
+});

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

@@ -0,0 +1,66 @@
+import { writable } from "svelte/store";
+
+let stores = new Map();
+
+/**
+ * Returns the value stored in localStorage for key or return defaultValue if it doesn't exist
+ * @param {string} key 
+ * @param {any} defaultValue 
+ * @param {boolean} override 
+ * @returns {any} result
+ */
+export function rehydrate(key, defaultValue) {
+    const storedValue = localStorage.getItem(`fragment.${key}`);
+
+    if (storedValue) {
+        return typeof storedValue === "string" ? JSON.parse(storedValue) : storedValue;
+    }
+
+    return defaultValue;
+};
+
+/**
+ * Save value in localStorage
+ * @param {string} key 
+ * @param {any} value 
+ */
+export function save(key, value) {
+    localStorage.setItem(`fragment.${key}`, JSON.stringify(value));
+};
+
+/**
+ * Create store and register it for later usage
+ * @param {string} key 
+ * @param {any} initialValue 
+ * @param {object} options
+ * @returns {object} store
+ */
+export function createStore(key, initialValue, { persist = false, reset = false } = {}) {
+    const value = (persist && !reset) ? rehydrate(key, initialValue) : initialValue;
+    const store = writable(value);
+
+    if (persist) {
+        store.subscribe((current) => {
+            save(key, current);
+        });
+    }
+    
+    stores.set(key, store);
+
+    return store;
+};
+
+/**
+ * Get an existing store from key or create it if it doesn't exist yet
+ * @param {string} key 
+ * @param {any} initialValue 
+ * @param {object} options
+ * @returns {object} store
+ */
+export function getStore(key, initialValue, { persist = false, reset = false } = {}) {
+    if (!stores.has(key)) {
+        return createStore(key, initialValue, { persist, reset });
+    }
+
+    return stores.get(key);
+};

package/src/client/app/transitions/fade.js

@@ -0,0 +1,17 @@
+export let name = "Fade";
+
+export let props = {};
+
+export let fragmentShader = /* glsl */`
+precision highp float;
+
+uniform sampler2D uSampler0;
+uniform sampler2D uSampler1;
+uniform float threshold;
+
+varying vec2 vUv;
+
+void main() {
+    gl_FragColor = mix(texture2D(uSampler0, vUv), texture2D(uSampler1, vUv), threshold);
+}
+`;  

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

@@ -0,0 +1,12 @@
+
+// This file is generated by Fragment. Do not edit it.
+
+import * as transition0 from "./fade.js";
+import * as transition1 from "./splitX.js";
+import * as transition2 from "./splitY.js";
+
+export const transitions = {
+    "fade.js": transition0,
+    "splitX.js": transition1,
+    "splitY.js": transition2,
+};

package/src/client/app/transitions/splitX.js

@@ -0,0 +1,16 @@
+export let name = "SplitX";
+export let props = {};
+
+export let fragmentShader = /* glsl */`
+precision highp float;
+
+uniform float threshold;
+uniform sampler2D uSampler0;
+uniform sampler2D uSampler1;
+
+varying vec2 vUv;
+
+void main() {
+    gl_FragColor = mix(texture2D(uSampler0, vUv), texture2D(uSampler1, vUv), step(1. - vUv.x, threshold));
+}
+`;

package/src/client/app/transitions/splitY.js

@@ -0,0 +1,16 @@
+export let name = "SplitY";
+export let props = {};
+
+export let fragmentShader = /* glsl */`
+precision highp float;
+
+uniform float threshold;
+uniform sampler2D uSampler0;
+uniform sampler2D uSampler1;
+
+varying vec2 vUv;
+
+void main() {
+    gl_FragColor = mix(texture2D(uSampler0, vUv), texture2D(uSampler1, vUv), step(1. - vUv.y, threshold));
+}
+`;

package/src/client/app/triggers/Keyboard.js

@@ -0,0 +1,95 @@
+import Trigger from "./Trigger";
+import Keyboard from "../inputs/Keyboard";
+import { wildcard, getContext } from "./shared";
+import { addToMapArray, removeFromMapArray } from "../utils";
+
+const pressedKeys = new Map();
+const upKeys = new Map();
+const downKeys = new Map();
+
+export const removeHotListeners = (context) => {
+    function removeHotFrom(collection) {
+        for (let trigger of collection) {
+            const [key, triggers] = trigger;
+            
+            collection.set(key, triggers.filter((trigger) => trigger.context !== context));
+        }
+    }
+
+    removeHotFrom(pressedKeys);
+    removeHotFrom(upKeys);
+    removeHotFrom(downKeys);
+};
+
+function createEventListener(collection) {
+    return (event) => {
+        const { key, target } = event;
+
+        if (!target.classList.contains('input')) {
+            const triggers = [
+                ...(collection.has(key) ? collection.get(key) : []),
+                ...(collection.has(wildcard) ? collection.get(wildcard) : []),
+            ];
+
+            triggers.forEach(trigger => {
+                if (!Keyboard.enabled) return;
+                
+                trigger.run(event);
+            });
+        }
+    };
+}
+
+function createTrigger(eventName, collection) {
+    return (key, fn, options = {}) => {
+        if (typeof key === "function") {
+            if (typeof fn === "object") {
+                options = {
+                    ...options,
+                    ...fn,
+                };
+            }
+
+            fn = key;
+            key = "*";
+
+            if (options.key) {
+                key = options.key;
+            }
+        }
+
+        const { hot, enabled, ...params } = options;
+        const context = getContext();
+
+        const keys = Array.isArray(key) ? key : [key];
+        
+        const trigger = new Trigger({
+            inputType: 'Keyboard',
+            eventName,
+            fn,
+            context,
+            params: {...params, key: keys },
+            hot,
+            enabled,
+            destroy: () => {
+                keys.forEach((key) => {
+                    removeFromMapArray(collection, key, (item) => item.id === trigger.id);
+                });
+            }
+        });
+
+        keys.forEach(key => {
+            addToMapArray(collection, key, trigger);
+        });
+
+        return trigger;
+    };
+};
+
+window.addEventListener("keypress", createEventListener(pressedKeys));
+window.addEventListener("keyup", createEventListener(upKeys));
+window.addEventListener("keydown", createEventListener(downKeys));
+
+export const onKeyPress = createTrigger('onKeyPress', pressedKeys);
+export const onKeyDown = createTrigger('onKeyDown', downKeys); 
+export const onKeyUp = createTrigger('onKeyUp', upKeys);

package/src/client/app/triggers/MIDI.js

@@ -0,0 +1,122 @@
+import Trigger from "./Trigger";
+import MIDI from "../inputs/MIDI.js";
+import { addToMapArray, removeFromMapArray } from "../utils";
+import { wildcard, getContext } from "./shared";
+
+const noteons = new Map();
+const noteoffs = new Map();
+const numberons = new Map();
+const numberoffs = new Map();
+const controlchanges = new Map();
+
+/**
+ * Remove listeners from a specific context
+ * @param {string} context 
+ */
+export const removeHotListeners = (context) => {
+    function removeHotFrom(collection) {
+        for (let trigger of collection) {
+            const [key, triggers] = trigger;
+            
+            collection.set(key, triggers.filter((trigger) => trigger.context !== context));
+        }
+    }
+
+    removeHotFrom(noteons);
+    removeHotFrom(noteoffs);
+    removeHotFrom(numberons);
+    removeHotFrom(numberoffs);
+    removeHotFrom(controlchanges);
+};
+
+/**
+ * Check all registered listeners for a specific key
+ * @param {Map} collection 
+ * @param {function} getKey 
+ * @returns {function} listener
+ */
+function createEventListener(collection, getKey = (event) => event.key) {
+    return (event) => {
+        const key = getKey(event);
+		const { id } = event.srcElement;
+
+		const triggers = [
+			...(collection.has(key) ? collection.get(key) : []),
+			...(collection.has(wildcard) ? collection.get(wildcard) : []),
+		];
+
+		if (MIDI.enabled && id === MIDI.selectedInputID) {
+			triggers.forEach(trigger => {
+				trigger.run(event);
+			});
+		}
+    };
+}
+
+/**
+ * Create a registering function for a specific event
+ * @param {string} eventName 
+ * @param {Map} collection 
+ * @returns {function} createListener 
+ */
+function createTrigger(eventName, collection) {
+    return (key, fn, options = {}) => {
+        if (typeof key === "function") {
+            if (typeof fn === "object") {
+                options = {
+                    ...options,
+                    ...fn,
+                };
+            }
+
+            fn = key;
+            key = "*";
+
+            if (options.key) {
+                key = options.key;
+            }
+        }
+
+        const { hot, enabled, ...params } = options;
+        const keys = Array.isArray(key) ? key : [key];
+
+        if (!MIDI.enabled) {
+            MIDI.request();
+        }
+
+        const context = getContext();
+
+        const trigger = new Trigger({
+            inputType: 'MIDI',
+            eventName,
+            fn,
+            params: {...params, key: keys },
+            hot,
+            context,
+            enabled,
+            destroy : () => {
+                keys.forEach((key) => {
+                    removeFromMapArray(collection, key, (item) => item.id === trigger.id);
+                });
+            }
+        });
+
+        keys.forEach(k => {
+            addToMapArray(collection, k, trigger);
+        });
+
+        return trigger;
+    };
+};
+
+MIDI.addEventListener("noteon", createEventListener(noteons, (event) => event.note.name));
+MIDI.addEventListener("noteoff", createEventListener(noteoffs, (event) => event.note.name));
+MIDI.addEventListener("noteon", createEventListener(numberons, (event) => event.note.number));
+MIDI.addEventListener("noteoff", createEventListener(numberoffs, (event) => event.note.number));
+MIDI.addEventListener("controlchange", createEventListener(controlchanges, (event) => event.note.number));
+
+export const onNoteOn = createTrigger('onNoteOn', noteons);
+export const onNoteOff = createTrigger('onNoteOff', noteoffs);
+export const onNumberOn = createTrigger('onNumberOn', numberons);
+export const onNumberOff = createTrigger('onNumberOff', numberoffs);
+export const onControlChange = createTrigger('onControlChange', controlchanges);