<p>I don't think it's possible with repeater. You could do this with expressions and multiple duplicates of the shape however.</p>

<p>Here's an example I came up with:</p>

<p><img src="https://i.sstatic.net/wilKM.png" alt="enter image description here"></p>

<p>And here's how I did it:</p>

<ul>
<li><p>Firstly make your initial shape. Now duplicate that shape (with the shape selected hit<br>
<kbd>ctrl / ⌘</kbd>+<kbd>D</kbd>). You should see this:</p>

<p><img src="https://i.sstatic.net/spxW8.png" alt="enter image description here"></p>

<p>Note that we'll be making as many copies as we want later, but for the moment only make one, and get it set up so that we can duplicate it and not have to apply expressions to dozens of copies individually.</p></li>
<li><p>For each of the properties you want to alter with every repetition we'll add an <strong>Expression Control</strong> effect, as a handy way to be able to control the whole thing from a single slider.<br>
Say we wanted to alter the position, scale and rotation: we'd add a <strong>Point Control</strong> effect to control position another for scale, and an <strong>Angle Control</strong> for rotation. Expression controls are in <strong>Effects>Expression Controls></strong><br>
<img src="https://i.sstatic.net/7pCNy.png" alt="effect controls"></p></li>
<li><p>For ease of use rename each effect suitably. I've changed <em>"Point Control"</em> to <em>"offset"</em> and <em>"scale ctrl"</em>, and changed <em>"Angle Control"</em> to <em>"rotation"</em>:<br>
<img src="https://i.sstatic.net/XxZ2H.png" alt="enter image description here"></p></li>
<li><p>We're going to add expressions to control the <strong>transform>Position</strong> property, the <strong>Transform>Rotation</strong> property and the <strong>Transform>Scale</strong> property of each shape object. Note that this is the property inside the shape, not the Transform properties for the layer.<br>
<img src="https://i.sstatic.net/me1yb.png" alt="enter image description here"></p></li>
<li><p>In order to increment the rotation and scale etc. for each duplicate of the Polystar shape we have to find its index, or its serial number so to speak. With layers this is relatively easy, each layer has an <strong>index</strong> property, but shapes within a layer are layer sub-objects so we have to use a bit of magic to get the index of each. <a href="https://forums.creativecow.net/thread/227/25458" rel="nofollow noreferrer">This thread</a> is where I got the info I needed to work it out.</p>

<p>the key bit of the expression you need is this:</p>

<p><code>shapeIndex=thisProperty.propertyGroup(2).name.split(" ")[1]-1;</code></p>

<p>The variable shapeIndex now gives you a unique index for each duplicate that you create. This index can then drive the value of the various properties.</p></li>
</ul>

<blockquote>
  <p><em>Skip this section if you're not interested in how it works</em>  </p>
  
  <p>The expression <code>propertyGroup(2)</code> returns the string <code>"Polystar 2"</code> and we
  use javascript string function <code>split()</code> to split it on the space
  which returns an array <code>["Polystar", "2"]</code>.<br>
  We select the second member
  of that array (or member[1], since javascript numbers arrays starting
  at 0) which returns <code>"1"</code>. If javascript wasn't so sloppy with types we'd have to
  explicitly convert the string <code>"1"</code> into the integer <code>1</code>, but it does the
  conversion without even being told. Yay Javascript!</p>
</blockquote>

<ul>
<li><p>So to add an offset to each duplicated shape layer we then use the shapeIndex variable and the expression control. </p></li>
<li><p>Firstly we'll add an expression to the shape's <strong>Transform>Position</strong> property. <kbd>alt</kbd>-click on the stopwatch next to the property to set an expression for that property. It will look like this:<br>
<img src="https://i.sstatic.net/2EEKH.png" alt="enter image description here"></p></li>
<li><p>Delete what is there by default and paste in the shapeIndex variable definition mentioned above:<br>
<code>shapeIndex=thisProperty.propertyGroup(2).name.split(" ")[1]-1;</code><br>
hit <kbd>return</kbd> (not <kbd>enter</kbd>) to start a new line</p></li>
<li><p>Now use the pickwhip to get the value of the Expression Control Effect that we created for the offset:<br>
<img src="https://i.sstatic.net/MvTmH.png" alt="don&#39;t spare the pickwhip"></p></li>
<li><p>Now we multiply that offset by the shapeIndex variable. The expression should now look like this:  </p>

