# Weird Noise-Like Patterns Appear When I Try to Compose Layers

**URL:** <https://openrndr.discourse.group/t/weird-noise-like-patterns-appear-when-i-try-to-compose-layers/481>\
**Category:** Beginners\
**Created:** [December 30, 2022, 2:30pm UTC](https://openrndr.discourse.group/t/weird-noise-like-patterns-appear-when-i-try-to-compose-layers/481 "2022-12-30T14:30:20Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Asmodaios](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/asmodaios/32/455_2.png) [@Asmodaios](https://openrndr.discourse.group/u/Asmodaios)\
**Post date:** [December 30, 2022, 2:30pm UTC](https://openrndr.discourse.group/t/weird-noise-like-patterns-appear-when-i-try-to-compose-layers/481/1 "2022-12-30T14:30:20Z")

</div>

Hello,

I’m trying to figure out how to get blending modes to work by composing multiple layers, and sometimes it works, but sometimes the results are … weird.

As a test image, I draw a red rectangle and on top of it a smaller rectangle filled with a linear gradient from white to black using `Multiply` as blending mode. The code is arranged like this and the image looks as it should.:

```auto
compose {
  draw {
    // draw red rectangle
  }
  layer {
    blend(Multiply())
    draw {
      // draw rectangle with gradient
    }
  }
}

```

But when I add another layer, using `Normal` as blending mode, to draw a circle on top, the result looks like this:

 ![2022-12-30_15-25-25.468.blending-test](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/f44167332ed350644cfdcba2021d937e8dfb81e7.png)

What could be the reason for that? If I draw this on the screen in a loop, it looks like noise on a TV screen, since the pattern changes from frame to frame.

---

<div class="post-metadata">

**Author:** ![Asmodaios](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/asmodaios/32/455_2.png) [@Asmodaios](https://openrndr.discourse.group/u/Asmodaios)\
**Post date:** [December 30, 2022, 2:38pm UTC](https://openrndr.discourse.group/t/weird-noise-like-patterns-appear-when-i-try-to-compose-layers/481/2 "2022-12-30T14:38:13Z")

</div>

By the way, the image in my posting is the result of drawing off-screen and saving the color buffer to a file. But as I wrote, it looks similar when drawn on the screen, just changing with each frame. The same patterns appear when I wrap the red rectangle in a layer using `Normal` as blending mode.

This is how the test image looks (and should look) when I just draw the two rectangles using the code structure that I outlined in my posting:

 ![2022-12-30_15-20-05.179.blending-test](https://global.discourse-cdn.com/free1/uploads/openrndr/original/1X/0ca0498760544c6d8bc1f94552c5607d5b7356ca.png)

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [December 30, 2022, 2:53pm UTC](https://openrndr.discourse.group/t/weird-noise-like-patterns-appear-when-i-try-to-compose-layers/481/3 "2022-12-30T14:53:13Z")

</div>

Hi hi! 🙂 Any chance you could share a minimal program showing the issue? Then we could try run it on our computers to see what’s happening.

---

<div class="post-metadata">

**Author:** ![Asmodaios](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/asmodaios/32/455_2.png) [@Asmodaios](https://openrndr.discourse.group/u/Asmodaios)\
**Post date:** [December 30, 2022, 2:58pm UTC](https://openrndr.discourse.group/t/weird-noise-like-patterns-appear-when-i-try-to-compose-layers/481/4 "2022-12-30T14:58:12Z")

</div>

Sure, here is a program that produces the effect I described. Thanks a lot!

```auto
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extra.compositor.blend
import org.openrndr.extra.compositor.compose
import org.openrndr.extra.compositor.draw
import org.openrndr.extra.compositor.layer
import org.openrndr.extra.fx.blend.Multiply
import org.openrndr.extra.fx.blend.Normal
import org.openrndr.extra.shadestyles.linearGradient
import org.openrndr.math.Vector2

fun main(args: Array<String>) = application {
    program {
        val composite = compose {
            draw {
                drawer.clear(ColorRGBa.BLACK)
                drawer.stroke = null
                drawer.fill = ColorRGBa(1.0, 0.0, 0.0)
                drawer.rectangle(width / 3.0, 0.0, width / 3.0, height.toDouble())
            }
            layer {
                blend(Multiply())
                draw {
                    drawer.stroke = null
                    drawer.fill = ColorRGBa.WHITE
                    drawer.shadeStyle = linearGradient(
                        ColorRGBa.WHITE,
                        ColorRGBa.BLACK,
                        Vector2.ZERO,
                        90.0,
                        1.0
                    )
                    drawer.rectangle(
                        width / 3.0,
                        height / 3.0,
                        width / 3.0,
                        height / 3.0
                    )
                }
            }
            layer {
                blend(Normal())
                draw {
                    drawer.stroke = null
                    drawer.fill = ColorRGBa.BLUE
                    drawer.circle(width / 2.0, height / 2.0, height / 5.0)
                }
            }
        }
        extend {
            composite.draw(drawer)
        }
    }
}

```

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [December 30, 2022, 3:12pm UTC](https://openrndr.discourse.group/t/weird-noise-like-patterns-appear-when-i-try-to-compose-layers/481/5 "2022-12-30T15:12:12Z")

</div>

I think `blend(DestinationAtop())` may give you what you expect, but I can’t say why 🙂

If you can read GLSL, here are the [blend shaders](https://github.com/openrndr/orx/tree/master/orx-fx/src/shaders/glsl/blend). And the [Visual glBlendFunc Tool](https://www.andersriggelsen.dk/glblendfunc.php) can help sometimes, but I’m not sure if it does in this case.

---

<div class="post-metadata">

**Author:** ![Asmodaios](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/asmodaios/32/455_2.png) [@Asmodaios](https://openrndr.discourse.group/u/Asmodaios)\
**Post date:** [December 30, 2022, 3:25pm UTC](https://openrndr.discourse.group/t/weird-noise-like-patterns-appear-when-i-try-to-compose-layers/481/6 "2022-12-30T15:25:05Z")

</div>

It does. Thank you!

I played around with more layers and found out that I can avoid the patterns by first moving the `drawer.clear` out of the composition, not using a layer for the “background”, i.e. the actual first layer that would use `Normal` as blending mode, and then using `DestinationAtop` wherever I would have assumed `Normal` would be the right choice.

---

<div class="post-metadata">

**Author:** ![Asmodaios](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/asmodaios/32/455_2.png) [@Asmodaios](https://openrndr.discourse.group/u/Asmodaios)\
**Post date:** [December 30, 2022, 3:25pm UTC](https://openrndr.discourse.group/t/weird-noise-like-patterns-appear-when-i-try-to-compose-layers/481/7 "2022-12-30T15:25:48Z")

</div>

> [@abe](#):
>
> If you can read GLSL, here are the [blend shaders](https://github.com/openrndr/orx/tree/master/orx-fx/src/shaders/glsl/blend). And the [Visual glBlendFunc Tool](https://www.andersriggelsen.dk/glblendfunc.php) can help sometimes, but I’m not sure if it does in this case.

I can not (yet), unfortunately. But the tool looks promising, thanks!

---

<div class="post-metadata">

**Author:** ![Asmodaios](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/asmodaios/32/455_2.png) [@Asmodaios](https://openrndr.discourse.group/u/Asmodaios)\
**Post date:** [December 30, 2022, 7:17pm UTC](https://openrndr.discourse.group/t/weird-noise-like-patterns-appear-when-i-try-to-compose-layers/481/8 "2022-12-30T19:17:33Z")

</div>

Unfortunately, this only seemed to work for some simple tests, or I maybe didn’t pay enough attention. While I do not yet fully understand what `DestinationAtop` does, it is no replacement for `Normal`. Here is an example:

```auto
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extra.compositor.blend
import org.openrndr.extra.compositor.compose
import org.openrndr.extra.compositor.draw
import org.openrndr.extra.compositor.layer
import org.openrndr.extra.fx.blend.DestinationAtop

fun main(args: Array<String>) = application {
    program {
        val composite = compose {
            draw {
                drawer.fill = ColorRGBa(1.0, 0.0, 0.0)
                drawer.rectangle(width / 3.0, 0.0, width / 3.0, height.toDouble())
            }

            layer {
                blend(DestinationAtop())
                draw {
                    drawer.fill = ColorRGBa.YELLOW
                    drawer.rectangle(0.0, height / 2.0 - 30, width.toDouble(), 60.0)
                }
            }
        }
        extend {
            drawer.clear(ColorRGBa.BLACK)
            composite.draw(drawer)
        }
    }
}

```

In the resulting image, the yellow rectangle is clipped at the borders of the red one, which it would not be when using `Normal()` which, even in this case, leads to the noise patterns.

Could this be an issue somewhere in my system stack, i.e. JVM, driver, OS etc.? I’m working on an M1 Mac, are there any known issue or is there some place where I could find something like that out?

---

<div class="post-metadata">

**Author:** ![Asmodaios](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/asmodaios/32/455_2.png) [@Asmodaios](https://openrndr.discourse.group/u/Asmodaios)\
**Post date:** [December 31, 2022, 9:44am UTC](https://openrndr.discourse.group/t/weird-noise-like-patterns-appear-when-i-try-to-compose-layers/481/9 "2022-12-31T09:44:06Z")

</div>

Okay, I finally managed to fix this issue simply by not calling `blend(...)` at all for layers that should be drawn normally 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![abe](https://yyz2.discourse-cdn.com/free1/user_avatar/openrndr.discourse.group/abe/32/700_2.png) [@abe](https://openrndr.discourse.group/u/abe)\
**Post date:** [December 31, 2022, 10:12am UTC](https://openrndr.discourse.group/t/weird-noise-like-patterns-appear-when-i-try-to-compose-layers/481/10 "2022-12-31T10:12:46Z")

</div>

Ha! Good to know! Sometimes less is more XD Thank you for sharing the solution 🙂