Repeating an element X times with a specific offset

[pieterdd]

Motion Canvas is a pretty interesting approach to animation! I'm used to DaVinci Resolve which already is fairly powerful, but I really see the appeal of a scripted animation workflow.

I was wondering: what would be the most idiomatic way to create a repeating pattern? Ideally I'd have some kind of group element where I can set the number of horizontal/vertical repetitions along with their horizontal/vertical offset.

[aarthificial]

There is no Repeater node at the moment (although it would be nice to have)
Right now the preferred way of achieving this would be using range().
The example below will generate a 7x5 grid of rectangles, for example:

import {makeScene2D, Rect} from '@motion-canvas/2d';
import {waitFor, range} from '@motion-canvas/core';

export default makeScene2D(function* (view) {
  view.add(
    range(7).flatMap(x =>
      range(5).map(y => (
        <Rect
          x={(x - 3) * 240}
          y={(y - 2) * 240}
          size={180}
          fill={'white'}
        />
      )),
    ),
  );

  yield* waitFor(1);
});

[pieterdd]

That'd work for me, thanks!