Not so random Render Glitch

I’ve been trying to recreate Flappy Bird using Processing within Java. Whenever I try to add spikes to it, it always will mess up with the sizes after the first 3 pairs of spikes (seems to be after spikeCount+1 pairs) and every now and then afterwards. If you know the problem or could help me fix my code, that would be great.

This is the “glitch”:
Picture of normal size in comments.

This is the code of my main class where the spikes are created:

    public void fillSpikes() {
        float xPos = this.width;
        for(int i = 0; i < spikeCount; i++) {
            spikes[i] = new Spike(this, speed, xPos);
            xPos = xPos + spikeGap;

    public void settings() {
        size(screenWidth, screenHeight);
        background = new Background(this, speed);
        ground = new Ground(this, speed);
        spikeGap = this.width / 2f;


    public void draw() {

        for(int i = 0; i < spikeCount; i++) {


And here is the code from the Spike class itself.
scaleX does stay the same all the time.

    public Spike(PApplet sketch, float speed, float xPos) {
        this.sketch = sketch;
        this.speed = speed;

        spikeX = xPos;
        // Point in the middle of the gap
        spikeY = sketch.random(sketch.height / 8f, 5f * (sketch.height / 8f));
        scaleX = sketch.width / 10.0f;

        gap = sketch.height / 4f;

        spikeTop = sketch.loadImage(imagePathTop);
        spikeBot = sketch.loadImage(imagePathBot);

    public float getX() {
        return spikeX;

    public float getWidth() {
        return scaleX;

    public void step() {
        spikeX = spikeX - speed;
        if(spikeX <= -(this.getWidth())) {
            spikeX = sketch.width;

    public void render() {
        sketch.image(spikeBot, spikeX, spikeY + gap / 2f, scaleX, sketch.height);
        sketch.image(spikeTop, spikeX, spikeY - gap / 2f - sketch.height, scaleX,
1 Like

This is what it is supposed to look like all the time.

My first guess is that you don’t “reset” the PGraphic, so your spike’s are simply repainting over themselves every frame.

However, I see a background.step line, but I don’t know what background is.

Are these all contained on different Layers?

1 Like

How do I reset it?
background refers to the background image, its class is very similar to the Spikes class as well as the Ground class. Their animation ( step() ) and drawing ( render() ) functions look like those in the Spike class. They all use the same PApplet sketch created in the MySketch class. I guess this means its all in one layer but I honestly dont know.

Edit: Using background(float rgb) as the first function within draw() seems to work.

1 Like

Sorry, maybe “reset” wasn’t the right word.
Maybe try to clear() the layer before drawing a new spike?

Clear wouldnt work as I use PImage ( not PGraphic ). At least I only found a clear() method for this class.