p5 intergration, making two script interact each other

Question

Hi, I just learned how to add some sketches wrote with p5 in a twine story, and it is very fun to do !

For this I had to load the p5 librairies in the javascript section of my story with importScripts, and then add my sketch wrote with p5 in instance mode. Finally I had to call my sketch in a passage in my story (see code below).

What I'm looking for now is to call several skecthes in one passage and make them interact with each other. I tried several thing but it didn't work out...

What am I missing ?

Here is my code in the javaScript section

setup.mySketch = function (sketch) {
	sketch.setup = function() {
		sketch.createCanvas(200, 200);
 	};
	sketch.draw = function() {
		sketch.background(100+sketch.sin(sketch.millis()*0.005)*60);
		if(sketch.mouseIsPressed) otherSketch.action();
	};
};

setup.myOtherSketch = function (otherSketch) {
 	otherSketch.action = function() {
		sketch.remove();
		Engine.play("entrance");
 	};
};

setup.p5promise = importScripts([	
	"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js",
	"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js",
	"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"
]);

And here is the passage where I call my sketch

<div id="p5sketch"></div> 
<<script>>
	$(document).one(':passageend', function () {
		setup.p5promise.then(function () {
			new p5(setup.mySketch, 'p5sketch');
			new p5(setup.myOtherSketch, 'p5sketch');
		});
	});
<</script>>

 

Answer 1

Aside from your basic goal of making several sketches interact with each other, you explain neither specifically what you're attempting to accomplish with your sample code, nor what's happening versus what you expect to be happening.  That's kind of important information to know.

Based on a look at your sample code, some issues with getting the two sketches working together:

1. You're attempting to attach two different sketches to the same element (ID: p5sketch), which probably isn't going to work out.
2. The sketch created by the setup.sketch() function attempts to interact with the other sketch without any kind of reference to it.
3. As far as I can see, your setup.otherSketch() function isn't actually creating a sketch.  What is it supposed to be?

PS:  I'd move the importScripts() chunk to the top of your JavaScript section.  Having it at the end is a bit odd.

Comments

Thank you for helping me once again !

What I would like in this example is to have one skecth that display a canvas, and another with a function that the first sketch can call (the function jump to another passage when the user click).

This may seems useless for the moment, but if I understand how it's done, it would give me many possibilities, like making some kind of mini games with several ocurence, only by changing parameters. But maybe you have a better protocol for doing this ?

1. I changed one of the ID, thanks for spoting this !
2. How do I make a reference to another sketch ?
3. Do my sketch need to have a draw and setup function to be used by another one ?

I'm very grateful for your help !

---

From the description, you simply need to call a function which is within scope of your original sketch.  That really has nothing to do with having multiple sketches interact with each other, which is more a question for the p5.js community anyway.

Try something like the following:

setup.p5promise = importScripts([
	"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js",
	"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js",
	"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.sound.min.js"
]);

setup.mySketch = function (sketch) {
	sketch.setup = function() {
		sketch.createCanvas(200, 200);
 	};

	sketch.draw = function() {
		sketch.background(100 + sketch.sin(sketch.millis() * 0.005) * 60);

		if (sketch.mouseIsPressed) {
			setup.p5PlayPassage(sketch, "entrance");
		}
	};
};

setup.p5PlayPassage = function(sketch, passageName) {
	sketch.remove();
	Engine.play(passageName);
};

And:

<div id="p5sketch"></div>
<<script>>
	$(document).one(':passageend', function () {
		setup.p5promise.then(function () {
			new p5(setup.mySketch, 'p5sketch');
		});
	});
<</script>>

 

That example is a bit contrived, however, since you do not need the extra function simply to remove the sketch and play a new passage.  For example:

setup.mySketch = function (sketch) {
	sketch.setup = function() {
		sketch.createCanvas(200, 200);
 	};

	sketch.draw = function() {
		sketch.background(100 + sketch.sin(sketch.millis() * 0.005) * 60);

		if (sketch.mouseIsPressed) {
			sketch.remove();
			Engine.play("entrance");
		}
	};
};

 

---

Thanks a lot, that was exactly what I was looking for !

And what if I wanted to use your last example with a parameter ? Like this :

setup.mySketch = function (sketch, passageName) {
	sketch.setup = function() {
		sketch.createCanvas(200, 200);
 	};

	sketch.draw = function() {
		sketch.background(100 + sketch.sin(sketch.millis() * 0.005) * 60);

		if (sketch.mouseIsPressed) {
			sketch.remove();
			Engine.play(passageName);
		}
	};
};

How should I call it in my passage ?

---

You cannot pass additional parameters to the sketch function.  The only parameter it accepts is the p5 sketch instance.

As an alternative, you may reference values from within the sketch function in various ways.  That said, it's difficult to say what would be the best way to accomplish that without knowing what you're attemping to do.  Concrete examples would be best.

 

PS: You might want to see my answer to your newest question about making multiple sketches interact.  Though, again, if you're simply attemping to reuse code, then you don't need multiple sketches to accomplish that.

---

Thanks for all of your answers !

My wish was not only to reuse code, but also apply some variations to it. For this parameters would have been convenient, but now I can also run small sketches that call the main one with specific parameters. Thanks for making sugarcube by the way, I love this tool !