fragment-tools 0.1.0

package/src/cli/templates/fragment.js

@@ -0,0 +1,18 @@
+import fragmentShader from "./fragment.fs";
+
+let uniforms = {
+	uTime: { value: 0, type: "float" },
+};
+
+export let init = ({ frag }) => {
+	frag.uniforms = uniforms;
+	frag.shader = fragmentShader;
+};
+
+export let update = ({ frag, deltaTime }) => {
+	uniforms.uTime.value += deltaTime;
+
+	frag.render();
+};
+
+export let rendering = "fragment";

package/src/cli/templates/index.js

@@ -0,0 +1,24 @@
+const templates = {
+	"2d": [
+		"./templates/2d.js"
+	],
+	"fragment": [
+		"./templates/fragment.js",
+		"./templates/fragment.fs"
+	],
+	"three/orthographic": [
+		"./templates/three-orthographic.js"
+	],
+	"three/fragment": [
+		"./templates/three-fragment.js",
+		"./templates/fragment.fs"
+	],
+	"three/perspective": [
+		"./templates/three-perspective.js"
+	],
+	"p5": [
+		"./templates/p5.js"
+	]
+};
+
+export default templates;

package/src/cli/templates/p5.js

@@ -0,0 +1,13 @@
+import p5 from "p5";
+
+export let props = {};
+
+export let setup = ({ p, width, height }) => {
+
+};
+
+export let draw = ({ p }) => {
+    p.background(255, 0, 0);
+};
+
+export let rendering = "p5";

package/src/cli/templates/three-fragment.js

@@ -0,0 +1,53 @@
+import * as THREE from "three";
+import fragmentShader from "./fragment.fs";
+
+let camera;
+let uniforms = {
+    uResolution: { value: new THREE.Vector2() },
+    uTime: { value: 0 },
+};
+
+export let init = ({ scene, width, height }) => {
+    camera = new THREE.OrthographicCamera(1, 1, 1, 1, 1, 1000);
+
+    let geometry = new THREE.BufferGeometry();
+    geometry.setAttribute('position', new THREE.Float32BufferAttribute([-1, 3, 0, -1, -1, 0, 3, -1, 0], 3));
+    geometry.setAttribute('uv', new THREE.Float32BufferAttribute([0, 2, 0, 0, 2, 0], 2));
+
+    let mesh = new THREE.Mesh(geometry, new THREE.RawShaderMaterial({
+        vertexShader: `
+        attribute vec3 position;
+        attribute vec2 uv;
+
+        varying vec2 vUv;
+
+        void main() {
+            vUv = uv;
+            gl_Position = vec4(position, 1.);
+        }
+        `,
+        fragmentShader,
+        uniforms,
+    }));
+
+    scene.add(mesh);
+};
+
+export let update = ({ renderer, scene, time, deltaTime }) => {
+    uniforms.uTime.value = time;
+    renderer.render(scene, camera);
+};
+
+export let resize = ({ width, height }) => {
+    uniforms.uResolution.value.x = width;
+    uniforms.uResolution.value.y = height;
+
+    camera.left = -width * 0.5;
+    camera.right = width * 0.5;
+    camera.top = height * 0.5;
+    camera.bottom = -height * 0.5;
+
+    camera.updateProjectionMatrix();
+};
+
+export let rendering = "three";

package/src/cli/templates/three-orthographic.js

@@ -0,0 +1,23 @@
+import * as THREE from "three";
+
+let camera;
+
+export let init = ({ scene, width, height }) => {
+    camera = new THREE.OrthographicCamera(1, 1, 1, 1, 1, 1000);
+    camera.position.z = 1;
+};
+
+export let update = ({ renderer, scene, time, deltaTime }) => {
+    renderer.render(scene, camera);
+};
+
+export let resize = ({ width, height }) => {
+    camera.left = -width * 0.5;
+    camera.right = width * 0.5;
+    camera.top = height * 0.5;
+    camera.bottom = -height * 0.5;
+
+    camera.updateProjectionMatrix();
+};
+
+export let rendering = "three";

package/src/cli/templates/three-perspective.js

