# Lines with alpha exhibiting weird color behavior in p5.js with webgl

**URL:** <https://discourse.processing.org/t/lines-with-alpha-exhibiting-weird-color-behavior-in-p5-js-with-webgl/30663>\
**Category:** p5.js\
**Created:** [June 12, 2021, 2:56pm UTC](https://discourse.processing.org/t/lines-with-alpha-exhibiting-weird-color-behavior-in-p5-js-with-webgl/30663 "2021-06-12T14:56:19Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![neel](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@neel](https://discourse.processing.org/u/neel)\
**Post date:** [June 12, 2021, 2:56pm UTC](https://discourse.processing.org/t/lines-with-alpha-exhibiting-weird-color-behavior-in-p5-js-with-webgl/30663/1 "2021-06-12T14:56:19Z")

</div>

I’ve got some p5.js code where I draw lines with some amount of alpha (the last two characters on the hex code).

For some reason, these lines appear as gradients from red/blue/green.

```auto
function setup() {
  createCanvas(1080,1080, WEBGL);
  noLoop();
}
function draw() {
  randomSeed(10);
  // ambientLight(128, 128, 128);
  // directionalLight(128, 128, 128, 0, 0, -1);
  background('#111111');
  translate(-width/2,-height/2);
  let lines = 50;
  let dir = random( - .5, .5) + PI/2;
  dir = createVector(cos(dir),sin(dir));
  dir.normalize();
  length = 1000;
  for (let i = -20; i < lines + 20; i++) {
    if (random() < .5) {
            strokeWeight(4);
        stroke('#666666aa');
      line(i * width/lines, 0, 0, i * width/lines + dir.x * length, 0 + dir.y * length,0);
      console.log(dir.x);
      }
      else {
        stroke('#99222222');
        strokeWeight(2);
        line(i * width/lines, 0, 0, i * width/lines + dir.x * length, 0 + dir.y * length,0);
      }
    }
  }

```

If I remove the alpha characters from the hex codes, the lines draw as intended. If I call `lights();` at the beginning of draw, they also render normally. The default values for lights() each seem to play a different role in this.

Anybody know what’s going on here? It feels like I can’t really use transparency with lines.

Furthermore, anybody know how I could harness this effect in a more controlled manner? Does p5.js support “line shaders” in the same way that processing does?

This happens on my macbook pro (2019) and chrome. It also happens on a friend’s linux machine, but it doesn’t happen on another friend’s windows machine.

---

<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:** [June 12, 2021, 3:29pm UTC](https://discourse.processing.org/t/lines-with-alpha-exhibiting-weird-color-behavior-in-p5-js-with-webgl/30663/2 "2021-06-12T15:29:21Z")

</div>

could you elaborate a bit more on what you get and what is the expected result? because the two colors you specify are grey and reddish colors, the result seems fine to me

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cb625607012f28f6873f1b108cad8469c4257632.png)

---

<div class="post-metadata">

**Author:** ![neel](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@neel](https://discourse.processing.org/u/neel)\
**Post date:** [June 12, 2021, 3:51pm UTC](https://discourse.processing.org/t/lines-with-alpha-exhibiting-weird-color-behavior-in-p5-js-with-webgl/30663/3 "2021-06-12T15:51:09Z")

</div>

Oh, sorry. I left a key detail out of the post.

This seems to happen on my computer, as well as a friends. It doesn’t happen on all computers. It’s been confirmed to happen on my macbook pro (2019) using chrome. It also occurred for a friend who uses linux and a geforce 1080. It didn’t happen for a person using chrome on a windows machine.

This is what the lines look like on my machine: [https://www.instagram.com/p/CP-fsdNn2Li/](https://www.instagram.com/p/CP-fsdNn2Li/)

---

<div class="post-metadata">

**Author:** ![neel](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@neel](https://discourse.processing.org/u/neel)\
**Post date:** [June 12, 2021, 3:54pm UTC](https://discourse.processing.org/t/lines-with-alpha-exhibiting-weird-color-behavior-in-p5-js-with-webgl/30663/4 "2021-06-12T15:54:53Z")

</div>

Sorry. I think I also pasted the wrong code example. This situation is getting tricky, and I’ve tried a lot of things. Try the updated code sample, @micuat . Thanks for your patience.

---

<div class="post-metadata">

**Author:** ![neel](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@neel](https://discourse.processing.org/u/neel)\
**Post date:** [June 12, 2021, 3:57pm UTC](https://discourse.processing.org/t/lines-with-alpha-exhibiting-weird-color-behavior-in-p5-js-with-webgl/30663/5 "2021-06-12T15:57:39Z")

</div>

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/59c30659b2b6e826a4b843702c0e6716c42c2a5d.png)

---

<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:** [June 12, 2021, 4:17pm UTC](https://discourse.processing.org/t/lines-with-alpha-exhibiting-weird-color-behavior-in-p5-js-with-webgl/30663/6 "2021-06-12T16:17:18Z")

</div>

sure, I tested on Ubuntu (RTX 2070, Firefox/chrome) but didn’t see this issue. It looks like a bug (maybe gpu related?) so I would appreciate it if you can submit an issue on github.

---

<div class="post-metadata">

**Author:** ![neel](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@neel](https://discourse.processing.org/u/neel)\
**Post date:** [June 14, 2021, 12:14pm UTC](https://discourse.processing.org/t/lines-with-alpha-exhibiting-weird-color-behavior-in-p5-js-with-webgl/30663/7 "2021-06-14T12:14:34Z")

</div>

Sure thing. I’ll do my best to add one later today.