sebpiq/webpd

Run your Pure Data patches on the web.

WebPd is a compiler for the Pure Data audio programming language allowing to run .pd patches in web pages.

WebPd is highly modular and takes a white-box approach to audio programming. It converts the audio graph and processing objects from a patch into plain human-readable JavaScript or AssemblyScript (*). The pure audio generated code can be then integrated directly in any web application without using WebPd or Pure Data ever again 🌈.

(*) AssemblyScript is a TypeScript-style language which compiles to WebAssembly.

Usecase examples

• Publish generative musical works on the web
• Execute, tweak and share patches collectively on any machine
• Produce, filter and playback sound and music data in realtime from web based applications and games

Integration and scope

There are plenty of good JavaScript libraries to build interactive visual interfaces such as Three.js, p5.js, good old JavaScript / HTML / CSS, etc. Integrating them with a WebPd patch should be fairly easy. An example of such integration is the patch player demo, available through the web compiler.

WebPd is not, in itself, a complete editor and a live performance platform like Pure Data. The Pure Data graphical interface, as well as GEM, are out of the scope of WebPd. WebPd isn't either a simple executor like libpd. It is rather a lean audio compiler, which generates high-performance, human-readable and easily integrable audio code with no bloat.

Usage

Web compiler and player

The web compiler and a patch player are live at the following address: https://sebpiq.github.io/WebPd_website

Just upload or give a URL(*) of a patch, compile it just in time and generate an interface allowing to play that patch in realtime in your browser. Once the compilation succeeds, you can copy and share with others the resulting URL from the player(**). This URL contains all the modified parameters of the patch you have played with, so that it is shared completely in its current state.

(*)You can use any public URL of a patch found in the wild (on github, Pure Data forums, etc.).

(**)Sharing a compiled patch doesn't work if you used local files for compilation.

Command line interface

NOTE : Running the CLI requires node.js version 18 or higher.

The command-line interface (CLI) offers more customization options, including the ability to generate a fully-functional (but bare bones) web page embedding your patch.

Open a terminal and install the CLI with node / npm by running the following command:

npm install -g webpd

Verify that installation worked by running:

webpd --help

This should output help for the CLI and will hopefully get you started.

Getting help

If you feel stuck, there's plenty of places where you can ask for help. I recommend in particular the discord server where you can get help quickly and find support from the community.

If you feel you might have stumbled upon a bug, please report it following these simple guidelines.

You are using WebPd?

Great 🌱 ! It helps a lot with motivation to hear that people are using it. Don't hesitate to let me know by pinging me on twitter @sebpiq, or writing me directly by email.

If you can afford it, you can also donate to help move development forward.

Development

Status & roadmap

WebPd is currently under heavy development, but it is still a work in progress. A list of implemented objects, features and the roadmap are here.

The project is currently in alpha release state which means that many of your patches will not work out of the box. Many objects and features are indeed still missing. If you feel there is a bug, thanks for reporting it following these simple guidelines. If you feel you could develop an object that is missing in WebPd to play a specific patch, see contributing.

Reporting a bug

If you wish to report a bug:

• First narrow it down. Remove all objects in your patch that are not related with the bug. Try to find the simplest patch with which this bug can be reproduced.
• Then submit a bug report in github with the following template :

Patch and description -> Upload your minimal patch

Current behavior -> Describe shortly how it is working at the moment

Expected behavior -> Describe shortly how it should work instead

Contributing

One-time contributions or regular work on the library are more than welcome! Contribution guidelines are coming, meanwhile if you have time and would really like to get involved please get in touch on the issue tracker on GitHub. I would be pleased to help you getting started for contributing.

In case you would like to try developping a new object, here are some good examples to start with:

• clip.ts
• clip~.ts

If you want to dig deeper into the code, WebPd is built in several sub-packages in addition to this one which combines them all :

• Pd file parser : https://github.com/sebpiq/WebPd_pd-parser
• WebPd compiler : https://github.com/sebpiq/WebPd_compiler
• WebPd runtime : https://github.com/sebpiq/WebPd_runtime

License

WebPd is free software: you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License version 3 as published by the Free Software Foundation.

WebPd is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License or read the COPYING.LESSER file for more details.

Authors

• Sébastien Piquemal [email protected]
• Chris McCormick
• Brandon James
• mgsx-dev
• Atul Varma
• Ulric Wilfred
• Paul Money

Acknowledgment and sponsors

This project has been sponsored by the DAFNE+ european research project funded by the European Union within the "Horizon Europe" program (Grant Agreement 101061548) and IRCAM within the WAM team from december 2022 to march 2023.

webpd's Issues

[tabread4~] for sample fun

Abbreviations

Implement abbreviations for objects names, and bang/float/symbol/... arguments.

Connecting objects in GUI is a bit flaky

Sometimes / on some browsers it works, sometimes it just doesn't.

Driver for Node.js

For building desktop applications with WebPd.

[lop~] and [hip~] take message in dsp inlet

That's ugly, but that's how it is ...

Using webpd with require.js

Hello,
I'm stuck in using webpd with require.js. So far I do a simple and not working :

