Instance Mode

clandrie

I am trying to create three p5 sketch on a single web page. I read the information provided here: https://github.com/lmccart/p5.js/wiki/p5.js-overview#instantiation--namespace However, I seem to be making a mistake when applying it to my own code.

var p5_1 = new p5(function(sketch) {
var angles1 = [ 3.6, 57.6, 46.8, 28.8, 90, 133.2]; //NorthAmerica
var angles9 = [ 3.6, 104.4, 18, 28.8, 82.8, 122.4]; //World
var colors = [ [50, 50, 50,], [30, 99, 91,], [36, 84, 100,], [51, 55, 82], [120, 27, 71], [170, 64, 60] ];

sketch.setup = function() {
sketch.createCanvas(1024, 768);
sketch.noStroke();
sketch.noLoop();
sketch.colorMode(HSB);
};

sketch.draw = function() {
sketch.background(200);

sketch.ellipseMode(CENTER);
sketch.NorthAmerica(100, angles1);
sketch.World(325, angles9);
};

sketch.NorthAmerica = function(diameter1, data1) {
var lastAngle1 = 0;
for (var p1 = 0; p1 < data1.length; p1++) {
sketch.fill(colors[p1]);
sketch.stroke(255);
sketch.strokeWeight(1);
sketch.arc(600, 100, diameter1, diameter1, lastAngle1, lastAngle1+radians(angles1[p1]));
sketch.line(600, 100, 600 + diameter1/2 * cos(lastAngle1), 100 + diameter1/2 * sin(lastAngle1));
sketch.lastAngle1 += radians(angles1[p1]);
}};

sketch.World = function(diameter9, data9) {
var lastAngle9 = 0;
for (var p9 = 0; p9 < data9.length; p9++) {
sketch.fill(colors[p9]); stroke(255); strokeWeight(1);
sketch.arc(260, 260, diameter9, diameter9, lastAngle9, lastAngle9+radians(angles9[p9]));
sketch.line(260, 260, 260 + diameter9/2 * cos(lastAngle9), 260 + diameter9/2 * sin(lastAngle9));
sketch.lastAngle9 += radians(angles9[p9]);
}};

};

clandrie

Here was my original code which is working:

var angles1 = [ 3.6, 57.6, 46.8, 28.8, 90, 133.2]; //NorthAmerica
var angles9 = [ 3.6, 104.4, 18, 28.8, 82.8, 122.4]; //World
var colors = [ [50, 50, 50,], [30, 99, 91,], [36, 84, 100,], [51, 55, 82], [120, 27, 71], [170, 64, 60] ];

function setup() {
createCanvas(1024, 768);
noStroke();
noLoop();
colorMode(HSB);
}

function draw() {
background(200);

ellipseMode(CENTER);
NorthAmerica(100, angles1);
World(325, angles9);
}

function NorthAmerica(diameter1, data1) {
var lastAngle1 = 0;
for (var p1 = 0; p1 < data1.length; p1++) {
fill(colors[p1]);
stroke(255);
strokeWeight(1);
arc(600, 100, diameter1, diameter1, lastAngle1, lastAngle1+radians(angles1[p1]));
line(600, 100, 600 + diameter1/2 * cos(lastAngle1), 100 + diameter1/2 * sin(lastAngle1));
lastAngle1 += radians(angles1[p1]);
}}

function World(diameter9, data9) {
var lastAngle9 = 0;
for (var p9 = 0; p9 < data9.length; p9++) {
fill(colors[p9]); stroke(255); strokeWeight(1);
arc(260, 260, diameter9, diameter9, lastAngle9, lastAngle9+radians(angles9[p9]));
line(260, 260, 260 + diameter9/2 * cos(lastAngle9), 260 + diameter9/2 * sin(lastAngle9));
lastAngle9 += radians(angles9[p9]);
}}

GoToLoop

Never did any multi instance p5 style. All I know about it is that any P5.JS API should be preceded by the instance object, like you do w/ sketch.createCanvas(1024, 768);.
However, I've spotted lotsa P5.JS API functions w/o sketch., like radians(), cos(), stroke()! #-o

I highly advise you to choose a shorter name in place of sketch. It's too big for something you gotta type in a lot everywhere! How about something like $p.? <):)

And although not so sure, I guess that non-P5.JS's API members don't need a reference prefix.
So rather than $p.NorthAmerica = function(diameter1, data1) {},
you can rather go w/ function northAmerica(diam, data) {}. Much more concise & cleaner! :bz

Well, good luck w/ your P5.JS API hunting! %%-

P.S.: You've forgotten to close parens from the top new p5()'s function argument! ~:>

clandrie

@GoToLoop

I took your advice but it still isn't working. I'm using $a. instead of sketch.

I think I added $a. to all the p5.js API functions. Am I still missing something?

var p5_1 = new p5(function($a) {

var angles1 = [ 3.6, 57.6, 46.8, 28.8, 90, 133.2]; //NorthAmerica
var angles9 = [ 3.6, 104.4, 18, 28.8, 82.8, 122.4]; //World
var colors = [ [50, 50, 50,], [30, 99, 91,], [36, 84, 100,], [51, 55, 82], [120, 27, 71], [170, 64, 60] ];

$a.setup = function() {
$a.createCanvas(1024, 768);
$a.noStroke();
$a.noLoop();
$a.colorMode(HSB);
};

$a.draw = function() {
$a.background(200);
$a.ellipseMode(CENTER);

$a.NorthAmerica(100, angles1);
$a.World(325, angles9);
};

$a.NorthAmerica = function(diam, data) {
var lastAngle1 = 0;
for (var p1 = 0; p1 < data.length; p1++) {
$a.fill(colors[p1]);
$a.stroke(255);
$a.strokeWeight(1);
$a.arc(600, 100, diam, diam, lastAngle1, lastAngle1 + $a.radians(angles1[p1]));
$a.line(600, 100, 600 + diam/2 * $a.cos(lastAngle1), 100 + diam/2 * $a.sin(lastAngle1));
lastAngle1 += $a.radians(angles1[p1]);
}};

$a.World = function(diam, data) {
var lastAngle9 = 0;
for (var p9 = 0; p9 < data.length; p9++) {
$a.fill(colors[p9]);
$a.stroke(255);
$a.strokeWeight(1);
$a.arc(260, 260, diam, diam, lastAngle9, lastAngle9 + $a.radians(angles9[p9]));
$a.line(260, 260, 260 + diam/2 * $a.cos(lastAngle9), 260 + diam/2 * $a.sin(lastAngle9));
lastAngle9 += $a.radians(angles9[p9]);
}};

};

GoToLoop

• Read my P.S. warning from my 1st reply. I guess @ #44, you should replace it w/:
  }; ---> } );
• And again, I don't think local variables like NorthAmerica or World should receive a $a. prefix either!
• Also variable names which aren't constructors, by convention should be in lowerCamelCase:
  northAmerica, world.

lmccart

p5.js variables like HSB and CENTER will need $a. variables you create do not

GoToLoop

Oh, those all-caps constants slipped my mind! #-o
But I wonder whether something like p5.prototype.CENTER would work as well! 8-X