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

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.

function setup() {
  createCanvas(1080,1080, WEBGL);
function draw() {
  // ambientLight(128, 128, 128);
  // directionalLight(128, 128, 128, 0, 0, -1);
  let lines = 50;
  let dir = random( - .5, .5) + PI/2;
  dir = createVector(cos(dir),sin(dir));
  length = 1000;
  for (let i = -20; i < lines + 20; i++) {
    if (random() < .5) {
      line(i * width/lines, 0, 0, i * width/lines + dir.x * length, 0 + dir.y * length,0);
      else {
        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.

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

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:

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.

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.

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