How to control speed of a graphics loop?

Getting Started
1

I am drawing a circle moving across the screen. It’s continually redrawn in a new position inside a loop. How can I slow the loop to control the speed the circle seems to move from place to place? I tried using a while-wend that loops for a microsecond count before the next circle is drawn but this doesn’t work. It just takes longer to start drawing the circles but then they are all drawn at the same speed as without the while-wend loop.

What’s the easiest way to control the speed a loop is executed? I don’t see a Pause or Wait command and the microsecond count doesn’t work because the oval doesn’t seem to be drawn at the time the DrawOval command is executed but only after the whole loop finishes.

Thanks,
Edgar

2

Use a multiple timer. While/Wend is not appropriate to modern, event driven programming.

3

Thanks Michel but I’m a two day beginner. Could you explain how to do this please?

Many thanks,
Edgar

4

I would highly recommend you read the Xojo user guide, which you can find here: http://developer.xojo.com/userguide
If you prefer, there is a PDF version in your Xojo install (the folder named Documentation)

If you’re new to object oriented or event driven programming, there’s an intro to that here: http://xojo.com/learn/

5

Instead of placing your code into a while/wend loop, drag a timer from the library on the right of the IDE to the window.

  • It will show up in the project on the left as Timer1.
  • Right click on it, and select Add…/Event handler then select Action.
  • Add a property to the window. Let us call it myX as Integer
  • In the Paint event of your Canvas, use myX as position of the DrawOval
  • In the Action event of the timer, do something like

myX = myX + 10 Canvas1.Invalidate

This code will execute every period.

You control the speed of the animation with the period of the Timer (in the inspector it is 1000 as default which is one second) and the value of the increment.

6

Michel,

I added code below to the timer’s action but I only get a single circle drawn. Timer period is 1000 default.

dim myX as Integer

myX = myX + 10
me1.Invalidate
Graphics.DrawOval(myx,100,6,6)

7

DrawOval goes into the Paint event of the canvas :

g.DrawOval(myx,100,6,6)
8

[quote=257317:@Michel Bujardet]DrawOval goes into the Paint event of the canvas :

g.DrawOval(myx,100,6,6)

Or he can have a Picture , which the paint even will draw. So he will be able to access the Picture graphics from anywhere and call invalidate just to view it.

9

I did not want to complicate things. Using a picture would mean extra code.

10

Thanks Michel, I’m making some progress. The code below in the Timer1 action works, but myX is not recognized by any other action and if I declare it in another action it’s not the same variable. So I guess to do an animation of particles colliding I have to put all my code in the Timer1 action and declare all variables as static there so values are preserved between timer events. Or am I missing something?

static myX as integer
myX = myX + 10
Graphics.DrawOval(myx,100,6,6)

11

[quote=257338:@Edgar Owen]Thanks Michel, I’m making some progress. The code below in the Timer1 action works, but myX is not recognized by any other action and if I declare it in another action it’s not the same variable. So I guess to do an animation of particles colliding I have to put all my code in the Timer1 action and declare all variables as static there so values are preserved between timer events. Or am I missing something?

static myX as integer
myX = myX + 10
Graphics.DrawOval(myx,100,6,6)[/quote]

If you want to animate several things all together you actually need to calculate the values for every frame. This is a bit more complicated in the beginning. So for the start, I suggest to use a timer and properties you can access in your paint event.

So let’s say:
property x as integer
property y as integer

in the timer.action event
self.x=self.x+1
self.y=self.y+1
self.invalididate(false)

paint()
Graphics.DrawOval(self.x, self.y,6,6)

(you can omit “self”. I have used it to show you it’s not a local variable.)

If you got this working. You’d do what others have mentioned. Draw/cache the oval in a picture (use a property) and just move it by x,y for example in the paint event:
g.drawpicture self.mypic, self.x,self.y

here’s a very simple demo I just wrote for you:
https://www.dropbox.com/s/ax1p93nk0i090a3/simpleAnimation.xojo_binary_project?dl=0

12

A bit more complicated, but to make a really accurate animation (smooth), you should take frames into account. You can find an example on my blog:

http://alwaysbusycorner.com/2011/10/06/realbasic-canvas-tutorial-lesson-6/

13

[quote=257385:@Alain Bailleul]A bit more complicated, but to make a really accurate animation (smooth), you should take frames into account. You can find an example on my blog:

http://alwaysbusycorner.com/2011/10/06/realbasic-canvas-tutorial-lesson-6/[/quote]

Yeah. I had this in mind too but he’s just starting with Xojo.

14

[quote=257338:@Edgar Owen]static myX as integer
myX = myX + 10
Graphics.DrawOval(myx,100,6,6)[/quote]

Don’t declare it. Remove your static line.

Add it to the window as a property.

Then it will be accessible throughout.

To understand better,when you declare a variable in an event or method, it is available only within.

15

Many thanks to all of you who’ve been so generous with your time. I’m making progress. But how do I implement transparency? I do have a Power Mac so it should work but can’t figure out how to draw two overlapping transparent objects.

Thanks,
Edgar

16

[quote=257629:@Edgar Owen]Many thanks to all of you who’ve been so generous with your time. I’m making progress. But how do I implement transparency? I do have a Power Mac so it should work but can’t figure out how to draw two overlapping transparent objects.
[/quote]

Use transparent color. See Alpha at
http://documentation.xojo.com/index.php/color

17

Works, thank you so much Michel.

Edgar