animation with picture in the background

[Blue1987]

let us imagine I want to do an animation...
I use a Timage, grafico2, with a picture previously loaded.

then every T millisec I do some computations and then I call a procedure which paints in the image...

Code: [Select]

procedure disegna;
begin
  grafico2.Canvas.Pen.Width:=1;
  grafico2.Canvas.Pen.Color:=clred;
  grafico2.Canvas.Pen.Style:=psdot;
  grafico2.Canvas.brush.Style:=bsclear;
  grafico2.Canvas.Ellipse(20+pos_x,20+pos_x,140+pos_y,140+pos_y);
end;
then moving pos_x and pos_y I would like the ellipse to move (with the picture always on the background)... which command do I have to add at the beginning of the procedure?

[lainz]

let us imagine I want to do an animation...
I use a Timage, grafico2, with a picture previously loaded.

then every T millisec I do some computations and then I call a procedure which paints in the image...

Code: [Select]

procedure disegna;
begin
  grafico2.Canvas.Pen.Width:=1;
  grafico2.Canvas.Pen.Color:=clred;
  grafico2.Canvas.Pen.Style:=psdot;
  grafico2.Canvas.brush.Style:=bsclear;
  grafico2.Canvas.Ellipse(20+pos_x,20+pos_x,140+pos_y,140+pos_y);
end;
then moving pos_x and pos_y I would like the ellipse to move (with the picture always on the background)... which command do I have to add at the beginning of the procedure?

To use time you can use 'System' > 'TTimer' and add the code in OnTimer event.

Code: [Select]

procedure TForm1.Timer1Timer(Sender: TObject);
begin
  // add your code here
end;

[Blue1987]

let us imagine I want to do an animation...
I use a Timage, grafico2, with a picture previously loaded.

then every T millisec I do some computations and then I call a procedure which paints in the image...

Code: [Select]

procedure disegna;
begin
  grafico2.Canvas.Pen.Width:=1;
  grafico2.Canvas.Pen.Color:=clred;
  grafico2.Canvas.Pen.Style:=psdot;
  grafico2.Canvas.brush.Style:=bsclear;
  grafico2.Canvas.Ellipse(20+pos_x,20+pos_x,140+pos_y,140+pos_y);
end;
then moving pos_x and pos_y I would like the ellipse to move (with the picture always on the background)... which command do I have to add at the beginning of the procedure?

To use time you can use 'System' > 'TTimer' and add the code in OnTimer event.

Code: [Select]

procedure TForm1.Timer1Timer(Sender: TObject);
begin
  // add your code here
end;

you did not get the problem ;- )

I do not need the timer (but I could also use it)...

I need to erase what I drew at the time before without deleting the picture in the background...

[Blue1987]

with grafico2.refresh it doesn't work...

[lainz]

you did not get the problem ;- )

I do not need the timer (but I could also use it)...

I need to erase what I drew at the time before without deleting the picture in the background...

See here:
http://lazarus.freepascal.org/index.php/topic,12716.0.html

[typo]

http://en.wikipedia.org/wiki/Sprite_%28computer_graphics%29

[Blue1987]

you did not get the problem ;- )

I do not need the timer (but I could also use it)...

I need to erase what I drew at the time before without deleting the picture in the background...

See here:
http://lazarus.freepascal.org/index.php/topic,12716.0.html

thank you...
would you advise me to reload the picture every time with a "load from file" or to "keep the picture in memory" and then copy it to the canvas of the image?

[typo]

Keep it in memory.

[lainz]

thank you...
would you advise me to reload the picture every time with a "load from file" or to "keep the picture in memory" and then copy it to the canvas of the image?

Example with a PaintBox:

First add public variables.

Then load picture from file OnCreate event of Form1.

Then add a TPaintBox & TTimer, go OnTimer event.

Code: Pascal  [Select][+][-]