<p><code>shapeIndex=thisProperty.propertyGroup(2).name.split(" ")[1]-1;</code><br>
<code>effect("offset")("Point")*shapeIndex</code></p>

<p>So if your offset is [20, 20], then the fist duplicate will have an offset of [20,20], the next [20,20]*2 which is [40, 40], then [60, 60] and so on. You'll be able to change the value of this point control and have the duplicates update as you do it, without having to type any more code.</p></li>
<li><p>The same applies to rotation:</p>

<p><code>shapeIndex=thisProperty.propertyGroup(2).name.split(" ")[1]-1;</code><br>
<code>effect("rotation")("Angle")*shapeIndex;</code></p></li>
<li><p>And scale. Scale is a bit different because we want to increment the difference between 100 and the value of the controll - if the control is 110% we want to add 10% to the scale. And once we start adding vectors and scalars it gets more complicated - we have to unpack the array, and the integer and pack it up again. So we use this expression:</p>

<p><code>shapeIndex=thisProperty.propertyGroup(2).name.split(" ")[1]-1;</code><br>
<code>[100+ (effect("scale ctrl")("Point")[0]-100)*shapeIndex, 100+ (effect("scale ctrl")("Point")[1]-100)*shapeIndex];</code></p>

<p>If we only wanted uniform scale we could use a slider Expression Control effect, and the the same sort of expression we use for rotation:</p>

<p><code>shapeIndex=thisProperty.propertyGroup(2).name.split(" ")[1]-1;</code><br>
<code>(effect("scale ctrl")("Slider")/100)*shapeIndex;</code></p></li>
<li><p>Lastly we want to control the colour. Colour in AE is a four-element array [R, G, B, Alpha]. The individual components of the array are decimals from 0 to 1, where 1 is full on and 0 is off. So red is [1,0,0], yellow is [1,1,0] and mid grey is [0.5, 0.5, 0.5]. What you want to do with colour is up to you, but here's a demo. It fades out from red to green, with random variation on the blue channel. </p>

<p>Note that the shapeIndex definition in this expression is different. That's because the <code>color</code> property is nested down a level inside the <code>fill</code> property, so we have to use <code>propertyGroup(3)</code> instead of <code>propertyGroup(2)</code>.</p>

<p><code>shapeIndex=thisProperty.propertyGroup(3).name.split(" ")[1]-1;</code><br>
<code>seedRandom(shapeIndex, timeless = true);</code><br>
<code>r=value[0]-shapeIndex/25.6;</code><br>
<code>g=value[1]+shapeIndex/25.6;</code><br>
<code>b=random()</code><br>
<code>[r , g, b, 255]</code></p>

<p>The <code>seedRandom</code> function creates a new, unchanging random number for each copy. If the <code>timeless=true</code> part is changed to <code>timeless=false</code> the random number will change with every frame. Another randomising function is the <code>wiggle</code> function, that softly changes values over time.</p></li>
<li><p>So now your shape layer should have two shape objects in it, and the second one will have expressions like this:<br>
<img src="https://i.sstatic.net/cB29y.png" alt="enter image description here"></p>

<p><strong>Here's where the magic happens</strong></p></li>
<li>Now duplicate that second shape. If all goes well you should see new copies with offset, rotation and scale controlled by the expression control effects (make sure you have sane amounts for these values - the offset for example will default to half the width of the comp, which will move your duplicates out of sight. Try setting it to something like 50, 50 to start with). It should look something like the image at the start. Below is how the layer looks. 
<img src="https://i.sstatic.net/0H7ID.png" alt="enter image description here"></li>
</ul>

<p>One of the cool things about doing it this way is that the expression is actually based on the name of the shape object. So the layer order doesn't matter. As you can see here, the copies are in front of the original, I can move them around so that they're behind, or individually move them up or down. Using the name is a little bit kludgy though. If I rename one of the shapes I might break all the expressions that control it.</p>

<p>If that's all too hard to read, <a href="https://onedrive.live.com/redir?resid=5408802B7CF7224B!47711&amp;authkey=!ACkuHMqDVQ6SPYA&amp;ithint=file%2Czip" rel="nofollow noreferrer">here's the project</a></p>

