# Not so random Render Glitch

**URL:** <https://discourse.processing.org/t/not-so-random-render-glitch/14448>\
**Category:** Coding Questions\
**Created:** [October 5, 2019, 5:04pm UTC](https://discourse.processing.org/t/not-so-random-render-glitch/14448 "2019-10-05T17:04:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Coppice](https://avatars.discourse-cdn.com/v4/letter/c/b487fb/32.png) [@Coppice](https://discourse.processing.org/u/Coppice)\
**Post date:** [October 5, 2019, 5:04pm UTC](https://discourse.processing.org/t/not-so-random-render-glitch/14448/1 "2019-10-05T17:04:07Z")

</div>

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.

 ![glitch](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4073bb7252583995c06e1db49c1d8075aa02ce4e.png)

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

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

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

        fillSpikes();
    }

    @Override
    public void draw() {
        background.step();
        background.render();

        for(int i = 0; i < spikeCount; i++) {
            spikes[i].step();
            spikes[i].render();
        }

        ground.step();
        ground.render();
    }

```

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

```auto
    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,
                sketch.height);
    }

```

---

<div class="post-metadata">

**Author:** ![Coppice](https://avatars.discourse-cdn.com/v4/letter/c/b487fb/32.png) [@Coppice](https://discourse.processing.org/u/Coppice)\
**Post date:** [October 5, 2019, 5:04pm UTC](https://discourse.processing.org/t/not-so-random-render-glitch/14448/2 "2019-10-05T17:04:52Z")

</div>

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

 ![normal](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b00dba67caba82c0e2e4f49a780b4f8845a70649.png)

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [October 5, 2019, 8:11pm UTC](https://discourse.processing.org/t/not-so-random-render-glitch/14448/3 "2019-10-05T20:11:58Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Coppice](https://avatars.discourse-cdn.com/v4/letter/c/b487fb/32.png) [@Coppice](https://discourse.processing.org/u/Coppice)\
**Post date:** [October 5, 2019, 9:08pm UTC](https://discourse.processing.org/t/not-so-random-render-glitch/14448/4 "2019-10-05T21:08:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [October 7, 2019, 12:59am UTC](https://discourse.processing.org/t/not-so-random-render-glitch/14448/5 "2019-10-07T00:59:38Z")

</div>

Sorry, maybe “reset” wasn’t the right word.  
Maybe try to [clear()](https://processing.org/reference/clear_.html) the layer before drawing a new spike?

---

<div class="post-metadata">

**Author:** ![Coppice](https://avatars.discourse-cdn.com/v4/letter/c/b487fb/32.png) [@Coppice](https://discourse.processing.org/u/Coppice)\
**Post date:** [October 7, 2019, 4:33pm UTC](https://discourse.processing.org/t/not-so-random-render-glitch/14448/6 "2019-10-07T16:33:04Z")

</div>

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