# Color two side of a custom shape

**URL:** <https://discourse.processing.org/t/color-two-side-of-a-custom-shape/26676>\
**Category:** p5.js\
**Created:** [January 1, 2021, 8:24pm UTC](https://discourse.processing.org/t/color-two-side-of-a-custom-shape/26676 "2021-01-01T20:24:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sarath.jasrin](https://avatars.discourse-cdn.com/v4/letter/s/f475e1/32.png) [@sarath.jasrin](https://discourse.processing.org/u/sarath.jasrin)\
**Post date:** [January 1, 2021, 8:24pm UTC](https://discourse.processing.org/t/color-two-side-of-a-custom-shape/26676/1 "2021-01-01T20:24:28Z")

</div>

How I can use two colors for two sides (top,inner) of a custom shape.

https://codepen.io/sarathjasrin/embed/preview/QWKQeQJ?height=300&slug-hash=QWKQeQJ&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 2, 2021, 3:32am UTC](https://discourse.processing.org/t/color-two-side-of-a-custom-shape/26676/2 "2021-01-02T03:32:31Z")

</div>

From my 1st attempt on multicolor w/ shapes on “p5.js” I believe it’s not currently possible: 😬

> [@Vertex, loop and draw along a vertex path](https://discourse.processing.org/t/vertex-loop-and-draw-along-a-vertex-path/4545/5):
>
> And finally the “3D Knot” p5js version. Watch it online below: grin[OpenProcessing.org/sketch/608726](http://OpenProcessing.org/sketch/608726) However, there’s a worse bug in it: the last stroke() determines the color for all vertex()! -1 “index.html”: \<!DOCTYPE html\> \<meta charset=utf-8\> \<meta name=viewport content=width=device-width,initial-scale=1\> \<script async src=https://cdn.JsDelivr.net/npm/p5/lib/p5.js\>\</script\> \<script defer src=sketch.js\>\</script\> “sketch.js”: /\*\* \* 3D Knot (2017/Dec) \* Daniel Shiffman \* https://Y…

For now you can at least code in “Java Mode / Pjs” for that multicolor effect: 🥴

> [@Vertex, loop and draw along a vertex path](https://discourse.processing.org/t/vertex-loop-and-draw-along-a-vertex-path/4545/3):
>
> I did some refactoring to the original Java Mode version. coffee You can watch it running online here: running_man[OpenProcessing.org/sketch/608725](http://OpenProcessing.org/sketch/608725) The online version got a bug though: strokeWeight() is completely ignored by vertex()! space_invader But it runs 100% correctly in the PDE (Processing’s IDE) though. smirk “Knot3D.pde”: /\*\* \* 3D Knot (2017/Dec) \* Daniel Shiffman \* https://YouTu.be/r6YMKr1X0VA \* \* Mod GoToLoop (v1.0.3) (2018/Oct/16) \* https://OpenProcessing.org/sket…

---

<div class="post-metadata">

**Author:** ![sarath.jasrin](https://avatars.discourse-cdn.com/v4/letter/s/f475e1/32.png) [@sarath.jasrin](https://discourse.processing.org/u/sarath.jasrin)\
**Post date:** [January 2, 2021, 6:39am UTC](https://discourse.processing.org/t/color-two-side-of-a-custom-shape/26676/3 "2021-01-02T06:39:01Z")

</div>

@GoToLoop thanks for the reply I thought the same. I couldn’t find any source for two side color for a Vertex. So I tried a work around  
by duplicating same vertex with 1px. But its not working as expected while converting points to 3D object.

Please check the codepen demo

https://codepen.io/sarathjasrin/embed/preview/QWKQeQJ?height=300&slug-hash=QWKQeQJ&default-tabs=js,result&host=https://codepen.io