CC BY-SA 3.0
2015-04-08T09:44:27.913Z
+1 for this nice explaination, but you are right - a project file is nice to have. I've asked a meta post, how to share project files: http://meta.video.stackexchange.com/questions/1444/how-to-upload-project-files
p2or
CC BY-SA 3.0
2015-04-08T04:28:35.130Z
2015-04-13T07:05:24.673Z
2015-04-13T07:05:24.673Z
stib
<p>I have a shape, in a shape layer, let's say a triangle. I apply a repeater to the shape, and I get lots of them. I can change the distance between them and their rotation ...<br>
My question is: Is there a way to change their color? I mean to control what fill or stroke color each of the cloned ones have? either a random color or even specified color for each?  </p>

<after-effects>
vary the color of repeated shape in After Effects
Ali
# vary the color of repeated shape in After Effects

(Asked by: username_0 on 2015-04-05)

I have a shape, in a shape layer, let's say a triangle. I apply a repeater to the shape, and I get lots of them. I can change the distance between them and their rotation ...  
My question is: Is there a way to change their color? I mean to control what fill or stroke color each of the cloned ones have? either a random color or even specified color for each?

**Tags:** after-effects


---

## 1 answers

### Answer by username_1 on 2015-04-08. Score: 3 | Accepted answer

I don't think it's possible with repeater. You could do this with expressions and multiple duplicates of the shape however.

Here's an example I came up with:

