Draw() is lagging and not following frameRate

Processing Coding Questions
1

I’m making an application using Processing-2. This means using the draw() method to generate GUI. However something messes with the frameRate of the program making it feel way slower and very laggy/choppy. I know my frameRate works, since at the start and beginning of the program, the frameRate is fine, but once my arrows start spawning, it feels like it drops to a solid 5fps.

This is the code i have to spawn the images I have

public void addArrow() {
    int direction = (int)(Math.random()*4);
    if (direction == 0) {
        Arrow newArrow = new Arrow(40, 600, 25);
        leftArrows.add(newArrow);
    } else if (direction == 1) {
        Arrow newArrow = new Arrow(180, 600, 25);
        downArrows.add(newArrow);
    } else if (direction == 2) {
        Arrow newArrow = new Arrow(320, 600, 25);
        upArrows.add(newArrow);
    } else if (direction == 3) {
        Arrow newArrow = new Arrow(460, 600, 25);
        rightArrows.add(newArrow);
    }
}

public void drawAll() {
    draw(leftArrows, 0);
    draw(downArrows, 1);
    draw(upArrows, 2);
    draw(rightArrows, 3);
    drawStationaryArrows();
}
public void draw(ArrayList<Arrow> arrows, int direction) {
    for(int i = 0; i < arrows.size(); i++) {
        Arrow arrow = arrows.get(i);
        if (direction == 0) window.image(left, arrow.x, arrow.y, 100, 100);
        if (direction == 1) window.image(down, arrow.x, arrow.y, 100, 100);
        if (direction == 2) window.image(up, arrow.x, arrow.y, 100, 100);
        if (direction == 3) window.image(right, arrow.x, arrow.y, 100, 100);
        arrow.move();
        arrow.checkIfDead();
        if (!arrow.isAlive()) arrows.remove(arrow);
    }
}

This block of code calls the above code from the runnable class:

public void draw() {
		if (mp3.player.isComplete() == false) { ////
			background(222);
			text("Use arrow keys or highlighed buttons", 60, 300);
			text("A", 90, 170);
			text("S", 220, 170);
			text("D", 350, 170);
			text("F", 480, 170);
			
			counter++;
			System.out.println(counter);
			
			if (counter == 8) {
				counter = 0; 
				spawner.addArrow();
			}
			
			spawner.drawAll();
			
			
			//display score
			fill(fontColor);
			text("Score: " + score, 450, 550);
		}
		
		if(mp3.player.isComplete() == true) {		//fix code so that the end of the music is the end of the game
			gameOver = true;
			mp3.close();
			background(222);
			text("Game Over!\nYou scored " + score + " points.", 200, 200);
		}
		
	
	}

My setup method is also here, i set the frameRate a bit too fast but just for testing purposes

	public void setup() {
		size(600, 600);
		
		spawner = new FloatingArrowSpawner(this, 40, 600);
		frameRate(217);
			
		score = 0;
		counter = 0;
		rand = 0;
		gameOver = false;
		
		scoreFont = createFont("IMPACT", 32);
		textFont(scoreFont);
		fontColor = color(240, 128, 128);
		
		filename = "C:\\Users\\PC\\eclipse-workspace\\ics_final2018\\src\\audio.mp3";
        mp3 = new MP3(filename);
        mp3.play();
	}

For some context, I am trying to make Dance Dance Revolution.

Any help is appreciated, I’ve been trying to solve this for hours.

1 Like
2

Small update, it seems like mp3.play(); is causing the lag. Really strange. I need audio in this project tho, not sure of theres a workaround. Pretty much adding mp3.close(); fixes the lag, but then theres no music and causes out of bound exceptions with the amount of arrows spawned since it no longer stops to the music.

3

Have you tried uncommenting all the individual arrow functions or leaving just one? Who knows if the arrows are the problem.

I have also noticed that you’re using Processing 2 (as you wrote in the title), is there any reason behind why you’re not using Processing 3?

Back to the arrows, maybe those images are too big, Processing struggles with rendering very large images and your framerate might drop considerably.

Also, here’s a tip: use delta time in games. Let me explain what dt is.

int ms1;
int ms2;
int dt;

void draw() {
  ms1 = millis();
  // run your game code here
  ms2 = millis();
  dt = max(ms2 - ms1, 60/1000); // replace 60 with your expected framerate
}

dt can help speed up the pace of the game on old PCs that are not powerful enough to run the game at normal framerate (60 fps). Now replace your movements in the game from (for example) x += 5; to x += dt * 5. This will speed up movement in the game accordingly to your framerate.

1 Like
4

Have you tried uncommenting all the individual arrow functions or leaving just one? Who knows if the arrows are the problem.

Yep, and i realized it was having mp3.play(); I didnt remove the line but instead added a line to close it to debug, this works well interms of FPS, but theres no more music and the index gets all messed up since its no longer going to stop based on the mp3 duration.

public void draw() {
		if (mp3.player.isComplete() == false) { ////
			mp3.close();
			background(222);
			text("Use arrow keys or highlighed buttons", 60, 300);
			text("A", 90, 170);
			text("S", 220, 170);
			text("D", 350, 170);
			text("F", 480, 170);
			
			counter++;
			System.out.println(counter);
			
			if (counter == 15) {
				counter = 0; 
				spawner.addArrow();
			}
			
			spawner.drawAll();
			
			
			//display score
			fill(fontColor);
			text("Score: " + score, 450, 550);
		}
		
		if(mp3.player.isComplete() == true) {		//fix code so that the end of the music is the end of the game
			gameOver = true;
			mp3.close();
			background(222);
			text("Game Over!\nYou scored " + score + " points.", 200, 200);
		}
		
	
	}

I have also noticed that you’re using Processing 2 (as you wrote in the title), is there any reason behind why you’re not using Processing 3?

I came back to this project after sometime, released it was processing-2, I’m not sure how to switch to 3 without breaking anything. but as far as i know PApplet doesnt work anymore and my project uses it alot.