← all demos

Vectors & pads

Two controls for values that come in more than one number. addVector is a row of number boxes over one array signal — as many as the value has, so the same call makes a vec2 or a vec4. addPad drags an [x, y] around a square.

The signals

The panel

panel.js

        

        

          Try: drag the pad and let go with the pointer outside it — the drag
          keeps going, because the pad captures the pointer rather than listening on the window.
          Tab to it and use the arrows, with shift for ten steps at a time. Drag an axis box sideways to count it up
          and down — shift for ten steps a pixel — or click it once to type. Editing one axis of
          Rotation leaves the other two where they are. Click any control's
          label to reroll just that one.