![enter image description here](https://i.sstatic.net/wilKM.png)

And here's how I did it:

* Firstly make your initial shape. Now duplicate that shape (with the shape selected hit  
  `ctrl / ⌘`+`D`). You should see this:

  ![enter image description here](https://i.sstatic.net/spxW8.png)

  Note that we'll be making as many copies as we want later, but for the moment only make one, and get it set up so that we can duplicate it and not have to apply expressions to dozens of copies individually.
* For each of the properties you want to alter with every repetition we'll add an **Expression Control** effect, as a handy way to be able to control the whole thing from a single slider.  
  Say we wanted to alter the position, scale and rotation: we'd add a **Point Control** effect to control position another for scale, and an **Angle Control** for rotation. Expression controls are in **Effects>Expression Controls>**  
  ![effect controls](https://i.sstatic.net/7pCNy.png)
* For ease of use rename each effect suitably. I've changed *"Point Control"* to *"offset"* and *"scale ctrl"*, and changed *"Angle Control"* to *"rotation"*:  
  ![enter image description here](https://i.sstatic.net/XxZ2H.png)
* We're going to add expressions to control the **transform>Position** property, the **Transform>Rotation** property and the **Transform>Scale** property of each shape object. Note that this is the property inside the shape, not the Transform properties for the layer.  
  ![enter image description here](https://i.sstatic.net/me1yb.png)
* In order to increment the rotation and scale etc. for each duplicate of the Polystar shape we have to find its index, or its serial number so to speak. With layers this is relatively easy, each layer has an **index** property, but shapes within a layer are layer sub-objects so we have to use a bit of magic to get the index of each. [This thread](https://forums.creativecow.net/thread/227/25458) is where I got the info I needed to work it out.

  the key bit of the expression you need is this:

  `shapeIndex=thisProperty.propertyGroup(2).name.split(" ")[1]-1;`

  The variable shapeIndex now gives you a unique index for each duplicate that you create. This index can then drive the value of the various properties.

> *Skip this section if you're not interested in how it works*
>
> The expression `propertyGroup(2)` returns the string `"Polystar 2"` and we
> use javascript string function `split()` to split it on the space
> which returns an array `["Polystar", "2"]`.  
> We select the second member
> of that array (or member[1], since javascript numbers arrays starting
> at 0) which returns `"1"`. If javascript wasn't so sloppy with types we'd have to
> explicitly convert the string `"1"` into the integer `1`, but it does the
> conversion without even being told. Yay Javascript!

* So to add an offset to each duplicated shape layer we then use the shapeIndex variable and the expression control.
* Firstly we'll add an expression to the shape's **Transform>Position** property. `alt`-click on the stopwatch next to the property to set an expression for that property. It will look like this:  
  ![enter image description here](https://i.sstatic.net/2EEKH.png)
* Delete what is there by default and paste in the shapeIndex variable definition mentioned above:  
  `shapeIndex=thisProperty.propertyGroup(2).name.split(" ")[1]-1;`  
  hit `return` (not `enter`) to start a new line
* Now use the pickwhip to get the value of the Expression Control Effect that we created for the offset:  
  ![don't spare the pickwhip](https://i.sstatic.net/MvTmH.png)
* Now we multiply that offset by the shapeIndex variable. The expression should now look like this:

  `shapeIndex=thisProperty.propertyGroup(2).name.split(" ")[1]-1;`  
  `effect("offset")("Point")*shapeIndex`

  So if your offset is [20, 20], then the fist duplicate will have an offset of [20,20], the next [20,20]\*2 which is [40, 40], then [60, 60] and so on. You'll be able to change the value of this point control and have the duplicates update as you do it, without having to type any more code.
* The same applies to rotation:

  `shapeIndex=thisProperty.propertyGroup(2).name.split(" ")[1]-1;`  
  `effect("rotation")("Angle")*shapeIndex;`
* And scale. Scale is a bit different because we want to increment the difference between 100 and the value of the controll - if the control is 110% we want to add 10% to the scale. And once we start adding vectors and scalars it gets more complicated - we have to unpack the array, and the integer and pack it up again. So we use this expression:

  `shapeIndex=thisProperty.propertyGroup(2).name.split(" ")[1]-1;`  
  `[100+ (effect("scale ctrl")("Point")[0]-100)*shapeIndex, 100+ (effect("scale ctrl")("Point")[1]-100)*shapeIndex];`

  If we only wanted uniform scale we could use a slider Expression Control effect, and the the same sort of expression we use for rotation:

  `shapeIndex=thisProperty.propertyGroup(2).name.split(" ")[1]-1;`  
  `(effect("scale ctrl")("Slider")/100)*shapeIndex;`
* Lastly we want to control the colour. Colour in AE is a four-element array [R, G, B, Alpha]. The individual components of the array are decimals from 0 to 1, where 1 is full on and 0 is off. So red is [1,0,0], yellow is [1,1,0] and mid grey is [0.5, 0.5, 0.5]. What you want to do with colour is up to you, but here's a demo. It fades out from red to green, with random variation on the blue channel.

  Note that the shapeIndex definition in this expression is different. That's because the `color` property is nested down a level inside the `fill` property, so we have to use `propertyGroup(3)` instead of `propertyGroup(2)`.

  `shapeIndex=thisProperty.propertyGroup(3).name.split(" ")[1]-1;`  
  `seedRandom(shapeIndex, timeless = true);`  
  `r=value[0]-shapeIndex/25.6;`  
  `g=value[1]+shapeIndex/25.6;`  
  `b=random()`  
  `[r , g, b, 255]`

  The `seedRandom` function creates a new, unchanging random number for each copy. If the `timeless=true` part is changed to `timeless=false` the random number will change with every frame. Another randomising function is the `wiggle` function, that softly changes values over time.
* So now your shape layer should have two shape objects in it, and the second one will have expressions like this:  
  ![enter image description here](https://i.sstatic.net/cB29y.png)

  **Here's where the magic happens**
* Now duplicate that second shape. If all goes well you should see new copies with offset, rotation and scale controlled by the expression control effects (make sure you have sane amounts for these values - the offset for example will default to half the width of the comp, which will move your duplicates out of sight. Try setting it to something like 50, 50 to start with). It should look something like the image at the start. Below is how the layer looks.
  ![enter image description here](https://i.sstatic.net/0H7ID.png)

One of the cool things about doing it this way is that the expression is actually based on the name of the shape object. So the layer order doesn't matter. As you can see here, the copies are in front of the original, I can move them around so that they're behind, or individually move them up or down. Using the name is a little bit kludgy though. If I rename one of the shapes I might break all the expressions that control it.

If that's all too hard to read, [here's the project](https://onedrive.live.com/redir?resid=5408802B7CF7224B!47711&authkey=!ACkuHMqDVQ6SPYA&ithint=file%2Czip)

> **Comments:**
> **username_2**: +1 for this nice explaination, but you are right - a project file is nice to have. I've asked a meta post, how to share project files: http://meta.video.stackexchange.com/questions/1444/how-to-upload-project-files  

---