1.   public
2.       bmp: TBitmap;
3.       pos_x,pos_y: Integer;
4.   end;
5.  
6. var
7.   Form1: TForm1;
8.  
9. implementation
10.  
11. {$R *.lfm}
12.  
13. { TForm1 }
14.  
15. procedure TForm1.FormCreate(Sender: TObject);
16. begin
17.   bmp:= TBitmap.Create;
18.   bmp.LoadFromFile('image.bmp');
19.   pos_x:=1;
20.   pos_y:=1;
21. end;
22.  
23. procedure TForm1.Timer1Timer(Sender: TObject);
24. begin
25.   with PaintBox1.Canvas do begin
26.     Draw(0,0,bmp);
27.     Pen.Width:=1;
28.     Pen.Color:=clred;
29.     Pen.Style:=psdot;
30.     Brush.Style:=bsclear;
31.     Ellipse(20+pos_x,20+pos_x,140+pos_y,140+pos_y);
32.   end;
33.   pos_x:=pos_x+1;
34.   pos_y:=pos_y+1;
35. end;  

[lainz]

If you want to avoid flickering first save to a temp bitmap:

Code: Pascal  [Select][+][-]

1. procedure TForm1.Timer1Timer(Sender: TObject);
2. var
3.   tmpbmp: TBitmap;
4. begin
5.   tmpbmp:= TBitmap.Create;
6.   tmpbmp.Width:=PaintBox1.Width;
7.   tmpbmp.Height:=PaintBox1.Height;
8.   with tmpbmp.Canvas do begin
9.     Draw(0,0,bmp);
10.     Pen.Width:=1;
11.     Pen.Color:=clred;
12.     Pen.Style:=psdot;
13.     Brush.Style:=bsclear;
14.     Ellipse(20+pos_x,20+pos_x,140+pos_y,140+pos_y);
15.   end;
16.  
17.   PaintBox1.Canvas.Draw(0,0,tmpbmp);
18.   tmpbmp.Free;
19.  
20.   pos_x:=pos_x+1;
21.   pos_y:=pos_y+1;
22. end;

and if you want to stretch the picture in the size of the paintbox, just replace:

Code: [Select]

Draw(0,0,bmp);with

Code: [Select]

StretchDraw(PaintBox1.ClientRect,bmp);
Edit: This code can be very slow.

If you only want to move Ellipse, save the Ellipse in a bitmap with a transparent color. Use 2 TImage, one for the picture and other for the Ellipse.

ImageBackground
ImageEllipse

And move Ellipse changing Left,Top properties.

[Blue1987]

isn't it correct to do sth like this?

// at form create (after having created tempbmp1 and tempbmp2)

image1.loadfromfile('ciao.jpg')

tempbmp1.Canvas.CopyRect(
    Rect(0,0,160,160),
    image1.Canvas,
    Rect(0,0,160,160));

tempbmp2.Canvas.CopyRect(
    Rect(0,0,160,160),
    image1.Canvas,
    Rect(0,0,160,160));

// and then, during the application (at each cycle), doing sth like

tempbmp2.Canvas.CopyRect(
    Rect(0,0,160,160),
    tempbmp1.Canvas,
    Rect(0,0,160,160));

then drawing on tempbmp2 canvas with the pen
and finally...

image1.Canvas.CopyRect(
    Rect(0,0,160,160),
    tempbmp2.Canvas,
    Rect(0,0,160,160));

[Blue1987]

isn't it correct to do sth like this?

// at form create (after having created tempbmp1 and tempbmp2)

image1.loadfromfile('ciao.jpg')

tempbmp1.Canvas.CopyRect(
    Rect(0,0,160,160),
    image1.Canvas,
    Rect(0,0,160,160));

tempbmp2.Canvas.CopyRect(
    Rect(0,0,160,160),
    image1.Canvas,
    Rect(0,0,160,160));

// and then, during the application (at each cycle), doing sth like

tempbmp2.Canvas.CopyRect(
    Rect(0,0,160,160),
    tempbmp1.Canvas,
    Rect(0,0,160,160));

then drawing on tempbmp2 canvas with the pen
and finally...

image1.Canvas.CopyRect(
    Rect(0,0,160,160),
    tempbmp2.Canvas,
    Rect(0,0,160,160));

it doesn't work properly... can anyone explain me why??

[lainz]

isn't it correct to do sth like this?

// at form create (after having created tempbmp1 and tempbmp2)

image1.loadfromfile('ciao.jpg')

tempbmp1.Canvas.CopyRect(
    Rect(0,0,160,160),
    image1.Canvas,
    Rect(0,0,160,160));

tempbmp2.Canvas.CopyRect(
    Rect(0,0,160,160),
    image1.Canvas,
    Rect(0,0,160,160));

// and then, during the application (at each cycle), doing sth like

