P5.js and WebGL: drawing lines

p5.js Coding Questions
1

Hi All,

I’m very new to p5 (coming from Processing) and am attempting to convert one of my processing sketches into p5 so I can run it on OpenProcessing.

My sketch involves using a texture, so I am using WebGL, but the lines being drawn to the canvas do not show up when running the sketch. The texture is displayed correctly, but all of the lines in my sketch are not displayed.

I noticed that if I stop the sketch right before the end of draw() one of the lines being drawn is displayed, but while the sketch loops no lines are displayed.

In the past there was an issue with WebGL and the line() function and I’m not sure if it has been fixed or not.

Here is my sketch. Any advice on this would be great.

Thanks!

1 Like
2

It looks like your Squares methods are breaking encapsulation and modifying the general canvas state. That interferes with your lines. Try commenting out the buggy interaction / update code and you can see your line immediately.

	for (let i = 0; i < squares.length; i++) {
		squares[i].show();
		// for (let j = 0; j < squares.length; j++) {
		// 	if (j != i) {
		// 		squares[i].interact(squares[j]);
		// 	}
		// }
		// squares[i].update();
	}

Now try re-enabling that code, but just disabling your texture call in the Square class:

//interaction occurs
noStroke();
beginShape();
// texture(paperBack);
1 Like
3

Thank you for your help Jeremy. So the issue isn’t with WebGL and the line() function, but rather with the texturing? Or the texturing is causing my interact() method to break encapsulation? Do you know of a way to fix this error so it will display both the texture and the other lines beign drawn?

4

If you are making changes to fill, line weight, texture, etc. inside an object and don’t want those changes to influence the rest of the sketch, the easiest way is to isolate them is to use push / pop.

    //interaction occurs
    push();
    noStroke();
    beginShape();
// ... code continues ....
    endShape();
    pop();
2 Likes