@@ -0,0 +1,20 @@
+import * as THREE from "three";
+
+let camera;
+
+export let init = ({ scene, width, height }) => {
+    camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
+    camera.position.z = 10;
+    camera.lookAt(new THREE.Vector3());
+};
+
+export let update = ({ renderer, scene, time, deltaTime }) => {
+    renderer.render(scene, camera);
+};
+
+export let resize = ({ width, height }) => {
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+};
+
+export let rendering = "three";

package/src/cli/ws.js

@@ -0,0 +1,92 @@
+import fs from "fs";
+import path from "path";
+import getPort from 'get-port';
+import log from "./log.js";
+import WebSocket, { WebSocketServer } from 'ws';
+import db from "./db.js";
+
+export async function start({
+    port = 1234,
+    cwd = "",
+} = {}) {
+    port = await getPort({ port });
+
+    let wss = new WebSocketServer({ port });
+
+    wss.on('connection', (socket) => {
+        socket.on('message', (message) => {
+            const json = JSON.parse(message);
+            const { event, data } = json;
+            
+            if (event === "save") {
+                const { key, value } = data;
+                db.save(key, value);
+            }
+
+            send(json, {
+                sender: socket
+            });
+        });
+
+        send({
+            event: 'start',
+            data: {
+                clientCount: wss.clients.size - 1,
+            },
+        }, {
+            include: socket
+        });
+
+        send({
+            event: 'client-connect',
+            data: {
+                clientCount: wss.clients.size - 1
+            }
+        }, {
+            exclude: socket,
+        });
+
+        socket.on('close', () => {
+            send({
+                event: 'client-disconnect',
+                data: {
+                    clientCount: wss.clients.size - 1
+                }
+            }, {
+                exclude: socket,
+            });
+        });
+    });
+
+    wss.on('error', (e) => {
+        if (e.code !== 'EADDRINUSE') {
+            console.error(`WebSocket server error:\n${e.stack || e.message}`);
+        }
+    });
+
+    function send(payload, { transform = true, exclude = null, include = null } = {}) {
+        const stringified = transform ? JSON.stringify(payload) : payload;
+
+        wss.clients.forEach((client) => {
+            if (client.readyState === WebSocket.OPEN && (client !== exclude || client === include)) {
+                client.send(stringified);
+            }
+        });
+    }
+
+    return {
+        port,
+        send,
+        close: () => {
+            return new Promise((resolve, reject) => {
+                wss.close((err) => {
+                    if (err) {
+                        reject(err)
+                    } else {
+                        resolve()
+                    }
+                });
+            });
+        }
+    };
+}

package/src/client/app/App.svelte

@@ -0,0 +1,8 @@
+<script>
+import Layout from "./ui/Layout.svelte";
+import Init from "./components/Init.svelte";
+import "./client";
+</script>
+
+<Init />
+<Layout />

package/src/client/app/client.js

@@ -0,0 +1,68 @@
+const socketProtocol = (location.protocol === 'https:' ? 'wss' : 'ws');
+const socketHost = `${location.hostname}:${__FRAGMENT_PORT__}`;
+
+let socket, listeners = {};
+
+function handleMessage(payload) {
+    const { event, data = {} } = payload;
+    const callbacks = listeners[event];
+
+    if (callbacks && callbacks.length) {
+        callbacks.forEach((cb) => cb(data));
+    }
+}
+
+function on(event, cb) {
+    if (!listeners[event]) {
+        listeners[event] = [];
+    }
+
+    listeners[event].push(cb);
+
+    return () => {
+        off(event, cb);
+    };
+}
+
+ function off(event, cb) {
+    const callbacks = listeners[event];
+
+    if (callbacks && callbacks.length) {
+        const filtered = callbacks.filter((callback) => callback !== cb);
+
+        listeners[event] = filtered;
+    }
+}
+
+let opened = false;
+function emit(event, data) {
+    if (opened) {
+        socket.send(JSON.stringify({
+            event,
+            data,
+        }));
+    }
+}
+
+if (import.meta.hot) {
+    console.log("[fragment] connecting...");
+
+    socket = new WebSocket(`${socketProtocol}://${socketHost}`);
+
+    socket.addEventListener('message', async (message) => {
+        const { data } = message;
+
+        handleMessage(JSON.parse(data));
+    });
+
+    socket.addEventListener("open", () => {
+        console.log("[fragment] connected.");
+        opened = true;
+    });
+
+    import.meta.hot.on('sketch-update', (data) => {
+        console.log(`[fragment] hmr update /${data.filepath}`);
+    })
+}
+
+export const client = { on, off, emit };

