New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

line() function not working in WEBGL #1638

Closed
jacobrake opened this Issue Oct 17, 2016 · 15 comments

Comments

Projects
None yet
8 participants
@jacobrake

jacobrake commented Oct 17, 2016

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

This comment has been minimized.

Show comment
Hide comment
@lmccart

lmccart Oct 17, 2016

Member

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.

Member

lmccart commented Oct 17, 2016

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 comment has been minimized.

Show comment
Hide comment
@jacobrake

jacobrake Oct 17, 2016

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();
  }
}

jacobrake commented Oct 17, 2016

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

This comment has been minimized.

Show comment
Hide comment
@indefinit

indefinit Oct 19, 2016

Contributor

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();
  }
}
Contributor

indefinit commented Oct 19, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jacobrake

jacobrake Oct 19, 2016

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

jacobrake commented Oct 19, 2016

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

@lmccart

This comment has been minimized.

Show comment
Hide comment
@lmccart

lmccart Oct 19, 2016

Member

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

Member

lmccart commented Oct 19, 2016

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

@lmccart lmccart added the area:webgl label Nov 10, 2016

@tildebyte

This comment has been minimized.

Show comment
Hide comment
@tildebyte

tildebyte Nov 13, 2016

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

tildebyte commented Nov 13, 2016

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

@lmccart

This comment has been minimized.

Show comment
Hide comment
@lmccart

lmccart Nov 14, 2016

Member

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.

Member

lmccart commented Nov 14, 2016

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

This comment has been minimized.

Show comment
Hide comment
@tildebyte

tildebyte Nov 14, 2016

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()
    }
}

tildebyte commented Nov 14, 2016

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

This comment has been minimized.

Show comment
Hide comment
@DexterShepherd

DexterShepherd Mar 14, 2017

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 ¯_(ツ)_/¯

DexterShepherd commented Mar 14, 2017

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 ¯_(ツ)_/¯

@lmccart lmccart added area:webgl and removed area:webgl labels Mar 15, 2017

@lmccart lmccart changed the title from Error: TypeError: this._renderer.line is not a function to line() function not working in WEBGL Mar 19, 2017

@sixhat

This comment has been minimized.

Show comment
Hide comment
@sixhat

sixhat May 17, 2017

Contributor

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;
            }
Contributor

sixhat commented May 17, 2017

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

This comment has been minimized.

Show comment
Hide comment
@DexterShepherd

DexterShepherd May 17, 2017

@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 :)

DexterShepherd commented May 17, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@sixhat

sixhat May 17, 2017

Contributor

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.

Contributor

sixhat commented May 17, 2017

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

This comment has been minimized.

Show comment
Hide comment
@whatSocks

whatSocks commented Jun 7, 2017

+1

@sixhat

This comment has been minimized.

Show comment
Hide comment
@sixhat

sixhat Jun 7, 2017

Contributor

@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 #1962

Contributor

sixhat commented Jun 7, 2017

@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 #1962

@lmccart

This comment has been minimized.

Show comment
Hide comment
@lmccart

lmccart Jun 8, 2017

Member

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

Member

lmccart commented Jun 8, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment