# How to implement this wave animation (link provided)

**URL:** <https://discourse.processing.org/t/how-to-implement-this-wave-animation-link-provided/29153>\
**Category:** Project Guidance\
**Created:** [April 6, 2021, 8:20am UTC](https://discourse.processing.org/t/how-to-implement-this-wave-animation-link-provided/29153 "2021-04-06T08:20:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![fsterg](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fsterg/32/12725_2.png) [@fsterg](https://discourse.processing.org/u/fsterg)\
**Post date:** [April 6, 2021, 8:20am UTC](https://discourse.processing.org/t/how-to-implement-this-wave-animation-link-provided/29153/1 "2021-04-06T08:20:39Z")

</div>

Please have a look at [this animation](https://depositphotos.com/245798390/stock-video-blue-letters-wave-background-surface.html?fbclid=IwAR27BK2_WvC7Vs0FpCld21EHAg86VYO8yWRsyUQUaqzLFVg4JfdntnKjeOY).

Do you think it would be possible to implement it using Processing?  
The text should be dynamic (keyboard input), but first I want to do the wave animation part.

I’m searching using keywords like cloth/fabric/wave simulation but without much luck, so maybe I’m missing something more obvious?

Thanks!

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [April 6, 2021, 9:41am UTC](https://discourse.processing.org/t/how-to-implement-this-wave-animation-link-provided/29153/2 "2021-04-06T09:41:59Z")

</div>

Hello,

The idea there is to use sin and cos functions to wrap your 2D space.

First, you need to imagine that your 2D space is a grid:

```auto
void setup() {
  size(400, 400);
  noStroke();
  fill(72, 212, 247);
}

void draw() {
  background(20);
  
  for (int x = 0; x <= 400; x+=10) {
    for (int y = 0; y <= 400; y+=10) {
      ellipse(x, y, 2, 2);
    }
  }
}

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/32bc750137c0e0b53546621951456035c3110318.png)

Now imagine drawing a cos function on top from left to right.  
For example `y = sin(0.05 * x)`

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/29fea64ef8ced7e8aa57bbc1da78a265cf00756e.png)

What happen, if for each point, you move the y coordinate depending on the value you get from this sin wave?

```auto
void setup() {
  size(400, 400);
  noStroke();
}

void draw() {
  background(20);
  
  fill(72, 212, 247);
  for (int x = 0; x <= 400; x+=10) {
    for (int y = 0; y <= 400; y+=10) {
      float cx = x;
      float cy = y + 5 * sin(0.05 * x);
      ellipse(cx, cy, 2, 2);
    }
  }
}

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0b5cd26cc944507255ae0087624274b74d27e714.png)

Another improvement is that now all your rows are move the same way. But it would be nicer to have some differences here too. This time instead of changing the y value along depending of its x coordinate, we want to do it depending on the y coordinate.  
We can for example take : `cy = y + 5 * sin(0.05 * x) * sin(0.07 * y)`

In that case we get the following result:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/52eb0dd553553cc891277e084f1d6c6bb361575b.png)

Let’s do the same for the x with different periods:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a190da3a0d5e8b35bc6ce6cf5158dabdea26e31e.png)

All left to do is to animate it. For this, we can simply use the [millis()](https://processing.org/reference/millis_.html) function to add the elapsed time since the begin of the program in our sin() functions.

```auto
void setup() {
  size(400, 400);
  noStroke();
}

void draw() {
  background(20);
  fill(72, 212, 247);
  
  float dt = 0.001 * millis();
  for (int x = 0; x <= 400; x+=10) {
    for (int y = 0; y <= 400; y+=10) {
      float cx = x + 5 * sin(0.033 * y + dt) * sin(0.047 * x + dt);
      float cy = y + 5 * sin(0.050 * x + dt) * sin(0.070 * y + dt);
      ellipse(cx, cy, 2, 2);
    }
  }
}

```

Now replace the ellipses by letters and your are good to go.

One last thing. If you run the last piece of code, you will quickly realize that it loops quite fast and that you have repetitions in the 2D space. This is because of the nature of sin() which is cyclic. To avoid that, you can lower the period of the sin so less than one period fit in your 2D space or even include some noise to randomize some places.

---

<div class="post-metadata">

**Author:** ![fsterg](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fsterg/32/12725_2.png) [@fsterg](https://discourse.processing.org/u/fsterg)\
**Post date:** [April 6, 2021, 10:52am UTC](https://discourse.processing.org/t/how-to-implement-this-wave-animation-link-provided/29153/3 "2021-04-06T10:52:39Z")

</div>

This is extremely helpful, thank you so much for taking the time to break it down and explain it so well 🤩