Transformation matrix artifacts

Processing Beginners
1

I was generating a linear gradient using code I found online and then tried adding rotation using transformation matrix. The gradient did rotate, however artifacts appeared: the gradient was no longer perfect, dark lines appeared in between the lines of the gradient. What’s the cause of this and how do I fix it?

final float ALPHA = radians(90); // change this from 90 to 0 and see the difference

final color c1 = color(255, 0, 0);
final color c2 = color(0, 0, 255);

void setup() {
  size(1024, 576);
  frameRate(30);
  noFill();
}

void draw() {
  pushMatrix();
  
  float w1 = height * sin(ALPHA);
  float w2 = width * cos(ALPHA);
  
  float h1 = height * cos(ALPHA);
  float h2 = width * sin(ALPHA);
  
  rotate(-ALPHA);
  translate(-w1, 0);
  scale((w1 + w2) / width, (h1 + h2) / height);
  
  background(0);
  
  for (int y = 0; y < height; ++y) {
    stroke(lerpColor(c1, c2, map(y, 0, height, 0, 1)));
    line(0, y, width, y);
  }
  
  popMatrix();
}
2

I think the lines are not dense enough because you are iterating for height (576) times but when you rotate, there are width (1024) rows. For example

  for (float y = 0; y < height; y+=0.5) {

would be a quick fix to make the artifact disappear, but it’s not a correct fix if you think about changing the aspect ratio again. I guess there are multiple solutions and it depends on what you need to do next (e.g., will you try different rotations like 45 deg? or is it only 90 degrees?)

3

I am aiming for any value, potentially (0-90). Just guessing the increment value feels wrong, but I guess it should work. I will try experimenting a bit more with this, thank you.