How can I draw two shapes in a time sequence using Gloss?

Question

I have a simple window displaying two shapes like so:

import Graphics.Gloss

circles = pictures [Translate 80 0 one, Translate (-80) 0 two]

main = display (InWindow "t" (400,400) (800,0)) white circles

one = Color red $ Circle 80
two = Color blue $ Circle 50

I am new to Gloss, but from what I gather "display" just displays a static image once main (i.e. my module) is run so you cant make an animation using "display" right?

What I want to do is to run my program with these shapes, but instead of displaying them both at once, I want to first display one circle, the next second the other circle like some kind of animation.

So far I can only do something static and display both circles at once immediately when the program is run. But I want them to appear after each other like Run the program -> (0 sec) Blank screen -> (1 sec) One of the circles is drawn -> (2 sec) the other circle is drawn -> The window now displays circles until I close it.

This should be so simple using the "animate" function but I can't figure it out. If anyone is out there with knowledge, please consider helping! It would really make my day.

score 3 · Answer 1 · answered Feb 21 '17 at 18:18

You use animate in order to draw a picture depending on the animation time:

main = animate (InWindow "t" (400,400) (800,0)) white draw

draw :: Float -> Picture
draw t
   | t <= 1    = blank                                                -- in the first second
   | t <= 2    = pictures [Translate 80 0 one]                        -- between 1s and 2s
   | otherwise = pictures [Translate 80 0 one, Translate (-80) 0 two] -- afterwards

How can I draw two shapes in a time sequence using Gloss?

1 Answers1