pixelkind / p5canvas

An interactive preview for writing p5js code in Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=garrit.p5canvas
Other
39 stars 4 forks source link

Classes don't work #32

Closed dr-nyt closed 4 years ago

dr-nyt commented 4 years ago

Hey so I tried calling a draw function from a simple class and it doesn't work.

The following code is correct and works on p5 Web Editore and another vscode extension like yours called live-p5. (I want to use this extension because I love the x and y graph on the side.)

function setup() {
  createCanvas(800, 800);
  line1 = new Line(100, 100, 200, 200);
  line2 = new Line(100, 200, 200,300);
}

function draw() {
  background(220);
  fill(0, 0, 0); 
  line1.draw();
  line2.draw();
}

class Line {
  constructor(x1, y1, x2, y2) {
    this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
  }

  draw() {
    line(this.x1, this.y1, this.x2, this.y2);
  }
}

On a side note, I do see the lines if I put line(100, 100, 200, 200); directly in the draw function, but I want to use classes.

pixelkind commented 4 years ago

Hej @dr-nyt, it should work, but currently we don't support calling setup yourself. Working on it for one of the next versions.

The following code should work:

class Line {
  constructor(x1, y1, x2, y2) {
    this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
  }

  draw() {
    line(this.x1, this.y1, this.x2, this.y2);
  }
}

let line1 = new Line(100, 100, 200, 200);
let line2 = new Line(100, 200, 200, 300);

function draw() {
  background(220);
  fill(0, 0, 0);
  line1.draw();
  line2.draw();
}

All the best :)