package/src/client/app/components/IconCross.svelte

@@ -0,0 +1,29 @@
+<div class="icon-cross">
+	<div class="icon-cross-side"></div>
+	<div class="icon-cross-side"></div>
+</div>
+
+<style>
+.icon-cross {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+.icon-cross-side {
+	--size: 10px;
+	position: absolute;
+	top: calc(50% - 1px);
+	left: calc(50% - var(--size) * 0.5);
+	width: var(--size);
+	height: 2px;
+
+	transform: rotate(45deg);
+
+	background-color: #551717;
+}
+
+.icon-cross-side:last-child {
+	transform: rotate(-45deg);
+}
+</style>

package/src/client/app/components/Init.svelte

@@ -0,0 +1,13 @@
+<script>
+import { assignSketchFiles } from "../triggers/shared.js";
+import { sketchesKeys } from "../stores/sketches.js";
+import "../utils/glslErrors.js";
+
+sketchesKeys.subscribe((keys) => {
+	if (keys.length > 0) {
+		assignSketchFiles(keys);
+	}
+})
+
+
+</script>

package/src/client/app/components/KeyBinding.svelte

@@ -0,0 +1,32 @@
+<script>
+import { createEventDispatcher, onDestroy, onMount } from "svelte";
+import { onKeyPress, onKeyDown, onKeyUp } from "../triggers";
+
+export let key;
+export let type = "press";
+
+const dispatch = createEventDispatcher();
+
+const triggers = {
+	"press": onKeyPress,
+	"down": onKeyDown,
+	"up": onKeyUp,
+};
+
+const triggerType = triggers[type];
+
+let trigger;
+
+onMount(() => {
+	trigger = triggerType(key, (event) => {
+		dispatch('trigger', event);
+	});
+})
+
+onDestroy(() => {
+	if (trigger) {
+		trigger.destroy();
+		trigger = null;
+	}
+});
+</script>

package/src/client/app/inputs/Input.js

@@ -0,0 +1,15 @@
+class Input {
+    constructor() {
+        this.enabled = true;
+    }
+
+    enable() {
+        this.enabled = true;
+    }
+
+    disable() {
+        this.enabled = false;
+    }
+}
+
+export default Input;

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

@@ -0,0 +1,21 @@
+import Input from "./Input";
+
+class Keyboard extends Input {
+
+    /**
+     * 
+     * @param {KeyboardEvent} event 
+     */
+    getStepFromEvent(event) {
+        if (event.shiftKey) {
+            return 10;
+        } else if (event.altKey) {
+            return 0.1;
+        }
+
+        return 1;
+    }
+
+}
+
+export default new Keyboard();

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

@@ -0,0 +1,144 @@
+import Input from "./Input";
+
+const commands = {
+	0x8: "noteoff",
+	0x9: "noteon",
+	0xB: "controlchange",
+};
+
+const notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+
+const LOCAL_STORAGE_KEY = "midi.requested";
+
+class MIDI extends Input {
+
+	constructor() {
+		super();
+
+		this.access = null;
+		this.requesting = false;
+		this.enabled = false;
+
+		this.listeners = new Map();
+		this.selectedInputID = null;
+		this.selectedOutputID = null;
+
+		if (localStorage.getItem(LOCAL_STORAGE_KEY)) {
+			this.request();
+		}
+	}
+
+	get inputs() {
+		return this.access ? this.access.inputs : new Map();
+	}
+
+	get outputs() {
+		return this.access ? this.access.outputs : new Map();
+	}
+
+	start() {
+		this.access.onstatechange = (event) => this.onStateChange(event);
+		this.attachListeners();
+
+		if (this.inputs.size === 1) {
+			const [entry] = this.inputs.values();
+			const { id } = entry; 
+
+			this.selectedInputID = id;
+		}
+
+		if (this.outputs.size === 1) {
+			const [entry] = this.outputs.values();
+			const { id } = entry; 
+
+			this.selectedOutputID = id;
+		}
+	}
+
+	attachListeners() {
+		this.inputs.forEach(entry => {
+			entry.onmidimessage = (event) => {
+				this.onMessage(event);
+			};
+		})
+	}
+
+	addEventListener(eventName, fn) {
+		if (!this.listeners.has(eventName)) {
+			this.listeners.set(eventName, []);
+		}
+
+		this.listeners.set(eventName, [...this.listeners.get(eventName), fn]);
+	}
+
+	onMessage(event) {
+		let command = event.data[0] >> 4;
+		let type = commands[command];
+
+		let channel = (event.data[0] & 0xf) + 1;
+    	let data1 = event.data[1]
+		let data2 = event.data[2];
+
+		let note = {
+			number: data1,
+			name: notes[data1 % 12],
+		};
+		
+		let velocity = data2 / 127;
+		let rawVelocity = data2;
+
+		let controller = event.target;
+
+		let data = {
+			type,
+			note,
+			channel,
+			velocity,
+			rawVelocity,
+			value: velocity,
+			rawValue: rawVelocity,
+			currentTarget: controller,
+			target: controller,
+			srcElement: controller,
+		};
+
+		this.emit('message', data);
+		this.emit(type, data);
+	}
+
+	onStateChange(e) {
+		const event = e.port.state;
+
+		this.emit(event, e);
+		this.attachListeners();
+	}
+
+	emit(eventName, data) {
+		if (this.listeners.has(eventName)) {
+			const listeners = this.listeners.get(eventName);
+
+			listeners.forEach(listener => listener(data));
+		}
+	}
+
+	handleError(error) {
+		console.error(error);
+	}
+
+	async request() {
+		try {
+			if (!this.requesting && !this.access) {
+				localStorage.setItem(LOCAL_STORAGE_KEY, true);
+				this.requesting = true;
+				this.access = await navigator.requestMIDIAccess();
+				this.enabled = true;
+				this.requesting = false;
+				this.start();
+			}
+		} catch(error) {
+			this.handleError(error);
+		}
+	}
+}
+
+export default new MIDI();

package/src/client/app/inputs/Mouse.js

@@ -0,0 +1,5 @@
+import Input from "./Input";
+
+class Mouse extends Input {}
+
+export default new Mouse();

package/src/client/app/inputs/Webcam.js

@@ -0,0 +1,98 @@
+import Input from "./Input";
+
+class Webcam extends Input {
+
+    constructor() {
+        super();
+
+        this._useCanvas = false;
+        this.stream = null;
+        this.requested = false;
+
+        this.video = document.createElement('video');
+        this.canvas = document.createElement('canvas');
+        this.context = null;
+    }
+    
+    /**
+    @param {Boolean} value
+     */
+    set useCanvas(value) {
+        const prev = this.useCanvas;
+
+        this._useCanvas = value;
+
+        if (!prev && this._useCanvas) {
+            this.prepareCanvas();
+        } else if (prev && this._useCanvas) {
+            cancelAnimationFrame(this._raf);
+            this._raf = null;
+        }
+    }
+
+    get useCanvas() {
+        return this._useCanvas;
+    }
+
+    enable() {
+        if (!this.requested) {
+            this.request();
+        }
+    }
+
+    disable() {
+        this.enabled = false;
+
+        if (this.stream) {
+            if (this.useCanvas && this._raf) {
+                cancelAnimationFrame(this._raf);
+                this._raf = null;
+            }
+
+            this.stream.getTracks().forEach(track => {
+                track.stop()
+            });
+
+            this.stream = null;
+        }
+    }
+
+    prepareCanvas() {
+        this.canvas.width = video.videoWidth;
+        this.canvas.height = video.videoHeight;
+
+        this.context = this.canvas.getContext("2d");
+    }
+
+    drawToCanvas() {
+        this.context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+        this._raf = requestAnimationFrame(() => {
+            this.drawToCanvas()
+        });
+    }
+
+    async request() {
+        try {
+            this.stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+            this.requested = true;
+            this.enabled = true;
+
+            this.video.addEventListener('canplay', () => {
+                this.prepareCanvas();
+
+                if (this.useCanvas) {
+                    this.drawToCanvas();
+                }
+            });
+            this.video.srcObject = this.stream;
+            this.video.play();
+        } catch(error) {
+            console.error(`Error while trying to access webcam.`);
+            console.log(error);
+        }
+    }
+
+}
+
+export default new Webcam();