Uniform scale wiggle expression WITH loop

[GM Rod]

Hey guys!

I’m trying to achieve this (attached image).
So the way I’m tackling it, is I create the triangles in Illustrator, then properly prepare for export into After Effects.
Once in AE, I import, convert to layered comp and all that jazz.
But, since it’s so many of them, it’s tedious, slow and just…
It just feels like I’m trying to brute-force something that probably has a better, smarter way to accomplish.
I’ve thought of doing it using repeaters, but that doesn’t work because whatever effect I apply to the original is going to get replicated to the copies. Unless there’s some expression or some other way to have it NOT do that?
I’ve also found plenty of posts about uniform scale wiggle + loop, but I couldn’t get any of them to work because none of the replies I’ve found, have both the uniform scale + wiggle AND the loop in one tidy expression. There’s a good chance I’m failing at putting these together.

So to explain better, what I want to see happen is:
– Screen filled with the triangles
– Each one, independently and randomly, changes size via uniform scale wiggle (unless there’s a better way?)
– When I get that done, I’ll use a fractal displacement map to control their opacity, so like in that picture, some of them disappear. Or maybe just by wiggling radically, that’d happen already? As in if the scale can be dropped to 0% for instance.

Help?

[angie_taylor]

Don't convert t o layered comp in AE. Select the layer in illustrator and choose "release to layers - sequence" (or build). This will create layers from the artwork. Drag these out from the main layer and save it. Then import this into AE as a composition - retail layer size. Then you can animate it with expressions.

with this king of thing adding "index" to each layer's expression can make each one slightly different than the previous one. It returns the layer number so you can use the layer number as a kind of random seed value.

[GM Rod]

For this one, I'm not sure how I'd go about doing the index thing, but this sounds like it's heading in the right direction!

[angie_taylor]

Check out my expressions course here. Theres a tutorial in the course that covers it. https://linkedin-learning.pxf.io/7V9bQ

[angie_taylor]

Also, have you checked out the Card Wipe, Card Dance and Repetile effects? One of these might be a better approach than animating each item as a separate layer? There's also grid options in the Particle Playground effect which could be used to create this kind of effect. .y vote is for Card Dance as you can use fractal noise animation to displace the tiles randomly, instead of using expressions.

[GM Rod]

Thanks for the replies!

Ok let's see.

Card Dance doesn't work because it splits up my object. The triangle gets cut in half which is not what I'm going for.

The card wipe doesn't work because it flips my object. Also not what I need.

Repetile SORTA works, but I can't control how far from each other the copies are.

I've only successfully placed them where they need to be, in one of two ways.

Either via repeater (because the object is a shape layer), or by painstakingly duplicating layers all over the place.

I managed to do it this way and then apply scale expressions to all of them, but I can't get them to both loop and uniform scale. I have two expressions here that work, but it's either/or. I either have them scaling uniformly, OR looping seamlessly.

[angie_taylor]

You can adjust the tile size in Card Dance so that it doesn't cut the triangle in half. Please send me your Illustrator file and I'll create an example for you.

[GM Rod]

Also, even if any of the three effects worked, all the copies will still animated in sync, I need each copy to animate differently from each other to get the look I'm going for.

[angie_taylor]

Have you tried using two repeaters, one to create the Row, then another to create the columns by repeating the rows??

[Rick Gerard]

Maybe this quick tutorial I did a while ago will help you release your AI file to layers:

If you want different random generators for different layers use this expression for wiggle:

seedRandom(index, timeless = true);
wiggle(8, 20)

This sets a different random seed for each layer.

Another option is to set 3 keyframes for any property with the first and last keyframe being identical, then using the loopOut() expression on the set of keyframes. You can add as many keyframes as you like and as long as the first and last are identical then the loop will be perfect. You could also use a random number generator to generate the values for the keyframes. 

If I saw your timeline and the modified properties of at least 2 layers I could give you a much better idea of how to do what you want to do. Select 2 layers, press 'uu', then send a screenshot of the entire UI so I can see what is going on.  

[GM Rod]

