# Applying Custom Shaders to Lines as Well as Filled Polygons in p5.js

**URL:** <https://discourse.processing.org/t/applying-custom-shaders-to-lines-as-well-as-filled-polygons-in-p5-js/44259>\
**Category:** Coding Questions\
**Created:** [April 9, 2024, 12:55pm UTC](https://discourse.processing.org/t/applying-custom-shaders-to-lines-as-well-as-filled-polygons-in-p5-js/44259 "2024-04-09T12:55:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nakednous](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/nakednous/32/8763_2.png) [@nakednous](https://discourse.processing.org/u/nakednous)\
**Post date:** [April 9, 2024, 12:55pm UTC](https://discourse.processing.org/t/applying-custom-shaders-to-lines-as-well-as-filled-polygons-in-p5-js/44259/1 "2024-04-09T12:55:13Z")

</div>

Hi all,

I’m using a custom shader in p5.js that works well on filled polygons but doesn’t affect the magenta lines outlining them. I’m looking for a way to apply the shader to these lines as well. Here’s my code:

https://editor.p5js.org/nakednous/full/dYTN0hbA9

How can I modify this to include the magenta line outlines in the shader effect?

Thanks for any insights!

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 9, 2024, 1:40pm UTC](https://discourse.processing.org/t/applying-custom-shaders-to-lines-as-well-as-filled-polygons-in-p5-js/44259/2 "2024-04-09T13:40:38Z")

</div>

Lines are rendered with a separate shader (line shader).

Quick research showed me this line

> <https://github.com/processing/p5.js/blob/main/src/webgl/material.js#L431>

and

> <https://github.com/processing/p5.js/blob/main/src/webgl/p5.Shader.js#L602>

so I assume that you have to define `uStrokeWeight` in your line shader (specifically for rendering lines) for the shader to be recognized as a line shader. But as a disclaimer I haven’t tested anything.

You may want to use the default line shader as a starting point:

> <https://github.com/processing/p5.js/blob/cdd98d02fc4a96bf819a5b000779889e8bb842f9/src/webgl/shaders/line.frag>

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 9, 2024, 6:28pm UTC](https://discourse.processing.org/t/applying-custom-shaders-to-lines-as-well-as-filled-polygons-in-p5-js/44259/3 "2024-04-09T18:28:18Z")

</div>

I did some test here, the code is not very clean (I tried to recreate intermediate shader code in the normal p5.js pipeline)

> **[p5.js Web Editor](https://editor.p5js.org/micuat/sketches/LwtAC1gXZn)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

I edited the last color output part on fragment shader to change the color with uv, but you can perhaps modify the vertices on vertex shader.