Couple of questions about instance mode

I don't know how to properly do some stuff. This is how instance mode usually looks like, right?

var sketch = function(p) {

  p.setup = function() {
  };

  p.draw = function() {
  };
};

new p5(sketch);

I see that functions just get rewritten with the constructor function syntax, that is instead of writing function name(), you write object.name = function().

I get that. However, what if I want to write my own function? Do I need to do it with the same syntax? Do I need to include the object. part?

Each right curly bracket is ended with a semicolon - is that a necessity for instance mode?

In the official examples of instance mode, the last line is written like this: var myp5 = new p5(s);, while here it is written like this: new p5(sketch);. So, which one is correct?

Answers

  • edited December 2016

    The link below provides all forum's threads set to tag #instance mode: L-)
    https://forum.Processing.org/two/discussions/tagged?Tag=#instance+mode

    ... what if I want to write my own function? Do I need to do it with the same syntax?

    Even though we may follow the same prefix syntax for our own stuff, that's a flawed logic! :-q
    You see, that parameter p represents an instance of class p5. Our sketch itself. :-B

    Therefore, the only things we've gotta prefix w/ that parameter are members of class p5.
    Mostly what's in the web reference here: http://p5js.org/reference/#/p5 ~O)

    Each right curly bracket } is ended with a semicolon ;.

    It's got nothing to do w/ p5.js' instance mode, but JS' language syntax itself. :-\"
    Actually, that same rule would be applied to Java as well. They're very close syntactically! ;;)

    In those statements, you're not only creating a function, but also assigning it to a property of class p5 via operator =.
    That's a different case compared to starting the statement w/ keyword function.

    This latter form is called Function Declaration or Statement:
    https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function

    However, the 1s in your code are called Function Expression:
    https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function

    In short, b/c it's an assignment operation, that is, you're assigning function expressions rather than declaring them, both JS & Java's syntaxes demand a ; semicolon in order to turn the whole thing a statement/command/instruction. >-)

    But here's a possible surprise for you: We don't need to use ; in JS for 95% of cases at all.
    JS automatically inserts them for us! @-) Watch this video to know why: :bz
    https://www.YouTube.com/watch?v=Qlr-FGbhKaI

  • edited December 2016 Answer ✓

    So, which one is correct?

    • First, both s and sketch are merely variable names.
    • As long they refer to a function, they match p5's constructor signature.
    • In my point of view, for ordinary cases, there's no need to assign the p5's created instance to another variable as in here: var myp5 = new p5(s);
    • Just new p5(s); is pretty much all we need for our instance sketch to kick in! :-bd
    • Although in my own instance mode sketches, I simply pass the whole sketch directly to p5's constructor: \m/

    new p5(p => {
      p.setup = () => {
        p.createCanvas(800, 600);
        p.blendMode(p.REPLACE); // Constant REPLACE belongs to class p5 too!
      };
    
      p.draw = () => {
        initBG('cyan'); // B/c it's our own stuff, no prefix is used here!
      };
    
      function initBG(colour) { // Function Declaration.
        p.background(colour);
      } // Notice no semicolon here!
    });
    
  • edited December 2016

    Ok, thanks. Also, in the example you gave me, what does => mean? I know p5, but I suck at pure javascript. Is that like a shortcut for writing p.name = function(){}; or something?

  • edited December 2016

    That's the "fat" arrow syntax (a.K.a. lambda) ES6 JS had adopted from other languages, such as CS (CoffeeScript): :bz

    1. https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
    2. http://CoffeeScript.org/#fat-arrow

    Indeed, w/ arrow functions we don't type in function n more for most cases. :-bd

Sign In or Register to comment.