# Transformation matrix artifacts

**URL:** https://discourse.processing.org/t/transformation-matrix-artifacts/28337
**Category:** Beginners
**Created:** [March 8, 2021, 12:43pm UTC](https://discourse.processing.org/t/transformation-matrix-artifacts/28337 "2021-03-08T12:43:50Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![krigga](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@krigga](https://discourse.processing.org/u/krigga)
#### Post date: [March 8, 2021, 12:43pm UTC](https://discourse.processing.org/t/transformation-matrix-artifacts/28337/1 "2021-03-08T12:43:50Z")

</div>

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?

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

```

---

<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: [March 8, 2021, 1:33pm UTC](https://discourse.processing.org/t/transformation-matrix-artifacts/28337/2 "2021-03-08T13:33:46Z")

</div>

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

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

---

<div class="post-metadata">

### Author: ![krigga](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@krigga](https://discourse.processing.org/u/krigga)
#### Post date: [March 8, 2021, 2:26pm UTC](https://discourse.processing.org/t/transformation-matrix-artifacts/28337/3 "2021-03-08T14:26:19Z")

</div>

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.