使用 Haskell 中的 Gloss 进行动画制作

Question

这是一个类似于以下图案的小型模式的代码（并非我所知道的最有效的代码）。现在，我想使用animate使stars旋转。但我不确定如何在一个程序中同时使用display和animate。任何帮助将不胜感激。谢谢。

import Graphics.Gloss

main = display (InWindow "Gloss" (700,700) (0,0))
           black (picture 100)
picture :: Float -> Picture
picture 0 = text "Value cannot be 0"
picture number = scale 6.5 6.5 (color rose $ drawpicture number)

orangered, orangered2, orangered3 :: Color
orangered = makeColor 1.0 0.251 0.0 0.7
orangered2 = makeColor 1.0 0.251 0.0 0.5
orangered3 = makeColor 1.0 0.251 0.0 0.3

intervalsmall = [0,11.25,22.5,33.75,45,56.25,67.5,78.75]
intervalbig = [0,22.5,45,67.5,90,112.5,135,157.5,180,202.5,225,247.5,270,292.5,315,337.5]
xlist = [2,4..50]
ylist = [0,2..48]

squares = pictures[rotate x (line [(-50,0),(0,50),(50,0),(0,-50),(-50,0)]) | x <- intervalsmall]
stars = pictures[rotate x ((pictures [line [(-8.5,0),(0,50),(8.5,0)],line[(0,50),(0,0)]])) | x <- intervalbig]
grid = pictures[line [(0,y),(x,50)] | x <- xlist, y <- ylist, x-y==2]
insidegrid = pictures[
    translate 0 (-50) grid,
    rotate 90 (translate 0 (-50) grid),
    rotate 180 (translate 0 (-50) grid),
    rotate 270 (translate 0 (-50) grid)]

drawpicture :: Float -> Picture
drawpicture number = pictures [
    color red (pictures [circle 50,circle 8.5]),
    line [(-50,-50),(-50,50),(50,50),(50,-50),(-50,-50)],
    squares,
    scale 0.7 0.7 squares,
    scale 0.49 0.49 squares,
    scale 0.347 0.347 squares,
    scale 0.242 0.242 squares,
    color orange stars,
    color orange (scale 0.178 0.178 stars),
    rotate 11.25 (scale 0.178 0.178 stars), 
    translate (-50) 0 grid,
    rotate 90 (Translate (-50) 0 grid),
    rotate 180 (Translate (-50) 0 grid),
    rotate 270 (Translate (-50) 0 grid),
    color orangered insidegrid,
    color orangered2 (rotate 45 insidegrid),
    color orangered3 (rotate 22.5 insidegrid),
    color orangered3 (rotate 67.5 insidegrid)
    ]

- Iceandele

Answer 1

如果你对每个视觉元素有单独的绘制函数，那么动画会更容易实现。但基本答案是：要想实现动画，只需使用animate函数并rotate所需“移动”的图片组件即可：

import Graphics.Gloss

main = animate (InWindow "Gloss" (700,700) (0,0))
           black picture

picture :: Float -> Picture
picture 0 = text "Value cannot be 0"
picture number = scale 6.5 6.5 (color rose $ drawpicture number)

orangered, orangered2, orangered3 :: Color
orangered = makeColor 1.0 0.251 0.0 0.7
orangered2 = makeColor 1.0 0.251 0.0 0.5
orangered3 = makeColor 1.0 0.251 0.0 0.3

intervalsmall = [0,11.25,22.5,33.75,45,56.25,67.5,78.75]
intervalbig = [0,22.5,45,67.5,90,112.5,135,157.5,180,202.5,225,247.5,270,292.5,315,337.5]
xlist = [2,4..50]
ylist = [0,2..48]

squares = pictures[rotate x (line [(-50,0),(0,50),(50,0),(0,-50),(-50,0)]) | x <- intervalsmall]
stars = pictures[rotate x ((pictures [line [(-8.5,0),(0,50),(8.5,0)],line[(0,50),(0,0)]])) | x <- intervalbig]
grid = pictures[line [(0,y),(x,50)] | x <- xlist, y <- ylist, x-y==2]
insidegrid = pictures[
    translate 0 (-50) grid,
    rotate 90 (translate 0 (-50) grid),
    rotate 180 (translate 0 (-50) grid),
    rotate 270 (translate 0 (-50) grid)]

rotVal :: Float -> Float
rotVal x = x - (x / (2*pi))

drawpicture :: Float -> Picture
drawpicture number = pictures [
    rot $ color red (pictures [circle 50,circle 8.5]),
    line [(-50,-50),(-50,50),(50,50),(50,-50),(-50,-50)],
    rot $ squares,
    rot $ scale 0.7 0.7 squares,
    rot $ scale 0.49 0.49 squares,
    rot $ scale 0.347 0.347 squares,
    rot $ scale 0.242 0.242 squares,
    rot $ color orange stars,
    rot (color orange (scale 0.178 0.178 stars)),
    rot (rotate 11.25 (scale 0.178 0.178 stars)),
    translate (-50) 0 grid,
    rotate 90 (Translate (-50) 0 grid),
    rotate 180 (Translate (-50) 0 grid),
    rotate 270 (Translate (-50) 0 grid),
    rot $ color orangered insidegrid,
    rot $ color orangered2 (rotate 45 insidegrid),
    rot $ color orangered3 (rotate 22.5 insidegrid),
    rot $ color orangered3 (rotate 67.5 insidegrid)
    ]
  where rot = rotate (rotVal number)

- Thomas M. DuBuisson

Answer 2

写出所有的内容太多了，但你只需要在图片函数中添加另一个参数，它是一个代表时间的Float。因此，display将被替换为animate。所以。

main = animate (InWindow "Gloss" (700,700) (0,0))
           black (picture 100)

picture :: Float -> Float -> Picture
picture number time = -- whatever you have to do

你需要修改你的辅助绘图函数，以接受这个时间参数。比如说，你想要每5秒旋转整个图形一次，你可以将传入的时间乘以一个角度系数angle = time*(pi*2/5)，然后使用三角函数计算出新的以中心为基准的x和y坐标。

- DiegoNolan