Using createVector() on a class error. what should the right order be?

Answers

• GoToLoop

  August 2016 edited August 2016

  http://CodePen.io/anon/pen/wWNmpR?editors=1010

  "index.html":

  <script async src=http://p5js.org/js/p5.min.js></script>
  <script src=PointClass.js></script>
  

  "PointClass.js":

  /**
   * Point Class (v2.0.2)
   * by GiorgioMartini (2016/Aug/14)
   * mod GoToLoop
   *
   * forum.Processing.org/two/discussion/17841/
   * using-createvector-on-a-class-error-
   * what-should-the-right-order-be#Item_1
   *
   * CodePen.io/anon/pen/wWNmpR?editors=1010
   */
  
  "use strict";
  
  let pt;
  
  function setup() {
    createCanvas(300, 200);
    stroke(0xff).noLoop();
    strokeWeight(min(width, height) >> 1);
    pt = new Point;
    println(pt);
  }
  
  function draw() {  
    background(0).translate(width>>1, height>>1);
    pt.display();
  }
  
  class Point {
    constructor(x, y) {
      this.pos = createVector(x, y);
    }
  
    display() {
      point(this.pos.x, this.pos.y);
    }
  }
  
• blindfish

  August 2016

  @giorgiomartini 'point' is a global variable defined by p5; so you have to name your point instance something else; or use instance mode (recommended).
• GoToLoop

  August 2016 edited August 2016

  • @blindfish, not only that, but he's also declared variable point locally inside setup():

  function setup() {
    createCanvas(600, 600);
    let point = new Point(0, 0);
  }
  

  • Instead it shoulda been declared globally and just assigned a new Point to it in setup():

  let point;
  
  function setup() {
    createCanvas(600, 600);
    point = new Point(0, 0);
  }
  

  • However, after declaring a global variable called point, the original window.point() would be overshadowed by it.
  • Although he could still access the p5js' original function inside Point's display() method (and anywhere else) this way: window.point(this.pos.x, this.pos.y);
  • Of course the ideal would be to have that global variable w/ some diff. name, for example pt, in order to avoid overshadowing window.point(). *-:)
• blindfish

  August 2016

  Of course the ideal would be to have that global variable w/ some diff. name, for example pt, in order to avoid overshadowing window.point().

  You know that my opinion is that the ideal would be for point() NOT to be a global variable :P
• GoToLoop

  August 2016 edited January 2017 Answer ✓

  OK, in order to prove your "point" about under "instance mode" we can freely create global variables w/ the same name as p5.js' API, the sketch is using it now. :-\"

  Although I don't like to use Processing's API as variable & method names at all, in order to avoid confusion and erroneous posted code's color highlighting. 3:-O

  http://CodePen.io/anon/pen/wWNmVL?editors=1010

  "index.html":

  <script defer src=http://p5js.org/assets/js/p5.min.js></script>
  <script defer src=PointClass.js></script>
  

  "PointClass.js":

  /**
   * Point Class (v3.1)
   * by GiorgioMartini (2016/Aug/14)
   * mod GoToLoop
   *
   * forum.Processing.org/two/discussion/17841/
   * using-createvector-on-a-class-error-
   * what-should-the-right-order-be#Item_5
   *
   * CodePen.io/anon/pen/wWNmVL?editors=1010
   */
  
  "use strict";
  
  class Point {
    constructor(p, x, y) {
      this.pos = (this.p = p).createVector(x, y);
    }
  
    display() {
      this.p.point(this.pos.x, this.pos.y);
    }
  }
  
  new p5(p => {
    const point = new Point(p);
    p.println(point);
  
    p.setup = () => {
      p.createCanvas(300, 200);
      p.stroke(0xff).noLoop();
      p.strokeWeight(p.min(p.width, p.height) >> 1);
    };
  
    p.draw = () => {
      p.background(0).translate(p.width>>1, p.height>>1);
      point.display();
    };
  });
  
• giorgiomartini

  August 2016

  Thanks! :)