# Horrible fringing artefacts

**URL:** <https://discourse.processing.org/t/horrible-fringing-artefacts/12077>\
**Category:** Coding Questions\
**Created:** [June 15, 2019, 6:45am UTC](https://discourse.processing.org/t/horrible-fringing-artefacts/12077 "2019-06-15T06:45:11Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![zenglenn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zenglenn/32/5569_2.png) [@zenglenn](https://discourse.processing.org/u/zenglenn)\
**Post date:** [June 15, 2019, 6:45am UTC](https://discourse.processing.org/t/horrible-fringing-artefacts/12077/1 "2019-06-15T06:45:11Z")

</div>

Hi,  
I’m having this problem when using this particular process of drawing an image multiple times to the screen. I’m getting either white or black fringing, depending on which renderer I use (Default / OpenGL). I imagine this is something to do with premultiplied alpha.

The code below replicates the problem.

What I find strange is that every time a new image is drawn, the previous images on the screen are still having their ‘fringe’ effect increased. Seems like some sort of OpenGL memory buffer thing.

PGraphics pg;  
PImage img;  
void setup(){  
size(800,800,OPENGL);  
background(0);

pg=createGraphics(800,800,OPENGL);  
img=createImage(800,800,ARGB);  
pg.beginDraw();  
pg.noStroke();  
pg.fill(200,0,0);  
pg.ellipse(400,400,300,300);  
pg.endDraw();  
frameRate(1);  
}

void draw(){  
float x=map(random(1),0,1,-300,300);  
float y=map(random(1),0,1,-300,300);  
img.copy(pg,0,0,800,800,int(x),int(y),800,800);  
image(img,0,0);  
}

 ![59](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/ca409b610313e59be5db378c3113208e7727bb61.jpeg)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [June 15, 2019, 11:53am UTC](https://discourse.processing.org/t/horrible-fringing-artefacts/12077/2 "2019-06-15T11:53:28Z")

</div>

You are not clearing the background between frames so any anti-aliasing will be lost as _fringe_ pixels are constantly becoming more opaque.

---

<div class="post-metadata">

**Author:** ![zenglenn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zenglenn/32/5569_2.png) [@zenglenn](https://discourse.processing.org/u/zenglenn)\
**Post date:** [June 15, 2019, 1:48pm UTC](https://discourse.processing.org/t/horrible-fringing-artefacts/12077/3 "2019-06-15T13:48:07Z")

</div>

Yes that is intentional - I want to repeatedly draw on top of the screen to build up a final image. Is there a better way to do this that doesn’t have the fringe problem?

---

<div class="post-metadata">

**Author:** ![KTibow](https://avatars.discourse-cdn.com/v4/letter/k/3e96dc/32.png) [@KTibow](https://discourse.processing.org/u/KTibow)\
**Post date:** [June 15, 2019, 1:56pm UTC](https://discourse.processing.org/t/horrible-fringing-artefacts/12077/4 "2019-06-15T13:56:33Z")

</div>

Use an array or other data structure to keep track of what your old drawing was. In psuedocode, your code would look like:

1. Create data structure.

2. Render data structure.

3. Do thing.

4. Add thing to data structure.

5. Repeat.

---

<div class="post-metadata">

**Author:** ![zenglenn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zenglenn/32/5569_2.png) [@zenglenn](https://discourse.processing.org/u/zenglenn)\
**Post date:** [June 15, 2019, 2:41pm UTC](https://discourse.processing.org/t/horrible-fringing-artefacts/12077/5 "2019-06-15T14:41:41Z")

</div>

Could you clarify?  
Do you mean create an array of screen pixels and then add new image to it using a method that does it pixel by pixel - bypassing all OpenGL stuff? Seems a pain!

I tried writing to a screen buffer, but still same result…

PGraphics pg, buffer;  
PImage img;  
void setup() {  
size(800, 800, OPENGL);  
background(0);

pg=createGraphics(800, 800, OPENGL);  
buffer=createGraphics(800, 800, OPENGL);  
img=createImage(800, 800, ARGB);  
pg.beginDraw();  
pg.noStroke();  
pg.fill(200, 0, 0);  
pg.ellipse(400, 400, 300, 300);  
pg.endDraw();  
frameRate(1);  
}

void draw() {  
background(0);  
float x=map(random(1), 0, 1, -300, 300);  
float y=map(random(1), 0, 1, -300, 300);  
buffer.beginDraw();  
buffer.copy(pg, 0, 0, 800, 800, int(x), int(y), 800, 800);  
buffer.endDraw();  
image(buffer, 0, 0);  
}

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [June 15, 2019, 3:04pm UTC](https://discourse.processing.org/t/horrible-fringing-artefacts/12077/6 "2019-06-15T15:04:57Z")

</div>

> [@zenglenn](#):
>
> I imagine this is something to do with premultiplied alpha.

Well, lack of it! Processing blending in OpenGL when using multiple surfaces is broken because of the lack of support for premultiplied alpha. It ignores the fact that output of OpenGL blending operations is premultiplied and treats it as if it isn’t (ie. multiplies it again)

Out of interest, why are you using copy() vs image()?

---

<div class="post-metadata">

**Author:** ![zenglenn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zenglenn/32/5569_2.png) [@zenglenn](https://discourse.processing.org/u/zenglenn)\
**Post date:** [June 15, 2019, 3:23pm UTC](https://discourse.processing.org/t/horrible-fringing-artefacts/12077/7 "2019-06-15T15:23:05Z")

</div>

Yeah I thought is was a buggy thing with OpenGL in Processing.  
I was using copy() to see if it was any different from image() blend() etc…  
Think I’ll just write my own pixel level method for adding an image to the screen. At least I know it will work.

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [June 15, 2019, 3:37pm UTC](https://discourse.processing.org/t/horrible-fringing-artefacts/12077/8 "2019-06-15T15:37:38Z")

</div>

> [@zenglenn](#):
>
> Think I’ll just write my own pixel level method for adding an image to the screen. At least I know it will work.

Well, it’s not that difficult to extend the built in renderers to support this either - [praxis/praxis.video.pgl/src/org/praxislive/video/pgl/PGLGraphics.java at master · praxis-live/praxis · GitHub](https://github.com/praxis-live/praxis/blob/master/praxis.video.pgl/src/org/praxislive/video/pgl/PGLGraphics.java)

---

<div class="post-metadata">

**Author:** ![zenglenn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zenglenn/32/5569_2.png) [@zenglenn](https://discourse.processing.org/u/zenglenn)\
**Post date:** [June 15, 2019, 4:07pm UTC](https://discourse.processing.org/t/horrible-fringing-artefacts/12077/9 "2019-06-15T16:07:17Z")

</div>

Interesting, thanks for that.