Arduino sensor example fixes for newish click-to-play Audio API rules

[jywarren]

Oof, while #166 was just merged, I had to make some changes since then to this to get it to work with the new Web Audio API click-to-play permissions.

(Refs; publiclab/webjack#88, processing/p5.js-sound#322)

I wrapped it in some extra code, which is not super simple:

https://github.com/jywarren/p5js-webjack-sensor/blob/90de143c93fc501b1ad50a4cd18b370edd2fd71a/webjack-p5-wrapper.js#L1-L16

The resulting receiveSensorData(fn) method is not bad though, as in this sketch:

https://editor.p5js.org/jywarren/sketches/rkztwSt8M

function setup() { 
  createCanvas(800, 800);
  noStroke();
  fill('#ff00aa');

  receiveSensorData(function draw(data) {

    console.log(data); // output the values to log
    // data[0] is the 1st value, data[1] 2nd, etc.

    // draw stuff! Browse http://p5js.org/reference/
    background('#ddd');
    ellipse(200, 200, data[0]+10, data[0]+10);

  });
}

@catarak @lmccart (or anyone else who has input i guess?) what would be the best p5js-y way to fix this?

I'm 💯 game to contribribute a fix, but should I make the receiveSensorData() method includable via a script element, or maybe pre-concatenate a version of WebJack that has that method included, specifically for p5js usage? (we already require including the basic webjack.js, so that'd minimally increase complexity)

And, how does this syntax look? Passing a function to this new receiveSensorData(fn) function looks roughly similar to writing a draw() method but it's a little weird that it's within the setup() function.

And there's the slight weirdness that in receiveSensorData() i'm running parseFloat on everything because it's returning string values (but I could probably solve this in follow-up by better recognizing and parsing numbers vs. non-numeric chars, and release a new version of receiveSensorData)

Anyways, happy to help, and if the above looks good I'll submit a PR to a new version which has receiveSensorData()!

[limzykenneth]

I'm 💯 game to contribribute a fix, but should I make the receiveSensorData() method includable via a script element, or maybe pre-concatenate a version of WebJack that has that method included, specifically for p5js usage? (we already require including the basic webjack.js, so that'd minimally increase complexity)

It depends on whether this function would be useful for other users of webjack. If it does provide them with some usability improvements by removing boilerplate that they need to write, it would make sense for you to include in the webjack library itself.

And, how does this syntax look? Passing a function to this new receiveSensorData(fn) function looks roughly similar to writing a draw() method but it's a little weird that it's within the setup() function.

The callback pattern you are using now is naming the callback inline with the name draw, it is not strictly necessary although useful for debugging (but then not if you named it draw since it conflicts with p5's own draw function). I would suggest refactoring out the function, something like so:

function setup() { 
  createCanvas(800, 800);
  noStroke();
  fill('#ff00aa');

  receiveSensorData(handleData);
}

function handleData(data) {

  console.log(data); // output the values to log
  // data[0] is the 1st value, data[1] 2nd, etc.

  // draw stuff! Browse http://p5js.org/reference/
  background('#ddd');
  ellipse(200, 200, data[0]+10, data[0]+10);

}

It feels more evented that way (feels like mousePressed() etc).

[catarak]

Another option would be to create a p5 library for WebJack, which could include receiveSensorData.

[jywarren]

Yes, i was thinking of providing a wrapper library, as opposed to including a p5js-specific function within Webjack -- that sounds like a great way forward. And, I love the idea of breaking out the receiveSensorData() function lower in the script, instead of providing it inline -- it certainly does look more like how the 'draw()' method is used. Thanks for the input! I can open a PR with this, then.

…

On Wed, May 1, 2019 at 1:30 PM Cassie Tarakajian ***@***.***> wrote: Another option would be to create a p5 library for WebJack, which could include receiveSensorData. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <processing/p5.js-website#463 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAAF6J5BFFVSAQ57U4Y2Z2LPTHHQ7ANCNFSM4HJDY4QQ> .

[jywarren]

Work in progress at processing/p5.js-website#464 🎉