Apple Intelligence is now available on iPhone, iPad, and Mac!

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Apple Motion: Creating 2D wave texture

Hello!


I need to create a wave animation in Apple Motion for a 3D model material (a video material).


I’m trying to figure out how to create a wave that animates. It just needs to be all white or varying opacity and it needs to animate multiple little blob of foam.


Here’s a reference image:



Look at the white texture. I am trying to create something either with particles, generators and other ways of creating content inside Motion.


Should I just create everything in Bézier paths and manually update their keyframes?


I am on an urgent deadline, so I really need some help on this.


Thanks for the help!

MacBook, macOS 12.7

Posted on Feb 17, 2024 3:38 AM

Reply
32 replies

Feb 17, 2024 7:21 PM in response to joenaveau

Clouds is a good choice:



This "texture" was built this way:

[project 1920x1080]


Clouds over Caustics over Color Solid.


Layering *up*:

Color Solid:


Caustics Generator:


Caustics Transforms and Blending:



Clouds Generator:



To Offset X and Offset Y, add separate Ramps:


Add Filters > Color > Threshold:




Using Threshold makes the Clouds look less like clouds in the sky and more like "foam". The light/dark ranges can be manipulated with the Clouds gradient. You can fiddle with the Threshold light color to your liking (more toward white).



The use of Caustics makes it look like there are ripples/waves/ and depth to the "water". Also, the caustics layer is rotated to kind of match the look of the direction the clouds are moving. The Transforms > Scale parameters are used to stretch the pattern match (more or less) the stretch in the clouds.


I would recommend cloning the group you make this texture in to apply a mask and apply to a composition.


There is a lot of latitude available from this "base" preparation. Feel free to experiment.


HTH

Feb 18, 2024 10:21 AM in response to joenaveau

Okay - whatever you decide to use, you can use Bulge distortion filters to "shape" a wave line:




For this example, I used Clouds with a Rectangle Mask, then Cloned it. I applied all behaviors to the Group level of the Clone (including the Ramp that animates everything down.)


I animated the left and right lower bulge filters (to "push up" the sides) with an Oscillate behavior on the Bulge > Center > Y parameters and for the center top bulge, I animated the Y parameter with a Randomize behavior. The Amplitudes of the Oscillate were set at -0.08 and -0.07 and the Speed at 40. For the Randomize Amount > -0.08 with Add and Subtract apply mode, Noisiness 0 and Frequency 1.


*Clouds set up to only show the lighter shades. All the darker shades are transparent. Project background set to that dark gray.


This was just an idea for how to apply the "foam" to the leading edge of a larger shape and "bend" the edges to form a moveable wave-like pattern. A finished product would likely require a good bit more work.


HTH


Feb 17, 2024 10:32 AM in response to joenaveau

Motion isn't going to let you animate multiple shape points independently in any other way than keyframing the Control Points of the Shape.




If you can live with something like this, it's really fairly easy to do.


You need to Clone the original source twice. [Select the original and type K to clone it.]

For one clone, you need to bezier mask the water area and for the other clone, mask the land. You don't even really need to be that "neat". These are my masks:





The clones are overlaid on the original image with the water region first and under the land region.


The Land mask has a Feather of -100 and the water mask was a feather of +45. The odd shape is to limit the effect of the darker color change at the top right of the image.


To the water clone I added a Distortion > Underwater filter with these settings:



Animate the water clone to go down and left to make the water seem like it's approaching shore. I used a Motion Path, but it can be keyframed.


Everything in one group and the group scaled up to fit the scene.


This is a "quick and dirty" solution and not the only one. The one Motion user who really excels at these kinds of effects is Simon Ubsdell and you can find his youtube channel Motion Tutorials playlist here:

https://www.youtube.com/playlist?list=PLeZvvhzFi_ZxWbzZ5bhJ45QWzPHQ3Y5qy







Feb 17, 2024 4:52 PM in response to fox_m

Great, thanks for the info.


I am trying to do two more things. I came up with my own way of making a few foams for an ocean wave, but I need to make the top more "connected" (basically one very large blob) and then making the bottom become more and more granular with smaller blobs.


I also want to add a gradient to the entire thing, where the top is near 100% opacity (all white) and the bottom is more of a transparent white.


This is really just a cloud generator in a custom shape mask with a few filters.


Any tips? You have been very helpful in some basic guidance! :)


Feb 17, 2024 7:38 PM in response to fox_m

Update (again):


Thanks for the response. I think I was typing at the same time as you. Apologies about that!


My issue isn't really the "middle" portion of the water. I'm trying to create moving waves.


I am sorry, I should have been clearer.


I am trying to make one singular wave that uses this clouds generator. That's why my photo has a blob of cloud generators in a mask. It's going to be a wave moving on a Motion Path.



Here's my image with an overlay — mind the pink. See my blob? It's one wave. I want the "top" (front if you were a person standing on that beach) to be more concentrated with bigger clouds, basically the whole thing a more opaque, single white piece. I then want the "bottom" (back of the wave again if you were actually standing on that beach) to have finer and less cloud generations.


That's why I'm struggling, because I cannot figure that portion out.


At the front part of the wave, it's stronger, so it needs to be more opaque with basically one giant part.


At the back part of the wave, it's weaker, so it needs to be more transparent with a few little parts.


I'm animating this wave moving in. I have been trying for a long time on how to get this right.

Feb 17, 2024 9:37 PM in response to fox_m

