Using p5.js in HYPE?

Using JavaScript with Hype
1

Hi-
I’d like to include the external javascript p5 with my Hype project. I’d like to include their add on libraries p5.sound

Can I include these libraries in my resources and then have Hype elements trigger their javascript functions that would play oscillators etc? How would I format the javascript?

Thank you!
Matt

2

Hi Matt:

You can reference any JS in the ‘head’ of your document simply dragging it into your resource library. (Or loaded via their CDN). You can edit the contents of the … of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector.

Any element added to Hype thereafter can access any of the functions within the JavaScript library. So you could trigger a JS function on click for an element, for example.

You shouldn’t need to deviate too far from P5’s instructions. Just know that you won’t need to include any ‘script’ tags when creating a function built into Hype. Those are already in place.

Our JavaScript docs might give you some additional ideas to take this further:

If anyone has more detailed knowledge about working with p5 please chime in.

3

Daniel, The link is broken.

Corrected here, I think.

http://tumult.com/hype/documentation/javascript

1 Like
4

Thanks @Daniel !

I've begun to try and do just what you've described but haven't had any luck. I have the libraries referenced in the head.

I mostly want to have an element when clicked play a sound from an oscillator like this example

I tried copying in just this part of the code into a javascript function in HYPE:

var notes = [ 60, 62, 64, 65, 67, 69, 71];
// For automatically playing the song
var index = 0;
var song = [
{ note: 4, duration: 400, display: "D" },
{ note: 0, duration: 200, display: "G" },
{ note: 1, duration: 200, display: "A" },
{ note: 2, duration: 200, display: "B" },
{ note: 3, duration: 200, display: "C" },
{ note: 4, duration: 400, display: "D" },
{ note: 0, duration: 400, display: "G" },
{ note: 0, duration: 400, display: "G" }
];
var trigger = 0;
var autoplay = false;
var osc;

// A triangle oscillator
osc = new p5.TriOsc();
// Start silent
osc.start();
osc.amp(0);
function playNote(note, duration) {
osc.freq(midiToFreq(note));
// Fade it in
osc.fade(0.5,0.2);

// If we sest a duration, fade it out
if (duration) {
setTimeout(function() {
osc.fade(0,0.2);
}, duration-50);
}
// When we click
function mousePressed() {
// Map mouse to the key index
var key = floor(map(mouseX, 0, width, 0, notes.length));
playNote(notes[key]);
}

// Fade it out when we release
function mouseReleased() {
osc.fade(0,0.5);
}

5

It could be copying and pasting, but that code doesn’t look like it would work (syntax errors).

I’ve made a little example showing how to play a sound with a p5 oscillator:

p5oscillator.hype.zip (12.0 KB)

Hope that helps!

1 Like
6

Thank you Jonathan! This is SO helpful! Kind of related to my other post, I'm going to try and trigger the oscillator with key pressing as well as key click. Do you think that once I figure out the correct Javascript code I could place this in "On Key Down" and it would work for both ways?

7

well, this could definitely work with on key downs, but note that key down code needs a keycode check to know which key was pressed. so you’d either use a different script or need to examine the event.type to determine if you’re in mouse or keyboard mode.