Customized repetitions

When you apply a Repeat modifier to a shape, it makes copies of the original shape. The number of copies is controlled by the repetitions parameter. Since modifiers are live, changes you make to the original shape are propagated to all of the copies.

But what if you want to make each copy different? We can do this using Cuttle’s Customized Repetitions.

The “rep” Variable

When “Customize Each Repetition” is checked, any shape or modifier that comes before the repeat modifier will have access to a variable called rep. This variable holds the index of repetition, and can be used to differentiate the copies.

Let’s try using the rep variable in the Star shape’s points expression.

Now each star has a different number of points!

Note: The inspector always shows expression results from the first repetition, where rep === 0.

Example: Linear Scale

We can also use rep to customize Transforms. Here we apply a Linear Repeat to a Rectangle and use its rep variable to scale uniformly along the Y axis.

Example: Clock

Let’s use a Rotational Repeat to make a 12-hour clock.

First, drag out a Text component and add a Rotational Repeat modifier and set repetitions to 12 (the total number of hours).

Renaming “rep”

Like component and project parameters, the rep variable can be renamed. Double-click the rep variable and rename it hour.

Setting the text Expression

We can then click “⋯ → Edit Expression” next to the “text” parameter. In the expression, enter the name of our rep variable hour.

You’ll notice that the number on top reads “0” when it should be “12”. We can use JavaScript’s ternary operator to add a special case for this.

Write hour === 0 ? 12 : hour into the text expression. This means “If hour is 0, return 12, otherwise return hour”.

Alternatively, this can be written more verbosely as a multi-line expression:

if (hour === 0) return 12; return hour;

More Examples

Check out the Customized Repeat Examples project for more ideas!