# P5.js and WebGL: drawing lines

**URL:** <https://discourse.processing.org/t/p5-js-and-webgl-drawing-lines/13274>\
**Category:** Coding Questions\
**Created:** [August 9, 2019, 1:37pm UTC](https://discourse.processing.org/t/p5-js-and-webgl-drawing-lines/13274 "2019-08-09T13:37:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![graysonh](https://avatars.discourse-cdn.com/v4/letter/g/a8b319/32.png) [@graysonh](https://discourse.processing.org/u/graysonh)\
**Post date:** [August 9, 2019, 1:37pm UTC](https://discourse.processing.org/t/p5-js-and-webgl-drawing-lines/13274/1 "2019-08-09T13:37:43Z")

</div>

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](https://github.com/processing/p5.js/issues/1638) with WebGL and the line() function and I’m not sure if it has been fixed or not.

Here is my [sketch](https://www.openprocessing.org/sketch/743458). Any advice on this would be great.

Thanks!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 12, 2019, 6:03pm UTC](https://discourse.processing.org/t/p5-js-and-webgl-drawing-lines/13274/2 "2019-08-12T18:03:05Z")

</div>

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.

```auto
	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);
```

---

<div class="post-metadata">

**Author:** ![graysonh](https://avatars.discourse-cdn.com/v4/letter/g/a8b319/32.png) [@graysonh](https://discourse.processing.org/u/graysonh)\
**Post date:** [August 12, 2019, 8:00pm UTC](https://discourse.processing.org/t/p5-js-and-webgl-drawing-lines/13274/3 "2019-08-12T20:00:38Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 12, 2019, 8:38pm UTC](https://discourse.processing.org/t/p5-js-and-webgl-drawing-lines/13274/4 "2019-08-12T20:38:08Z")

</div>

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.

```auto
    //interaction occurs
    push();
    noStroke();
    beginShape();
// ... code continues ....
    endShape();
    pop();

```