Image distortion when changing p5.Image alpha

domportera

I'm getting a lot of image distortion when altering the alpha of an image. In my program, I try to fade one image on top of another, so it's sort of like a fade-in slideshow. the following is the code I use to do it: (sorry for the hard-to-read code, what's going on is essentially the program cycles through "num" values to indicate different images to be displayed. num values do not change while fades are occurring, though. All changes to the pixels[] array occur in the three for loops)

if (state == FADEIN){
        if(start){
            this.art[pnum].loadPixels();
            this.art[this.num].loadPixels();
            for(i = 3; i < this.art[this.num].width*this.art[this.num].height*4-1; i+= 4){ // changes occur here
                this.art[this.num].pixels[i] = 5;
            }
            this.art[this.num].updatePixels();
            start = false;
        }else{
            for(i = 3; i < this.art[this.num].width*this.art[this.num].height*4-1; i+= 4){ //changes occur here
                this.art[this.num].pixels[i] += changeRate;
            }
            this.art[this.num].updatePixels();
        }

        if(this.art[this.num].pixels[3] >= 255 - changeRate){
            for(i = 3; i < this.art[this.num].width*this.art[this.num].height*4-1; i+= 4){ //changes occur here
                this.art[this.num].pixels[i] = 255;
            }
            state = DISPLAY;
        }
    }
    if (state == FADEIN){ //draws previous image beneath image fading in
        this.art[pnum].loadPixels();
        image(this.art[pnum],relativeZero + width/3/2,height/2);
    }
    this.art[this.num].loadPixels();
    this.art[this.num].updatePixels();
    image(this.art[this.num],relativeZero + width/3/2,height/2); //draws image fading in
}

It seems the image coloration gets compressed and screwed up, even though I'm fairly certain I am only altering the alpha values of the pixels[] array. What could be the problem?

domportera

Thought: would using the tint() function provide better results, or would distortion be more prevalent?

EDIT: I'm trying this out right now, so the link I provided may have errors as I try to figure out the tint() function

domportera

So the tint() function provided great results, with no image distortion. It made transparency much easier, too, but that's besides the point. I removed the link because it no longer shows the problem.

Anyone know why the above code was distorting/compressing the image's colors?

PhiLho

You will get a higher chance of getting an answer if you can show a simple, complete sketch reproducing the problem, so we can run it.
Sometime, making such sketch even show you that the issue might be elsewhere... :-)