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);
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.
