# Scaling down & rotating a pattern causes rendering issues and flickering

**URL:** <https://discourse.processing.org/t/scaling-down-rotating-a-pattern-causes-rendering-issues-and-flickering/33227>\
**Category:** Coding Questions\
**Created:** [November 1, 2021, 6:10pm UTC](https://discourse.processing.org/t/scaling-down-rotating-a-pattern-causes-rendering-issues-and-flickering/33227 "2021-11-01T18:10:58Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![miracle2k](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/miracle2k/32/14882_2.png) [@miracle2k](https://discourse.processing.org/u/miracle2k)\
**Post date:** [November 1, 2021, 6:10pm UTC](https://discourse.processing.org/t/scaling-down-rotating-a-pattern-causes-rendering-issues-and-flickering/33227/1 "2021-11-01T18:10:58Z")

</div>

Take this sketch as an example, which I created to reproduce the problem in isolation:

[https://editor.p5js.org/elsdoerfer/sketches/NrPcyu-mG](https://editor.p5js.org/elsdoerfer/sketches/NrPcyu-mG)

It’s supposed to be a striped line pattern. I want it to be very fine, 1px lines and less, so I am using

```auto
let mat = new DOMMatrix();
mat = mat.scale(SCALE_DOWN);
pattern.setTransform(mat);

```

to scale it down. This works ok in many cases, but really does not work for some angles. It also gives a strange flickering effect when scrolling.

 ![Screen Shot 2021-11-01 at 6.03.23 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/06cfd14af2e4baf449312e96f2509d8401c75bc3.png)

It doesn’t even matter how much I scale down. Using these options in the code equally causes flickering:

```auto
const PATTERN_SIZE = 1;
const SCALE_DOWN = 1/2;

const PATTERN_SIZE = 1;
const SCALE_DOWN = 1/8;

```

or using a bigger pattern:

```auto
const PATTERN_SIZE = 5;
const SCALE_DOWN = 1/10;

```

I understand that drawing a line \< 1 pixel may challenging, but some of these seem just wrong entirely.

Is there a way to solve this?

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [November 1, 2021, 8:49pm UTC](https://discourse.processing.org/t/scaling-down-rotating-a-pattern-causes-rendering-issues-and-flickering/33227/2 "2021-11-01T20:49:58Z")

</div>

What you’re seeing is the inevitable effect of displaying patterns of lines on a pixel display where the density of the pattern approaches the density of the pixels:

> **[Moiré pattern](https://en.wikipedia.org/wiki/Moir%C3%A9_pattern)**
>
> In mathematics, physics, and art, moiré patterns (UK: /ˈmwɑːreɪ/ MWAR-ay, US: /mwɑːˈreɪ/ mwar-AY, French: \[mwaʁe\] (listen)) or moiré fringes are large-scale interference patterns that can be produced when an opaque ruled pattern with transparent gaps is overlaid on another similar pattern. For the moiré interference pattern to appear, the two patterns must not be completely identical, but rather displaced, rotated, or have slightly different pitch.
> Moiré patterns appear in many situations. In pr...