p5 sketches integration methods

Question

Hi,

Sorry if I'm getting invasive with my p5 related post. I'm learning how to use p5 sketches in twine with sugarcube but I still can't manage to make sketches refer to each other. This would be very usefull for me to make several iterations of a same mingame with few changes in a story.

Here is an example of code I would like to have in a passage. What would be the right method to make it work with sugarcube in the javascript section of my story ? Any idea of where I could find more documentation about this ?

// here is the sketch who is displayed
var s = function( sketch ) {
  sketch.draw = function() {
    if (myp5b.interact()) sketch.background(100,0,0);
    else                  sketch.background(0,100,0);
  };
};

// here is a sketch with a function that I call in the previous sketch
var t = function( sketch ) {
  sketch.interact = function() {
    if(sketch.mouseIsPressed) return true;
  };
};

var myp5  = new p5(s);
var myp5b = new p5(t);

you can try it here and get what it is suposed to do : http://alpha.editor.p5js.org/MartiansParlor/sketches/SJGR5WAVQ

For now I'm using this method to use p5 skecthes in twine :

In the Javascipt 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);
  };
};

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"
]);

in the passage where the script displayed :

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

Thanks for your help, I would be very grateful !

Answer 1

Doing what you're attempting requires defining your sketches within the passage, rather than being able to set them up beforehand, as you have to reference one of the p5 instances from within the other.

For example, place (only) the following in your Story JavaScript:

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"
]);

Then put something like the following within your passage:

<div id="p5sketches"></div>
<<script>>
$(document).one(':passageend', function () {
	setup.p5promise.then(function () {
		var first = function (sketch) {
			sketch.interact = function () {
			    if (sketch.mouseIsPressed) {
			    	return true;
			    }
			};
		};

		var second = function (sketch) {
			sketch.draw = function () {
				if (p5first.interact()) {
					sketch.background(100, 0, 0);
				}
				else {
					sketch.background(0, 100, 0);
				}
			};
		};

		var p5first  = new p5(first, 'p5sketches');
		var p5second = new p5(second, 'p5sketches');
	});
});
<</script>>

NOTE: You have to create them in the shown order so the draw function of the second can close over the p5 instance value of p5first.