Instance Mode

edited December 2014 in p5.js

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

};

Answers

  • 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]);
    }}
    
  • edited December 2014

    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! ~:>

  • @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]);
    }};
    
    };
    
    • 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.
  • p5.js variables like HSB and CENTER will need $a. variables you create do not

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

Sign In or Register to comment.