tempbmp2.Canvas.CopyRect(
    Rect(0,0,160,160),
    tempbmp1.Canvas,
    Rect(0,0,160,160));

then drawing on tempbmp2 canvas with the pen
and finally...

image1.Canvas.CopyRect(
    Rect(0,0,160,160),
    tempbmp2.Canvas,
    Rect(0,0,160,160));

it doesn't work properly... can anyone explain me why??

Try the code I posted before.

[Blue1987]

Try the code I posted before.

this is the code I tried, following your advices... (I hope I followed them correctly)

Code: [Select]

procedure TForm1.FormCreate(Sender: TObject);
begin
grafico2.picture.LoadFromFile('immagini' + pchar + 'sfondi' + pchar + 'grafico.jpg');
end;


procedure TForm1.grafico_confronti;
var
tempbmp: tbitmap;
begin

tempbmp:= TBitmap.Create;
tempbmp.Width:=160;
tempbmp.Height:=160;


if (switch_1 <> 0) or (puntatore_rapido <> 0) then begin
tempbmp.Canvas.Pen.Width:=1;
tempbmp.Canvas.Pen.Color:=clgray;
tempbmp.Canvas.Pen.Style:=psdot;
tempbmp.Canvas.brush.Style:=bsclear;
for i:=1 to 4 do begin
tempbmp.Canvas.Ellipse(i*20,i*20,160-i*20,160-i*20);
end;
end;


if switch_1<>0 then begin
                      if switch_1 < 19 then begin
                                            a[2]:=trunc(calciatore[squadra[partita.squadra].titolare[switch_1]].atletiche/20);
                                            a[4]:=trunc(calciatore[squadra[partita.squadra].titolare[switch_1]].tecniche/20);
                                            a[1]:=trunc(calciatore[squadra[partita.squadra].titolare[switch_1]].tattiche/20);
                                            a[5]:=trunc(calciatore[squadra[partita.squadra].titolare[switch_1]].mentali/20);
                                            a[3]:=trunc(calciatore[squadra[partita.squadra].titolare[switch_1]].estro/20);
                                            end
                      else begin
                                            a[2]:=trunc(calciatore[selezionati_ordinati[puntatore_selezionati+switch_1-19]].atletiche/20);
                                            a[4]:=trunc(calciatore[selezionati_ordinati[puntatore_selezionati+switch_1-19]].tecniche/20);
                                            a[1]:=trunc(calciatore[selezionati_ordinati[puntatore_selezionati+switch_1-19]].tattiche/20);
                                            a[5]:=trunc(calciatore[selezionati_ordinati[puntatore_selezionati+switch_1-19]].mentali/20);
                                            a[3]:=trunc(calciatore[selezionati_ordinati[puntatore_selezionati+switch_1-19]].estro/20);
                                            end;
jb:=0;
for i:=1 to 5 do jb:=jb+a[i];
jb:=5+trunc(20*jb/48);

tempbmp.Canvas.Pen.Style:=pssolid;
tempbmp.Canvas.Pen.Width:=1;
tempbmp.Canvas.Pen.Color:=clred;
for i:=1 to 5 do begin
tempbmp.Canvas.moveto(80+trunc(jb*cos(PI/2+2*PI/5*(i-1))),80+trunc(jb*sin(PI/2+2*PI/5*(i-1))));
tempbmp.Canvas.lineto(80+trunc((20+5*a[i])*cos(PI/2+2*PI/5*(i-0.5))),80+trunc((20+5*a[i])*sin(PI/2+2*PI/5*(i-0.5))));
tempbmp.Canvas.moveto(80+trunc((20+5*a[i])*cos(PI/2+2*PI/5*(i-0.5))),80+trunc((20+5*a[i])*sin(PI/2+2*PI/5*(i-0.5))));
tempbmp.Canvas.lineto(80+trunc(jb*cos(PI/2+2*PI/5*(i))),80+trunc(jb*sin(PI/2+2*PI/5*(i))));
end;
                      end;

