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

giorgiomartini

I got this sketch : http://codepen.io/giorgiomartini/pen/oLJyBj?editors=0011 and I want to have a point class, that draws the point using a vector.

But i get an error in the codepen console and it doesnt draw the point on the screen: Did you just try to use p5.js's createVector() function? If so, you may want to move it into your sketch's setup() function

But.. the createVector function is and i think it should stay on my point class...

Any idea where's the problem?

Thanks :)

GoToLoop

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

@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

• @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

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

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

Thanks! :)