P5.js: line() function not working in WEBGL

[jacobrake]

Running into error in p5.js when using line() with WEBGL starting on line 7790
code excerpt:

p5.prototype.line = function() {
if (!this._renderer._doStroke) {
return this;
}
var args = new Array(arguments.length);
for (var i = 0; i < args.length; ++i) {
args[i] = arguments[i];
}
//check whether we should draw a 3d line or 2d
if(this._renderer.isP3D){
this._renderer.line( //line7790 is the error
args[0],
args[1],
args[2],
args[3],
args[4],
args[5]);
} else {
this._renderer.line(
args[0],
args[1],
args[2],
args[3]);
}
return this;
};

I used basic line code used by https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5 to see if my code was bad but running into same error with this code.

[lmccart]

Could you please post a a snippet of the code that isn't working? That is your own code with the part with the line() call.

[jacobrake]

this is the basic code I get an error with....

function setup(){
  createCanvas(1080,1080,WEBGL);
  background(0,10,200);
  for(var i = 0; i < 500; i+=100){
    push();
    fill(i * 0.1, 100, 100);
    //line
    translate(0, 100, 0);
    line(-100, 0, i, 100, 0, i);
    pop();
  }
}

[indefinit]

hmm, I thought we implemented the line primitive but it looks like it's not in master anymore. Here's a quick fix until that happens:

function setup(){
  createCanvas(1080,1080,WEBGL);
  background(0,10,200);
  for(var i = 0; i < 500; i+=100){
    push();
    beginShape(LINES);
    stroke(i * 0.1, 100, 100);
    //line
    translate(0, 100, 0);
    vertex(-100, 0, i);
    vertex(100, 0, i);
    pop();
    endShape();
  }
}

[jacobrake]

Thank you that was pretty much what I had done in my actual code.

[lmccart]

yeah I'm pretty sure it was in there too, but I'm searching through history and can't find it, weird.

[tildebyte]

I'm probably completely off-base here but I found p5.Renderer3D.prototype.line (starting at line 565) commented out in a1d296a.

[lmccart]

Aha that's where it went, thanks for looking into it. We'll get this back in as soon as we can, or if you'd like to submit a pull request with the missing code we'd be happy to merge it in.

[tildebyte]

Apparently my git-fu is sharper than I thought!
I'm flattered, but a PR is way outside of my jurisdiction 😃 ; I'm still learning (treading through the minefield which is) JS.
I'm watching this issue, though, and I'll be sure to test any commits.

P.S - I can't get the code from post # 4 to work with the WEBGL renderer. The docs don't show that the vertex call takes a third parm (z co-ord?), so that was odd to me. The following edit shows how LINES works in 2d, but regardless, still doesn't work with the WEBGL renderer (preview at CodePen).

function setup(){
    createCanvas(512, 512)  // 1080 was too big for the p5.js website.
    background(0, 10, 200)
    for(var i = -100; i < 110; i += 10){
        push()
        beginShape(LINES)
        stroke(i * 2, 100, 100)
        //line
        translate(256, 256, 0)
        vertex(-100, i, i)
        vertex(100, i, i)
        endShape()
        pop()
    }
}

[DexterShepherd]

Hey All,

Been looking for a way to contribute for some time and I just hit this issue with my code as well. I'd love to take a look and hopefully submit a PR.

Assigning to myself to avoid duplicated work from anyone.

edit: Maybe not assigning to myself as I can't figure out how to do that ¯_(ツ)_/¯

[sixhat]

I kind of "solved" it by manually adding the following code into p5.js

p5.RendererGL.prototype.line = function() {
                var args = arguments;
                this.beginShape();
                this.vertex(args[0], args[1], args[2]);
                this.vertex(args[3], args[4], args[5]);
                this.endShape();
                return this;
            }

[DexterShepherd]

@sixhat I meant to work on this ages ago but ended up drawing a blank. Hope I'm not stalling any development. If you have a fix you should submit a PR :)

[sixhat]

Sorry, this was just a quick hack in my code. I don't even know how to start that here, and probably the code would need some checks for quality (console is giving a lot of warnings). Please feel free to use te above information as needed.

[whatSocks]

+1

[sixhat]

@DexterShepherd I finally managed to have a bit of time and added this code to the webgl primitives file and it is now in the Pull Request https://github.com/processing/p5.js/pull/1962

[lmccart]

@mlarghydracept I know we're planning a larger revamp of webgl mode, but in the interim.. if this PR looks good to you, feel free to merge it.