Controlling drawing speed

Processing Coding Questions
1

Hi Folks,

I’m having a bit of an issue which I feel is probably simple but I’m just not getting it. I’m trying to make a simple Missile Control clone where missiles are drawn via a basic line drawing algorithm. They come down from the top of the screen to the bottom. This is the code I have created just as a proof of concept at this stage:

void drawMissiles() {
  stroke(255);
  float startX = random(0, width); //starting location of missile
  float targetX = random(0, width); //target location of the missle
  float dx = targetX-startX;
  float dy = GROUND-0; //ground is the bottom of the screen which is size(800, 600)
  PVector position = new PVector(startX, 0);
  PVector finish = new PVector(dx, dy);
  PVector speed = finish.setMag(0.01);
  while (position.y < GROUND) {
    point(position.x, position.y);
    position.add(speed);
  }
}

This is called from my game method which itself is called by the draw method. The problem is the speed control isn’t working. It just causes the whole game to slow down while each line still flashes on the screen like a lightning bolt. What I’m trying to do is make the points draw more slowly as they head towards the ground. Can anyone advise what I’m doing wrong here please?

Cheers!

1 Like
2

Hi @mews,

Welcome to the forum! :slight_smile:

Let’s suppose you have the following Processing program:

void drawMissiles() {
  // Loops infinitely
  while (true) {}
}

void setup() {
  size(500, 500);
}

void draw() {
  drawMissiles();

  // This is never reached
  circle(50, 50, 10);
}

The execution steps are:

  • The setup() function gets called at the beginning

  • At the first draw loop, the drawMissiles() function gets called and does a while loop that never finish (true is always true).

  • The circle function is never called since the draw() function is waiting for the drawMissiles function to finish.

This is to explain that if you call any function inside the draw() loop, it will wait until the function returns a value or finishes.

So in your code, you are increasing the position and drawing a point in the while loop but you see it flash on the screen because it does the while loop at each draw loop which is not what you want.

The draw loop is actually the main loop of your program so you need to use it in order to animate objects at each frame (since it’s called roughly 60 times per second). The update code is then called once every loop.

Check this other program:

PVector ballLocation;

void setup() {
  size(500, 500);
  
  ballLocation = new PVector(0, height / 2);
}

void draw() {
  background(255);
  
  // Move the ball
  ballLocation.x += 5;
  
  // Make it wrap when it goes out of screen
  if (ballLocation.x > width) ballLocation.x = 0;
  
  // Draw the ball
  fill(255, 0, 0);
  circle(ballLocation.x, ballLocation.y, 100);
}

ball_anim

So rather than making a while loop where I update the location of my ball, the draw loop does the job for me :wink:

One more thing is that you should use Object Oriented Programming which makes program structure more easy to work with. You can check an old post I wrote on this subject:

2 Likes
3

Thanks Josephh, this helped a lot. The bit I was really having trouble getting my head around was that any sub-method of draw() is going to be called every frame. I’ve since created a missile array and Missile class and only create Missile objects when there are under a certain amount. They’re dots rather than lines now but I’m sure I can fix that with a couple of arrays to store the historical position.

Cheers!

1 Like