Animating Background picture, while having a picture in front (and staying there)

[TigerFallOut]

What is it you are trying to achieve?
I have a picture with a background, and I want the background to change colours, while the picture on front stays there. (The background a bunch of triangles that meet in the (near)middle of the screen, the first on is green, the next blue, then green, etc.) I want the 2 colours to alternate (the green become blue for a sec, then back to green) so it looks like its flashing. There are also circles randomly between the 2 layers (the blue triangles, then circles, then green triangles)

I can't really describe it, you should just look at my 2 attachments.


What is the problem you are having?
Trying to keep the background in the background (while alternating colours), while there are other pictures on top. The background just goes right on top.


Describe what you have tried to solve this problem
- using a loop to alternate colours (that ends up filling the screen)
- using a process and fork. the process has the colours looping. (im pretty sure im doing something wrong), this succeeds in alternating colours, but the background is the whole picture. (and when it starts out, one of the triangles is supposed to be green, but starts out blue (but in the next loop its green)
- tried putting it in different spots.
- teacher did some complicated loop thing that made one colour alternate, but not the other set of triangles. (i coulnt get it to do the other set to change colours)


Post any relevant code (You may choose to attach the file instead of posting the code if it is too long)
*I dont want people in my class copying, i am not going to post the whole picture*


Please specify what version of Turing you are using
4.11

One other question
If you see my picture, i have a few stars. can you make them move off the screen? I know to animate it normally, you 'erase' it by redrawing it in the background colour, but my background is not a solid colour, how would you make it move?

[Tony]

The analogy you should be thinking of for animations are movie frames, from a cinema tape. That is, an animation is a sequence of frames, one after another.

code:

loop    draw background    draw foreground    clear* end loop

* Because you'll be drawing parts slower than the screen updates, you'll start getting incomplete frames. This will be especially apparent when clear's blank screen has a high contrast to the rest of the frame (will appear as flashing). This is fixable with offscreenonly and View.Update -- you can read about those after you get the frames to work.

[Beastinonyou]

Instead of using all those lines in the program, run the program once, with the one background image, and take an image of the entire thing, and save it as a .jpg or .bmp.

Then do that for the second background image.

Or you could just make a picture in turing after drawing the image once. No need for processes when you can do this:

Turing:

% Background 1 Lines of code var backGround1 : int := Pic.New (0, 0, maxx, maxy) cls % Background 2 Lines of Code var backGround2 : int := Pic.New (0, 0, maxx, maxy) cls % Domo Image lines of code var domoPic : int := Pic.New (280, 140, 475, 380) cls var counter : int process bgDelay      counter := 1      delay (500)      counter := 2      delay (500) end bgDelay View.Set ("offscreenonly") loop      if counter = 1 then           Pic.Draw (backGround1, 0, 0, picUnderMerge)      else           Pic.Draw (backGround2, 0, 0, picUnderMerge)      end if      fork bgDelay      Pic.Draw (domoPic, 280, 140, picMerge)      View.Update      % Possible Delay end loop

I haven't tried this with your entire code , but in theory, it should work. You could either create these pictures using Pic.New (), or load them externally using Pic.FileNew ().

Basically, You just create a picture for background 1 and 2, and a picture for domo. Then you stick it in a loop, and draw them. bgDelay is used for a 500ms delay between displaying the images. So it will draw backGround1, then delay without halting the program for 500ms, then counter becomes 2, which makes it draw the second background.

Notice the way I'm drawing the backGround pictures? using: picUnderMerge, which acts as it sounds,

Meanwhile, you're drawing Domo on top of the program. Lastly, you're eliminating flickering using View.Update (in conjunction with View.Set ("offscreenonly")). I suppose you could also add a small delay to that.

[TigerFallOut]

I forgot to mention that the the assignment needs me to actually draw my stuff (not just putting images in, trust me, i wanted to do that). But i figured out how to animate the background without it starting weirdly. I havent tried to put the bg into the bigger picture yet.

Do i need a process to get the background to stay at the back, instead of it coming to the front all the time?

EDIT: One question: Can someone explain to me what exactly is a process and a fork? And how do you use one? The teacher mentioned it, and told me to use one, but didnt really explain it.

[Dreadnought]

I really don't think that running concurrent processes is what you're looking for, especially if you're trying to keep the background in the back, since you have no way of telling the computer in what order, or with what priority to run the separate processes.

Tony's post pretty much says it all really. Make a loop that create frames. Draw the background first, then the foreground over top for each. Then call View.Update to update the entire run window at once. The idea is to not show the frame where the background covers the foreground. Here's some links that might be helpful.

Why avoid processes: http://compsci.ca/v3/viewtopic.php?t=7842
View.Update tutorial: http://compsci.ca/v3/viewtopic.php?t=12533
Turing Walkthrough: http://compsci.ca/v3/viewtopic.php?t=8808

Good luck.

[Zren]

If you ever go about doing this effect again, consider the following diagram:



While more complex, it's much more dynamic.

Basically you iterate (loop) over each section of the pie, while iterating over a list of colours. Drawing a section of a circle can be done with Draw.FillArc in Turing.

Things we need to know first however, is the radius of the circle. That can be found by finding the maximum distance to the edges of the screen. The maximum will be one of the 4 corners. In the diagram, the focal point (center of the circle) is slightly above and to the right the middle of the screen, so the bottom left is the furthest distance.

[Beastinonyou]

TigerFallOut @ Tue Nov 01, 2011 10:58 pm wrote:

I forgot to mention that the the assignment needs me to actually draw my stuff (not just putting images in, trust me, i wanted to do that).

So, The assignment needs you to manually draw all those. You've already done that. So Create a Picture In-Turing sort of speak, that way, say you needed to draw it again, you just use Pic.Draw ().

I don't see the point in messing around trying to get it to work without pictures. You just make it harder on your part.

I did suggest Pic.FileNew(), but since that is loaded externally, then just use:

Turing:

var picture : int := Pic.New (x1, y1, x2, y2)

Which creates a picture between those co-ordinates in Turing, and stores it in a variable.

If you really don't wish for convenience using pictures, then I would suggest procedures.

[TigerFallOut]

Thanks for your help and links. I've tried putting the whole thing in a loop, and adding if statements, but i think somethings missing.

In the loop before the picture

Turing:

var count:int:=0 loop count:=count+1 if (count=1) then draw Background1 elsif (count=2) then draw Background2 end if draw RestOfPicture

At the end i put

Turing:

if (count=1) then     count:=2 else     count:=1 end if end loop

The screen ends up flashing between different parts of the picture.

[Tony]

TigerFallOut @ Wed Nov 02, 2011 3:56 pm wrote:

The screen ends up flashing between different parts of the picture.

Tony @ Tue Nov 01, 2011 10:33 pm wrote:

* Because you'll be drawing parts slower than the screen updates, you'll start getting incomplete frames. This will be especially apparent when clear's blank screen has a high contrast to the rest of the frame (will appear as flashing). This is fixable with offscreenonly and View.Update -- you can read about those after you get the frames to work.

[TigerFallOut]

I think i got .

I tried earlier offscreenonly and one view.update, but turns out it works with 2 .

EDIT: er, now i have another problem. I'm trying to animate domo's eyes to blink at the same time, so i used a process earlier and forked them. but now it doesnt work. What should i use to correct this?

[Tony]

Not use process. It's fundamentally incompatible with with the idea of View.Update (unless you use synchronization; but using a procedure instead of a process is much easier to understand).

[TigerFallOut]

I tried using 2 procedures (1 for each eye), and putting them into a loop with a view.update. but only 1 eye blinks, the other eye doesnt ever show up

Turing:

View.Set ("graphics:640;480,offscreenonly") %domos body drawfillbox (280,140, 475, 380, 114) %domos left eye procedure lefteye loop     drawfilloval (320, 320, 15, 15, 16)     delay (1000)     drawfilloval (320, 320, 15, 15, 114)     Draw.ThickLine (305,320,335,320,3,16)     delay (220)     Draw.ThickLine (305,320,335,320,3,114) end loop end lefteye %domos right eye procedure righteye loop     drawfilloval (435, 320, 15, 15, 16)     delay (1000)     drawfilloval (435, 320, 15, 15, 114)     Draw.ThickLine (420,320,450,320,3,16)     delay (220)     Draw.ThickLine (420,320,450,320,3,114) end loop end righteye loop lefteye righteye View.Update end loop

What is synchronization in turing? and how do you use it?

[Tony]

when does the lefteye's loop exit, to give righteye a chance to draw anything?

[Beastinonyou]

Tony @ Wed Nov 02, 2011 6:05 pm wrote:

when does the lefteye's loop exit, to give righteye a chance to draw anything?

Exactly.

Why are the eye's even in their own loop, when they're also within the loop of the main program.

You enter a loop, then enter another loop to draw the left eye blinking. No exit condition...... How is it supposed to even reach the right eye?

[TigerFallOut]

Yeah, i realized i could put them both in one loop....

I got them to blink:

Turing:

%domo drawfillbox (280,140, 475, 380, 114) %blinking eyes loop     drawfilloval (320, 320, 15, 15, 16)     drawfilloval (435, 320, 15, 15, 16)     delay (1500)         drawfilloval (320, 320, 15, 15, 114)     Draw.ThickLine (305,320,335,320,3,16)         drawfilloval (435, 320, 15, 15, 114)     Draw.ThickLine (420,320,450,320,3,16)     delay (220)     Draw.ThickLine (305,320,335,320,3,114)     Draw.ThickLine (420,320,450,320,3,114) end loop

But how do i insert it into the main loop? do i just put it in without the loop, and let the main loop loop it? If i do that, how do i control the blinking speed?