Flux

A node-based 3D visuals editor in the browser, in the Sverchok style, made to move with music (and later with Wax).

Live: https://zeffii.github.io/flux/

Wires carry either lists of numbers (orange) or geometry (blue: vertices, edges and faces). Short lists repeat to match long ones, so one value or one per vertex both work. Every input is also a parameter: leave it unlinked and drag its slider.

Nodes: sources (number, time, range, noise), generators (grid, circle, arc, line), solids (box, cylinder, pyramid, torus, uv sphere, icosphere, platonic), surfaces (surface, metaballs, skin), modifiers (transform, array, join, lift, edit), math (math, vector) and view. Each view node chooses its colour and whether faces show flat, smooth or as a glow.

Script node

Plain JS; the comment header declares the sockets and the body writes into the outputs, which already exist when it runs.

// petal ring
// in  n_petals       8    int 1..64
// in  vp_petal       10   int 2..64
// in  profile_radius 2.3  0..10
// in  amp            1    -4..4
// in  origin         geo
// out verts          geo

const N = n_petals * vp_petal, [ox, oy, oz] = origin.first ?? [0, 0, 0]
verts.loop(range(N).map(i => {
  const a = i / N * TAU, r = profile_radius + amp * cos(n_petals * a)
  return [ox + cos(a) * r, oy + sin(a) * r, oz]
}))

• in name default [int] [lo..hi]: a number slider; a range is hard (values are clamped even when linked). in name list: the whole list. in name geo, or >in name geo to wait until it's linked.
• out name geo: write with .point(p), .edge(a, b), .line(pts), .loop(pts), .face(...pts) (points or indices), .add(geo), or assign mesh(verts, edges, faces). out name list: an array to push to.
• Geo inputs offer .points, .edges, .faces, .count, .first, and iterate as points.
• In scope: maths functions, PI, TAU, range, zip, lerp, clamp, fract, rand(i, seed), noise(x, seed), mesh, time, print, and state (kept between runs until the code changes).

Hand editing

Put an edit node on a geo wire and select it: its vertices become pickable in the 3D view. Moved vertices are kept as offsets, so they follow when the shape upstream changes; P pins vertices at an absolute place, cut loose from upstream. amount blends between the upstream and edited shapes.

3D view, edit node selected
click / Shift+click	pick vertices
B, then drag	box select (Ctrl on release removes)
A / Alt+A	all or none / none
G R S	move, rotate, scale; then X Y Z to constrain, digits for an exact value, click or Enter to keep, Esc to cancel
P	pin / unpin
Alt+G	forget the edits on the selection

Keys

Editor
Tab / right-click	add a node
drag a slider	change it (Shift: fine), double-click to type
X / Delete	delete selected
Ctrl+D	duplicate
Ctrl+Z / Ctrl+Shift+Z	undo / redo
F	fit the graph
Space	play / pause
Ctrl+S	save a .flux file

In the 3D view: drag to orbit, Shift or right-drag to pan, wheel to zoom, double-click to recentre.

Working on it

npm test     # smoke tests for the graph and every node
npm start    # http://localhost:8080

No build step: index.html loads src/main.js as an ES module. Each push to master runs the tests and publishes to GitHub Pages.

The earlier Flux (numpy nodes for Blender) is in the git history before this rewrite.