Ok here we go.
So I used these expressions to make the duplicates without having to align them. They're in the screenshot as well.

position+[0,(index-1)*170,]
rotation+[(index-1)*180,]

The next step is figuring out how to keep duplicating to the right until they fill the screen.

I tried precomping the first column and then duplicate with expressions again, but that doesn't work because:

1- Making all those a precomp, will cut off the part of them that's outside the screen

2- It no longer treats each triangle as a separate thing.

Your expression works, except it warps the triangles because it's not a uniform scale expression.
This is the one I've been using, that I can't make loop:

segMin = .1; 
segMax = .9; 
minVal = 0; 
maxVal = 100; 
seedRandom (index, true); 
segDur = random (segMin, segMax); 
seed = Math.floor (time / segDur); 
segStart = seed * segDur; 
seedRandom (seed, true); 
startVal = random (minVal, maxVal); 
seedRandom (seed+1, true); 
endVal = random (minVal, maxVal);
easeOut (time, segStart, segStart + segDur, [startVal,startVal], [endVal,endVal]);

 And this is the one I've been using to loop things without keyframes:

holdTime = effect(“line_passage”)(“Slider”);
k1 = 1; // 1st hold keyframe
k2 = 2; // 2nd hold keyframe
p = effect(“Beam”)(“Time”);
t1 = p.key(k1).time;
t2 = t1 + holdTime;
if (time < t1)
t = time
else if (time < t2)
t = linear(time,t1,t2,t1,p.key(k2).time)
else
t = p.key(k2).time + (time – t2);
valueAtTime(t)

loopOutDuration(type = “cycle”, duration = 0)

[GM Rod]

Many, many hours later...

Managed to get the pattern done in Illustrator. But to make it go over to AE the right way, each triangle has to be a layer, so it's upwards of 1000 layers... That "Convert to layered comp" is trying to explode my PC guys.
Help. I spent the entirety of today on this. I need to get it done or I'll never sleep again (lol).

[GM Rod]

Tried importing as composition using "retain layer sizes" as well. Choke up still. AE just can't handle 1000+ layers like that.

[angie_taylor]

I recreated your file in Illustrator, using the Transform Effect repeated.

Took it into AE as a single layer

Added Fractal Noise to another layer, animated the Evolution

Added Card Dance to the Triangles and made sure that the Rows and columns numbers matched the source.

Used the Fractal Noise layer as a gradient and used the Intensity to control the X and Y Scale values.

It works and took about 5 minutes.

I also added a Y rotation in this movie but you don't need to do that unless you want a 3D look

I will upload a video for you soon

[angie_taylor]

Obviously my example file is different from yours but if you can send me your AI file I can make it work on that for you.

[GM Rod]

Oh my God.

I feel so stupid now, hahahah!

This video is going to be useful in so many other scenarios as well, thank you so much!

Here's my files just so you see the extra unnecessary work I did to get to the same place.

Thanks again!

[GM Rod]

Hmmm it's not letting me attach files... I browse, they upload, I see them attached but when I click "Post" they go away... Sigh.

[angie_taylor]

Just zip the file before uploading?

[GM Rod]

I tried!
It gives me an error that it doesn't accept zip files 😞

[angie_taylor]

Don't worry, you don't need to send it now as I have already sent you the video which shows you how to do it.

[angie_taylor]

Hahaha, no worries at all. I've been using AE for a long time thats all. We all start by doing things the long way, then learn quicker routes as we progress. Learning is the most enjoyable part of this 🙂 Good luck with it 🙂

[Rick Gerard]

You don't need Illustrator. One shape layer with two triangles, one rotated 180º two repeaters, one for x and the other for y and you've got your grid of triangles. Card Dance and Fractal noise and you're done.

 

[angie_taylor]

You can of course do it with repeaters (as I said in my earlier post) but it will take longer to render than if you use a simple Illustrator layer. Just sayin'! 😉

[GM Rod]

Ok I got as far as making the triangles, creating the second layer with the noise, applying the effect, and adding the expression.

Nothing is happening though.