P5.js and Hype setup

1

Hi,

I would like to know how to include a p5.js sketch in Hype. I already added the libraries in Resources and they are included in the Head of the document.
I can’t find a way to make the function setup work, nor the draw setup inside Hype.
I’d like to apply physics to each of the elements and control it with an iPhone.
This is the sketch of p5.js:

function setup() {
createCanvas(720, 480);
strokeWeight(2);
ellipseMode(RADIUS);
}

function draw() {
background(204);

noStroke();
fill(102);
ellipse(264, 377, 33, 33);
fill(0);

fill(102);
rect(219, 274, 90, 6);

fill(0);
ellipse(276, 155, 45, 45);

fill(255);
ellipse(288, 150, 14, 14);
fill(0);
ellipse(288, 150, 3, 3);
}

2

I’m not sure if you’ll be able to control the elements on the “canvas” created by the p5 library with Hype’s functionality. You can get a p5 “sketch” to load inside an element in Hype but you won’t be able to apply Hype’s Physics to those elements created by p5.

To me it’s not clear on why you would want to use p5 and Hype in this way. Hype can create ellipses and rectangles and you could definitely control those with Physics.

For clarification on how you would load a p5 “sketch” in an element in Hype run this code on scene load and you’ll see.

let container = {
		width: hypeDocument.getElementProperty(hypeDocument.getElementById('p5-box'), 'width'),
		height: hypeDocument.getElementProperty(hypeDocument.getElementById('p5-box'), 'height')
	};
	
	let sketch = function(p) {
	
		p.setup = function() {
			p.createCanvas(container.width, container.height);
			p.strokeWeight(2);
			p.ellipseMode("RADIUS");
		};
		
		p.draw = function() {
			p.background(204);
	
			p.noStroke();
			p.fill(102);
			p.ellipse(264, 377, 33, 33);
			p.fill(0);
			
			p.fill(102);
			p.rect(219, 274, 90, 6);
			
			p.fill(0);
			p.ellipse(276, 155, 45, 45);
			
			p.fill(255);
			p.ellipse(288, 150, 14, 14);
			p.fill(0);
			p.ellipse(288, 150, 3, 3);
		};
	
	}
	
	let myp5 = new p5(sketch, "p5-box");

You have to give an element in Hype an ID of “p5-box” (you can change this)

1 Like
3

Hi DBear, Thank you for your answer.
I did a test following your instructions, but it doesn’t work for me. I’m attaching the Hype document in a ZIp file.
I’m trying to do this test with these basic figures, but my final intention is to use some custom shapes created in p5, apply Physics and test with interactive sounds with p5 Sounds, making the elements have different sounds when they collide with each other.

Test.zip (164.8 KB)

4

I think the problem is just that you have not loaded the javascript properly. If you look in the web developer console, you can see a ReferenceError: Can't find variable: p5 error, which indicated p5 has not been loaded.

My recommendation is:

  1. remove the .js files in your project
  2. Download the “Complete Library” from: https://p5js.org/download/
  3. Drag the p5.min.js file to your Resource Library.

Nothing else is needed; I get this:

24%20AM
Screen Shot 2019-03-21 at 11.13.24 AM.png1092×682 6.61 KB

5

Thank you Jonathan, now it really worked for me!

1 Like
6

Hi Dbear

I have a question.

Why did you write a “p” before every parameter ??? e.j “p.noStroke”

How Do I know where to write a “P”?