# Transformation matrix artifacts

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();
}
``````

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?)

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.