Quickstart

In this tutorial, you will build a first animation: a red point rotating around a center.

Creating a window

Creating a window is straightforward. We will start with default parameters:

import anim

W = anim.window('Simple animation')
W.show()

When you run this script, a small empty window should appear. You can close it either with the close button or with the Esc shortcut.

Creating an animation

To create a custom animation, define a child class of anim.plane.canva:

class myAnimation(anim.plane.canva):

  def __init__(self, window):

    # Call parent constructor
    super().__init__(window)

You can then add this animation to the window with anim.window.add():

# Create a window
W = anim.window('Simple animation')

# Add the animation
W.add(myAnimation)

# Display the window and start the animation
W.show()

If you run this script now, you should see an empty animation area in the window.

Populate the animation

Next, add visual elements to the scene. The constructor of your animation class is the right place to define them:

class myAnimation(anim.plane.canva):

  def __init__(self, window):

    super().__init__(window, boundaries=[[0,1],[0,1]])

    self.padding = 0.01

    self.x0 = 0.5
    self.y0 = 0.5
    self.R = 0.25
    self.r = 0.01

    self.add(anim.plane.ellipse, 'E0',
      position = [self.x0, self.y0],
      major = 0.005,
      minor = 0.005,
      colors = ('white', None),
    )

    self.add(anim.plane.circle, 'C0',
      position = [self.x0, self.y0],
      radius = self.R,
      colors = (None, 'grey'),
      thickness = 2,
      linestyle = '--'
    )

    self.add(anim.plane.circle, 'C',
      position = [self.x0 + self.R, self.y0],
      radius = self.r,
      colors = ('red', None),
    )

Define updates to create motion

An animation is a sequence of time steps, so you need to define what changes from one step to the next. This is done in the update method of anim.plane.canva:

import numpy as np

def update(self, t):

    # Update timer display
    super().update(t)

    # Update position
    x = self.x0 + self.R*np.cos(t.time)
    y = self.y0 + self.R*np.sin(t.time)
    self.item['C'].position = [x, y]

This sets the position of the C item to time-dependent coordinates defining a circular trajectory.

Final code

Putting everything together, the final script is:

 1import numpy as np
 2import anim
 3
 4# ═══ 2D Animation canva ═══════════════════════════════════════════════════
 5
 6class myAnimation(anim.plane.canva):
 7
 8  def __init__(self, window):
 9
10    super().__init__(window, boundaries=[[0,1],[0,1]])
11
12    self.padding = 0.01
13
14    self.x0 = 0.5
15    self.y0 = 0.5
16    self.R = 0.25
17    self.r = 0.01
18
19    self.add(anim.plane.ellipse, 'E0',
20      position = [self.x0, self.y0],
21      major = 0.005,
22      minor = 0.005,
23      colors = ('white', None),
24    )
25
26    self.add(anim.plane.circle, 'C0',
27      position = [self.x0, self.y0],
28      radius = self.R,
29      colors = (None, 'grey'),
30      thickness = 2,
31      linestyle = '--'
32    )
33
34    self.add(anim.plane.circle, 'C',
35      position = [self.x0 + self.R, self.y0],
36      radius = self.r,
37      colors = ('red', None),
38    )
39
40  def update(self, t):
41
42    # Update timer display
43    super().update(t)
44
45    # Update position
46    x = self.x0 + self.R*np.cos(t.time)
47    y = self.y0 + self.R*np.sin(t.time)
48    self.item['C'].position = [x, y]
49
50# ═══ Main ═════════════════════════════════════════════════════════════════
51
52# Create a window
53W = anim.window('Simple animation')
54
55# Add the animation
56W.add(myAnimation)
57
58# Display the window and start the animation
59W.show()

When you run this script, you should see the red point moving along a circular path. Congratulations 🎉, you have completed the quickstart tutorial.