require.config({
    // modules paths
    baseUrl: 'scripts/modules',
    // vendor lib paths
    paths: {
        webpd: '../vendor/webpd/index'
    }
});

// start the main app logic.
require(['webpd'],
function(Pd) {
    console.log(Pd);
}

(The file index is actually webpd, i'm using twitter bower to deal with my dependencies, and if I include this file in the header of my html page, it's working).

I think I need to configure a require.js shim config (http://requirejs.org/docs/api.html#config-shim) for webpd, but I don't know how.

Any idea?

Regards,

Xavier

Automate tests and builds

Maybe setup a CI server somewhere ?

Link to roadmap, changelog

Link to roadmap in README. Write a changelog.

[osc~] and [phasor~] phase reset

problem with patch.send

Hi,

I am having some problems after including the patch.send on my processing sketch. If I upload it without the patch.send it works fine.... Any idea why?

thank you, Andre

PImage fig;
int raio= 60;
PVector location0;
PVector location1;
PVector location2;
PVector location3;
PVector location4;
PVector location5;
float x0 = 0;
float y0 = 0;
float x1 = 0;
float y1 = 0;
float x2 = 0;
float y2 = 0;
float x3 = 0;
float y3 = 0;
float x4 = 0;
float y4 = 0;
float x5 = 0;
float y5 = 0;

void setup(){

size(1024,768);
fig = loadImage("darkhousen.png");
location0 = new PVector(random(1024),random(768));
location1 = new PVector(random(1024),random(768));
location2 = new PVector(random(1024),random(768));
location3 = new PVector(random(1024),random(768));
location4 = new PVector(random(1024),random(768));
location5 = new PVector(random(1024),random(768));
smooth();
imageMode(CENTER);

}

void draw(){
background(0);
image(fig, width/2,height/2);

if( mousePressed){
if(sq(mouseX-location0.x)+sq(mouseY-location0.y)<=sq(raio)){
location0.x = mouseX;
location0.y = mouseY;

  }

}
if( mousePressed){
if(sq(mouseX-location1.x)+sq(mouseY-location1.y)<=sq(raio)){
location1.x = mouseX;
location1.y = mouseY;

  }

}
if( mousePressed){
if(sq(mouseX-location2.x)+sq(mouseY-location2.y)<=sq(raio)){
location2.x = mouseX;
location2.y = mouseY;

  }

}
if( mousePressed){
if(sq(mouseX-location3.x)+sq(mouseY-location3.y)<=sq(raio)){
location3.x = mouseX;
location3.y = mouseY;

  }

}
if( mousePressed){
if(sq(mouseX-location4.x)+sq(mouseY-location4.y)<=sq(raio)){
location4.x = mouseX;
location4.y = mouseY;

  }

}
if( mousePressed){
if(sq(mouseX-location5.x)+sq(mouseY-location5.y)<=sq(raio)){
location5.x = mouseX;
location5.y = mouseY;

  }

}

if(location0.x == location1.x && location0.y == location1.y){

location0.x =random(1024);
location1.x =random(1024);
location2.x =random(1024);
location3.x =random(1024);
location4.x =random(1024);
location5.x =random(1024);
location0.y =random(768);
location1.y =random(768);
location2.y =random(768);
location3.y =random(768);
location4.y =random(768);
location5.y =random(768);

}

x0 = location0.x;
patch.send("loc0x", x0);
y0 = location0.y;
patch.send("loc0y", y0);
x1 = location1.x;
patch.send("loc1x", x1);
y1 = location1.y;
patch.send("loc1y", y1);
x2 = location2.x;
patch.send("loc2x", x2);
y2 = location2.y;
patch.send("loc2y", y2);
x3 = location3.x;
patch.send("loc3x", x3);
y3 = location3.y;
patch.send("loc3y", y3);
x4 = location4.x;
patch.send("loc4x", x4);
y4 = location4.y;
patch.send("loc4y", y4);
x5 = location5.x;
patch.send("loc5x", x5);
y5 = location5.y;
patch.send("loc5y", y5);

fill(200);
ellipse(location0.x,location0.y,15,15);
ellipse(location1.x,location1.y,15,15);
ellipse(location2.x,location2.y,15,15);
ellipse(location3.x,location3.y,15,15);
ellipse(location4.x,location4.y,15,15);
ellipse(location5.x,location5.y,15,15);

}

set $1 message

Hi, I'm trying to replicate expr 1-$1 object and using set $1 message to achieve this. But I get ths error:
Uncaught TypeError: Cannot call method 'i' of null

I guess set message is not working. Is this a bug? is it reported somewhere?
thanks
Luca

[line~] ramp up ramp down in one message

in PD you can have two ramps in one message for line~.
For example of line~ receives "1 0, 0 100" will go to 1 immediately and ramp down to 0 in 100ms.
line~ in WebPd requires two separate messages.

[count] object, for sequencing

i think it would be really useful to have count object. for sequencing and scheduling.
now timing is the most complicated thing in web audio.

demos/simple-gui/simple-gui.html canvas clipped

fix: demos/simple-gui/simple-gui.html the svg#canvas needs 'width:100%' and 'height:100%'

otherwise it won't render everything (at least in chrome Version 39.0.2171.71 (64-bit))

data delay between processing and pd

basing on your Storm processing example I'm trying to make something similar. Right now delay time of a bang from processing to pd is like 500ms. There is a way to improve it? I did something wrong? Does is it a pd.js issue?
thanks a lot
Luca

[adc~] ... for fun with the mic

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

export patches

Right now, there is functionality for importing patches but not exporting.

No audio sink available

Hi,

I'm getting the "No audio sink available" error when opening my WebPd project in Firefox 28.0. It works fine in Chrome and Safari. What could be causing this and how could I fix it?

Better metro and time scheduling in general

Right now metro is not very tight. This applies to timing in general. This is probably due to the ugly hack used to schedule things in the future by using a global futureTime. The time at which a message must be executed should probably be embedded in the message itself. For example :

var Message = function(value, time) {
    this.value = value
    this.time = time
}

[vline~] because it's so much simpler than [line~]

No audio sink solved... but now ios is not working anymore.

thanks a lot, firefox is supported now. But how may come now ios safari is not working anymore? with the previous version it was, even in ios 8, although you had to clean browser history before reloading a page, but now it doesn´t any more. anybody can confirm this?

Write the code with support for asm.js in mind

Take a look, how it works exactly

[phasor~]

Abstractions

Implement support for abstractions

New build system

Probably using Grunt.

Slash in front of dollar vars should be removed

PD saves dollar vars with a slash in front. When parsing a patch file, this has to be removed

Find a JavaScript implementation of node's `util.inherits`

To remove some of the code in main.js + make it node compatible

[hip~] and [lop~]

Chris had implemented them, it is still available here : https://github.com/sebpiq/WebPd/blob/master/src/objects.old.js#L565
shouldn't take too much time to port those.

delwrite/delread is not very precise

It works fine for big delays, but for delays of a few milliseconds, there's something wrong. For exampe, with the demo no-input : https://www.dropbox.com/sh/bv12fwtjemgwspm/Nx-UgL_tBx/no-input impossible to have the exact same result as in Pd.

Test coverage

Add test coverage to build process

Change Events mixin to node.js compatible EventEmitter

good candidate : https://github.com/hij1nx/EventEmitter2

Object search box in simple GUI

Search box on the top of the list of objects. Filters the list of objects as you type.

implement [adc~]

Compile dspTick methods

Right now, all dspTick functions redefine all variables they need at each tick, example :

        dspTickConstant: function() {
            var inBuff1 = this.inlets[0].getBuffer(),
                outBuff = this.outlets[0].getBuffer(),
                val = this.val, i, length;

            for (i = 0, length = outBuff.length; i < length; i++) {
                outBuff[i] = inBuff1[i] - val;
            }
        }

Patch output to Web Audio API Audio Node input.

Is there any way to connect the output from the patch and connect to an Audio Node instead of connecting directly to destination?
It would be nice to have this feature specially to use the convolver node and scriptprocessor node.

Fix build in Travis

1. Travis build is failing because linting is too restrictive. All sane lint errors have been corrected, the ones that are left are made on purpose : find a way to tell lint to ignore those !

2. test for [noise~] is failing 1:2 times. Find a better test.

Handle GUI elements when parsing patch file

At least increment the object's id when an element couldn't be created, otherwise there'll just be a whole in ids and connections as written in the patch file are wrong.

I'm not listening any webpd demo/example

I use Windows 8 and chrome's last version (also in Firefox), but i'm not listening any WebPd demo or my own examples.

I'm getting this error from chrome's console: Uncaught [object Object] webpd-0.2.2.min.js:1

Why it's happening? I don't find any issue in internet with that...

Subpatches

Implement support for subpatches.

[delread~] and [delwrite~]

API methods to register abstraction and load patch from an url

It should be possible to use abstractions without having to explicitly declare them.

Code review, JSLint

There's quite a bit of legacy stuff in the code which could be optimized or just removed. Also JSLint the whole project before it's too late.

Better management for named objects in patch

Named objects are not managed so well right now : send, receive, arrays, etc ... with send/receive it can cause bugs w/ dynamic patching. This needs to be thought through and redesigned.

Cross-origin requests for soundfiler

The soundfiler should be able to get any resources from the Internet (e.g. SoundCloud) providing the server implements CORS.

Benchmark to help optimization

Do some dsp intensive stuff with different objects measure time, and evaluate optimizations.

Licensing issues

Find out about what's wrong, what's right when using MIT-licensed libs like sink.js or eventemitter2.js What's needed ? Should I include their licenses as well ? Can I distribute under BSD ?

Panning in simple GUI

With bigger patches it is a pain in the s to debug, cause you cannot pan currently.

Bug with +~ (and probably other dsp arithm)

When dsp connected to left inlet and message to right inlet works, but the other way around doesn't.

Demo on using Processing.js

Make a simple demo with Processing.js

DSP object should be able to break dsp calculation

That's an idea for optimization. For example if [*~] has a value of 0, no need calculating upstream.