rstream-dataflow

import { Atom, defAtom } from 'https://esm.run/@thi.ng/atom'; import { fromRAF } from 'https://esm.run@thi.ng/rstream'; import { initGraph, mul, node1 } from 'https://esm.run/@thi.ng/rstream-graph'; import { map } from 'https://esm.run/@thi.ng/transducers';

// atom for storing dataflow results (optional, here only for // debugging/stringifying graph state) const db = defAtom({});

// RequestAnimationFrame based stream const raf = fromRAF(); // Define the dataflow graph const graph = initGraph(db, { // Node to transform RAF stream into a sine wave sine: { fn: node1(map((x) => 0.8 + 0.2 * Math.sin(x * 0.05))), ins: { src: { stream: () => raf } }, outs: { "*": "sin" }, }, // Node to multiply sine wave with constant value mul: { fn: mul, ins: { a: { stream: "/sine/node" }, b: { const: 10 }, // Use a constant value }, outs: { "*": "result" }, }, }); // Start the hdom update loop // Display the current state of the Atom start(() => [ "div", [ "pre.absolute.top-1.left-1.pa0.ma0.z-2.f7", JSON.stringify(db.deref(), null, 2), ], ]); // Log the graph's DOT representation console.log(toDot(walk([raf])));

# Application Frame

//wiki.ralfbarkow.ch/assets/pages/snippet-template/esm.html