Unable to get rid of visual artifacts in Processing sketch

Question

int numFrames = 5; //Number of animation frames
int frame = 0;
PImage[] images = new PImage[numFrames]; //Image array

void setup() 
{
    size(800, 800);
    background(180, 180, 180);
    frameRate(15); //Maximum 30 frames per second 
}

void draw() 
{
    images[0] = loadImage("Ayylmfao.0001.png");
    images[1] = loadImage("Ayylmfao.0002.png");
    images[2] = loadImage("Ayylmfao.0003.png");
    images[3] = loadImage("Ayylmfao.0004.png");
    images[4] = loadImage("Ayylmfao.0005.png");
    frame++;
        if (frame == numFrames) 
        {
            frame = 0;
        }

    image(images[frame], 0, 0);
}

So my problem is this: I keep getting an artifact from previous frames when I try to run this animation. I'm using an array to store the images in the animation because I'm trying to practice using arrays in general.

The animation is of an eyeball that blinks. The problem is, when it blinks all of the previous frames are drawn over. The iris of the eyeball disappears and the eyeball starts collecting artifacts from the previous frames.

Can you please provide us with the images you're using? Also, you shouldn't load images in the `draw()` function. Load them from the `setup()` function instead. — Kevin Workman, Jul 14 '16 at 19:32

score 1 · Accepted Answer · answered Jul 14 '16 at 20:40

As Kevin points out, you shouldn't load the images over and over again, multiple times per second in draw(). You should load them once in setup(), then render them in draw():

int numFrames = 5; //Number of animation frames
int frame = 0;
PImage[] images = new PImage[numFrames]; //Image array

void setup() 
{
    size(800, 800);
    background(180, 180, 180);
    frameRate(15); //Maximum 30 frames per second 
    images[0] = loadImage("Ayylmfao.0001.png");
    images[1] = loadImage("Ayylmfao.0002.png");
    images[2] = loadImage("Ayylmfao.0003.png");
    images[3] = loadImage("Ayylmfao.0004.png");
    images[4] = loadImage("Ayylmfao.0005.png");
}

void draw() 
{

    frame++;
        if (frame == numFrames) 
        {
            frame = 0;
        }

    image(images[frame], 0, 0);
}

So I figured it out. The background was being used only in the setup, then being drawn over. Thanks for the tip on the array though. — Thedancingpope Livesagain, Jul 21 '16 at 20:33

Unable to get rid of visual artifacts in Processing sketch

1 Answers1