A little bit. I need it to be kind of like the original image I posted. But, I'm making a texture. So, it needs to be an "above" view like this video, but it needs to look a little more like this white wave. There needs to be visible waves coming in, with more and then gradually less cloud generation, if using a cloud generator is still relevant in this. Your general wave is pretty good though, but I need to combine your video with the shape of this wave. I really appreciate all of your advice. I've been looking at this for hours. :)


Feb 19, 2024 2:02 AM in response to fox_m

Great. I ended up creating my own solution that is fairly different than discussed. I used a Dots Bottom Top replicator, and it is taking a lot of work. I am almost done with it, but I do have another question. I need to slightly change the replicator I am using. Is there any way of "pausing" or trimming a replicator? I think I need my own custom replicator, which I think you can make in Motion. I'm just trying to edit this one a little bit. I screen recorded the replicator I want to edit — on the third pass you can see that I paused it with my space bar. I want my replicator to behave where it passes somewhat through and then passes where there is still white at the top. I also want it to have smaller circles at the bottom of the "wave" at all times and bigger ones at the top at all times.


Feb 19, 2024 10:08 AM in response to joenaveau

Make the replicator the entire length of your project.


In Sequence Replicator, set Traversal > Custom. Then you can manipulate the Location however you want over the entire length of the project.


I used an Oscillate behavior on Location for this:



but it can be keyframed (or other behaviors applied) however you like.


My settings for Oscillate are:

Wave Shape: Sine [alternative for one direction: Sawtooth, but there's no "easing"]

Phase: -1.5708 (-π/2)

Amplitude: 53.333%

Speed: 12


Using this method, you don't have to manipulate the pre-made keyframes if you don't want to. You can completely reverse the "wave direction" by setting Replicator > Origin to Top.



The only other changes I made was to Replicator > Size: Height = 1334

so that the pattern starts and ends off-screen; and I set the first keyframe to 250 instead of 0 and removed the middle keyframe:



As for starting with smaller circles, in the keyframe editor, you can manipulate the Bezier handles to make the smaller values last longer.


HTH

Feb 19, 2024 6:56 PM in response to fox_m

Hello! Thank you for the insights. I am SUPER close with my final animation after a TON of work and experimentation. However, I just have one detail I have a quick question about.


Here's what I have managed to make on my own:



Obviously, it looks like a wave at the start and ending, but it clumps up and doesn't look like one throughout the entire thing. This is because the scale end is very large at 3500 and the scale is 1. There are 5,000 points in this (probably too much, explains the lag in the video).


I am trying to have the shape I had at the very start at the bottom of the video be the entire thing, from the start to finish of the loop.


Basically, I think I need to have my first couple of frames traverse "through" another replicator that is just a grid, perhaps? I've been trying everything I can.


Any thoughts?

Feb 19, 2024 7:38 PM in response to joenaveau

Could you use something like this?



I use a replicator for a single "line" (bezier curve) of circles. I use a method to "liquify" the effect and used it as a mask for Clouds. I match another shape with the same curve for the color and animate the replicator/mask and linked the background color. (You can see the Oscillate animation path in the gif.)


If this is close, I'll go into the details.

Feb 19, 2024 9:44 PM in response to joenaveau

Here's my replicator. My goal is to make the entire traversal look like this part of the replicator (the very start):



Instead, it gets bigger and more clumped together. I am trying to make it move along the entire replicator like the above image.



Edit:


I don't want to have multiple waves across this. I just want the replicator to look like the first image at any given point in the spread.


As an example, at this point:



And at this point:



They both have to look like the first image. I've tried changing the scale and scale end, but it just doesn't seem to work to well. Regardless of where you are in the animation, it needs to have the top and bottom scales of the first image.

Feb 19, 2024 10:18 PM in response to fox_m

Sure.


Ignore the blob effect, that's not relevant.


Here's my file structure:


Circle:


Nothing special here. No changes. No keyframes.


Replicator (originally got from Dots Bottom Top):


It has a Sequence Replicator:


This has the following properties:



The keyframes on Opacity just go from 0 to 100 from the first frame to the 30th frame, respectively.


Location is kind of like a sine wave, but I made it and it's skewed. It goes from -50 on first frame, to 56.4 at 1:14, to -41.45 at 3:22 and back to -50 at 5:00. Those are not really important numbers.


As for the replicator properties, the important ones that I changed were random fill, scale, the point amount and scale end.



That should be it. I've tried just about every creative solution I could think of on trying to make this work. I do have a few others I am trying out though.

Feb 22, 2024 4:53 AM in response to fox_m

Wow. I ended up doing a TON of work after that to get this right. But I think it turned out pretty good!


The only issue is that for some reason, there is a gray outline around the edges where the video meets the transparency, at least where I am using it after exporting.


I found someone with a similar issue but they were using an Adobe program:


https://community.adobe.com/t5/after-effects-discussions/how-do-i-remove-thin-black-outline-arount-transparent-video/m-p/11196057


I don't know if this is a problem with how I'm exporting it?


Feb 22, 2024 10:07 AM in response to joenaveau

If you're exporting your project as a video clip with alpha for Final Cut, you can select the clip in Final Cut's browser, go to the Settings inspector and change the Alpha Handling. Whichever one it defaults to (Straight or Premultiply) try the other (Premultiply will probably work best, though). None/Ignore will turn the alpha channel solid black.



(I think "Straight" is the default when importing clips/images with alpha.)


However, when working in Final Cut with Motion content, it is always best to create a Template, in this case, just save it as a generator. Motion templates use floating point values. Once you export to another format, the numeric values are usually converted to integer which can lead to jpeg-like "artifacts" in the edge pixels. Templates also save a ton of HD memory space over exported 4444.

Apple Motion: Creating 2D wave texture

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple Account.