if puntatore_rapido<>0 then begin
                      if puntatore_rapido < 19 then begin
                                            a[2]:=trunc(calciatore[squadra[partita.squadra].titolare[puntatore_rapido]].atletiche/20);
                                            a[4]:=trunc(calciatore[squadra[partita.squadra].titolare[puntatore_rapido]].tecniche/20);
                                            a[1]:=trunc(calciatore[squadra[partita.squadra].titolare[puntatore_rapido]].tattiche/20);
                                            a[5]:=trunc(calciatore[squadra[partita.squadra].titolare[puntatore_rapido]].mentali/20);
                                            a[3]:=trunc(calciatore[squadra[partita.squadra].titolare[puntatore_rapido]].estro/20);
                                            end
                      else begin
                                            a[2]:=trunc(calciatore[selezionati_ordinati[puntatore_selezionati+puntatore_rapido-19]].atletiche/20);
                                            a[4]:=trunc(calciatore[selezionati_ordinati[puntatore_selezionati+puntatore_rapido-19]].tecniche/20);
                                            a[1]:=trunc(calciatore[selezionati_ordinati[puntatore_selezionati+puntatore_rapido-19]].tattiche/20);
                                            a[5]:=trunc(calciatore[selezionati_ordinati[puntatore_selezionati+puntatore_rapido-19]].mentali/20);
                                            a[3]:=trunc(calciatore[selezionati_ordinati[puntatore_selezionati+puntatore_rapido-19]].estro/20);
                                            end;
jb:=0;
for i:=1 to 5 do jb:=jb+a[i];
jb:=5+trunc(20*jb/48);


tempbmp.Canvas.Pen.Style:=pssolid;
tempbmp.Canvas.Pen.Width:=1;
tempbmp.Canvas.Pen.Color:=clyellow;
for i:=1 to 5 do begin
tempbmp.Canvas.moveto(80+trunc(jb*cos(PI/2+2*PI/5*(i-1))),80+trunc(jb*sin(PI/2+2*PI/5*(i-1))));
tempbmp.Canvas.lineto(80+trunc((20+5*a[i])*cos(PI/2+2*PI/5*(i-0.5))),80+trunc((20+5*a[i])*sin(PI/2+2*PI/5*(i-0.5))));
tempbmp.Canvas.moveto(80+trunc((20+5*a[i])*cos(PI/2+2*PI/5*(i-0.5))),80+trunc((20+5*a[i])*sin(PI/2+2*PI/5*(i-0.5))));
tempbmp.Canvas.lineto(80+trunc(jb*cos(PI/2+2*PI/5*(i))),80+trunc(jb*sin(PI/2+2*PI/5*(i))));
end;
                      end;

if (switch_1 <> 0) or (puntatore_rapido <> 0) then begin
if (switch_1 <> 0) and (puntatore_rapido <> 0) then tempbmp.Canvas.Pen.Color:=$000080FF;
if (switch_1 = 0) and (puntatore_rapido <> 0) then tempbmp.Canvas.Pen.Color:=clyellow;
if (switch_1 <> 0) and (puntatore_rapido = 0) then tempbmp.Canvas.Pen.Color:=clred;
tempbmp.Canvas.Pen.Width:=1;
tempbmp.Canvas.Brush.Style:=bsclear;
tempbmp.Canvas.Ellipse(0,0,160,160);
end;

grafico2.Canvas.Draw(0,0,tempbmp);
tempbmp.Free;
end;


but the problem is that this code overwrites picture loaded previously in grafico2....

am I doing sth wrong?

[lainz]

maybe the background isn't transparent, to set bitmap transparency:

Code: [Select]

var
  tempbmp: TBitmap;
begin
  // Create Bitmap
  tempbmp:= TBitmap.Create;
  tempbmp.Width:= paintbox1.width;
  tempbmp.height:= paintbox1.height;

  // Set Transparent Color
  tempbmp.Transparent:=True;
  tempbmp.TransparentColor:=clFuchsia;

  // Fill Transparent Color
  tempbmp.Canvas.Pen.Color:=clFuchsia;
  tempbmp.Canvas.Brush.Color:=clFuchsia;
  tempbmp.Canvas.Rectangle(0,0,tempbmp.Width,tempbmp.Height);

  { Drawing code here }

  // Draw in PaintBox
  paintbox1.Canvas.Draw(0,0,tempbmp);

  // Free Memory
  tempbmp.Free;
end;     
or try to save the picture you are loading from file in a bitmap variable (like in the example):

Code: [Select]

...
bmp.LoadFromFile('image.bmp'); 
...
and draw the picture as background of tmpbmp:

Code: [Select]

...
tmpbmp.Canvas do begin 
    Draw(0,0,bmp);
...