RPD — Reactive Patch Development

v2.0.0

Getting Your Version of RPD

Download

RPD with default options can be downloaded here:

You'll also need Kefir.js, since RPD code is based on Reactive Streams, which it provides.

But default options restrict your choice, while RPD provides truly a lot more. See Compilation section below for details. And you are surely safe to transfer your network code to use it with other options, if you already have one, the only requirement could be is to change few string values.

Setup

To use either downloaded or compiled version of RPD, you need to include three files in a page head:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <!-- Compiled CSS file, it includes rendering and style-dependent
             rules (both Renderer and Style selected at compilation stage are
             listed in the top lines of this file) -->
        <link rel="stylesheet"
              href="http://rawgit.com/shamansir/rpd/gh-pages/dist/v2.0.0/rpd-html.css">
        </link>

        <!-- Kefir.js library -->
        <script src="http://rawgit.com/rpominov/kefir/gh-pages/dist/kefir.min.js"></script>

        <!-- RPD Library, compiled with the options you specified (all these
             options are listed in the first lines of this file, so you may
             distinguish `rpd.js` compiled with different options even while it
             has the same name for all the versions) -->
        <script src="http://rawgit.com/shamansir/rpd/gh-pages/dist/v2.0.0/rpd-html.min.js"></script>

    </head>
    <body>
        <!-- ... -->
    </body>
</html>

Here, remote files are named rpd-html, but in majority of cases I personally use rpd.css and rpd.js respectively. All the compilation preferences are listed in the comments sections, in both files, including the commands used to build them, so it is always easy to get what is included just by looking inside.

For the local version, paths would be ./dist/rpd.css, ./vendor/kefir.min.js and ./dist/rpd.min.js respectively. ​ To test if it works and see it in action, add the target div to the body and some code to the bottom of the page:

<body style="margin: 0;">
    <div id="target"></div>

    <script>
        Rpd.renderNext('html', document.getElementById('target'),
                       { style: 'quartz' });

        var root = Rpd.addPatch('root').resizeCanvas(800, 400);

        var metro1 = root.addNode('util/metro', 'Metro A').move(40, 20);
        var metro2 = root.addNode('util/metro', 'Metro B').move(40, 120);

        var genA = root.addNode('util/random', 'Generate A').move(300, 10);
        var genB = root.addNode('util/random', 'Generate B').move(300, 160);

        var sum = root.addNode('util/+', 'Sum').move(520, 80);

        genA.outlets['random'].connect(sum.inlets['a']);
        genB.outlets['random'].connect(sum.inlets['b']);

        metro1.outlets['bang'].connect(genA.inlets['bang']);
        metro2.outlets['bang'].connect(genB.inlets['bang']);
    </script>
</body>

Detailed instructions on constructing your own Patch Network you may find in the Network section.

Compilation

To compile RPD with custom options, you need to get the latest clone of RPD github repository and have npm installed. When compiled, RPD only uses Kefir.js, but for building you need few tools installed, however it should be quite easy to get them all:

$ cd ~/Workspace
$ git clone ...
$ cd ./rpd
$ npm install -g gulp
$ npm install
$ gulp get-deps
$ gulp

If every command, and especially the last one, was successful, you'll see it created dist/rpd.min.js and dist/rpd.css. So you've built a version with default options and now you are on the right way. Then, you'll only need to run gulp (with specific flags listed below, if you are not satisfied with default options).

To be able to view examples from ./examples directory, you also need to call this command once:

$ gulp get-dev-deps

Compilation Options

Foremost, it should be noted that you may get the complete list of possible commands and options with calling:

$ gulp help

There are a lot more options and commands than I describe here, but in contrast with this literary text, gulp help provides you with far more bureaucratic style. ​ Now it's time to use all the powers and to configure your preferences:

For example, to compile RPD with SVG renderer (instead of default HTML), plain style (instead of default quartz style), include timbre and anm toolkits, plus add JSON Import/Export, you need to call:

$ gulp --renderer svg --toolkit anm --toolkit timbre --style plain --io json

Or, in short format:

$ gulp -r svg -t anm -t timbre -s plain -x json

The order in which options were specified is completely not important.

NB: Please be aware that, as noted above, some styles or toolkits work only with particular renderers.

Both gulp build (defaults to gulp) and gulp build-with-gzip report the resulting file size, since options may affect it in different directions and it could be meaningful for you.

Also, you may select the name of the output file with --target-name or -o option.

I recommend you to visit the examples page, there you may find several examples for different combinations of styles and renderers used to compile the same patch.

More details on building Patch Networks by yourself, you may find on the corresponding page.

Styles and Renderers

Style HTML SVG Horz./Vert. Notes
quartz ✔ ✔ Vertical Basic, grotesque style, even though based on Quartz Composer look
pd ✔ ✔ Horizontal Nice-looking sandy-colored style with no headers, but a drag handle on the left side of the node
plain ✔ ✔ Horizontal Minimal style with simple shapes, few contrast colors and no shadows
compact ✔ ✔ Horizontal Nodes made as tiny as possible, small fonts, navy feel; unlike pd Style, has vertical headers on the left side of the Node
compact-v ✘ ✔ Vertical Same as compact, but vertical variant and has headers
black-white ✘ ✔ Vertical Black and White style looking like some schema from an 80's computer book
blender ✘ ✔ Vertical Style, almost completely looking like Blender Material Editor
webpd ✘ ✔ Horizontal Used to render PureData Nodes with the help of WebPd

Toolkits and Renderers

Toolkit HTML SVG Notes
core ✔ ✔ Only core/basic Node type and core/any Channel type; always included, no option needed
util ✔ ✔ Utility Nodes: numbers, colors, random generators, everything useful but not obligatory
timbre ✔ ✔ Nodes intended to help user generate sound with timbre.js in future, but has only five basic nodes for the moment
webpd ✔ ✔ The project with a plan to implement complete PureData toolkit, but for the web, with the help of WebPd library
anm ✔ ✔ Demonstrates the ability to generate graphics with Animatron Player, includes Spreads logic like the ones VVVV has
[processing] ✘ ✔ Used only in examples, has some Node types to demonstrate how to work with P5.js

Modules

[ In Progress ]
↑