# Rotate a sinusoidal wave (2D traslation)

**URL:** <https://discourse.processing.org/t/rotate-a-sinusoidal-wave-2d-traslation/4796>\
**Category:** Coding Questions\
**Created:** [October 24, 2018, 9:12am UTC](https://discourse.processing.org/t/rotate-a-sinusoidal-wave-2d-traslation/4796 "2018-10-24T09:12:55Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![saotome](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@saotome](https://discourse.processing.org/u/saotome)\
**Post date:** [October 24, 2018, 9:12am UTC](https://discourse.processing.org/t/rotate-a-sinusoidal-wave-2d-traslation/4796/1 "2018-10-24T09:12:55Z")

</div>

Hello everybody

This program simulate a sinusoidal wave running along x axis

``

```auto
int xspacing = 16; // How far apart should each horizontal location be spaced
int w; // Width of entire wave

float theta = 0.0; // Start angle at 0
float amplitude = 75.0; // Height of wave
float period = 500.0; // How many pixels before the wave repeats
float dx; // Value for incrementing X, a function of period and xspacing
float[] yvalues; // Using an array to store height values for the wave

void setup() {
  size(640, 360);
  w = width+16;
  dx = (TWO_PI / period) * xspacing;
  yvalues = new float[w/xspacing];
}

void draw() {
  background(255);
  calcWave();
  renderWave();
}

void calcWave() {
  // Increment theta (try different values for 'angular velocity' here
  theta += 0.02;

  // For every x value, calculate a y value with sine function
  float x = theta;
  for (int i = 0; i < yvalues.length; i++) {
    yvalues[i] = sin(x)*amplitude;
    x+=dx;
  }
}

void renderWave() {
  noStroke();
  fill(0);

  // A simple way to draw the wave with an ellipse at each location
  for (int x = 0; x < yvalues.length; x++) {
    ellipse(x*xspacing, height/2+yvalues[x], 16, 16);
  }
}

```

```auto

My purpose is to know how I can rotate the movement PI/4, being the axis of the movement from (-1,-1) to (1,1), i.e. upper right diagonl.

Somebody can help me for doing this.

Many thanks ti all
```

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [October 24, 2018, 9:27am UTC](https://discourse.processing.org/t/rotate-a-sinusoidal-wave-2d-traslation/4796/2 "2018-10-24T09:27:10Z")

</div>

I‘m not quite sure what exactly you Need, But if you want to change the Position, frequency, height and some other things, use Desmos Graph. Just add in this sin(x) as a Variable and then change parameters. I did this some Time days ago and it works splendidly.

(sin(x \* PI + (0.5 \* PI)) / 2) + 0.5

(sin(x \* frequency + xOffset)\*amplitude)+yOffset

---

<div class="post-metadata">

**Author:** ![saotome](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@saotome](https://discourse.processing.org/u/saotome)\
**Post date:** [October 24, 2018, 9:44am UTC](https://discourse.processing.org/t/rotate-a-sinusoidal-wave-2d-traslation/4796/3 "2018-10-24T09:44:12Z")

</div>

With these modifications how is the new code?

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [October 24, 2018, 9:48am UTC](https://discourse.processing.org/t/rotate-a-sinusoidal-wave-2d-traslation/4796/4 "2018-10-24T09:48:37Z")

</div>

We encourage Users to figure out how to implement the suggestions we make, to improve their abilities and give an opportunity to improve their problem solving Skills.

But just add it where you had the other sin(x) value Applied.

---

<div class="post-metadata">

**Author:** ![saotome](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@saotome](https://discourse.processing.org/u/saotome)\
**Post date:** [October 24, 2018, 9:57am UTC](https://discourse.processing.org/t/rotate-a-sinusoidal-wave-2d-traslation/4796/5 "2018-10-24T09:57:03Z")

</div>

Thanks four your effort, but replacing my sin expression by yours I obtain only an horizontal line. I know that I’m an absolute begginer, but I try as much as I can for learming more.

I tried with rotate and matrix push and pull. They do their work but only in a small place of the size

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [October 24, 2018, 9:58am UTC](https://discourse.processing.org/t/rotate-a-sinusoidal-wave-2d-traslation/4796/6 "2018-10-24T09:58:53Z")

</div>

Could you Post, how you implemented it? Just the modified part.

---

<div class="post-metadata">

**Author:** ![saotome](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@saotome](https://discourse.processing.org/u/saotome)\
**Post date:** [October 24, 2018, 10:00am UTC](https://discourse.processing.org/t/rotate-a-sinusoidal-wave-2d-traslation/4796/7 "2018-10-24T10:00:50Z")

</div>

> [@Lexyth](#):
>
> (sin(x \* PI + (0.5 \* PI)) / 2) + 0.5

```auto
  float x = theta;
  for (int i = 0; i < yvalues.length; i++) {
    yvalues[i] = (sin(x * PI + (0.5 * PI)) / 2) + 0.5*amplitude;
    x+=dx;
  }
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 24, 2018, 10:01am UTC](https://discourse.processing.org/t/rotate-a-sinusoidal-wave-2d-traslation/4796/8 "2018-10-24T10:01:15Z")

</div>

how about that?

```auto
void draw() {
  background(255);
  calcWave();
  translate(width/2,height/2);
  rotate(PI/4);
  translate(-width/2,-height/2);
  renderWave();
}

```

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [October 24, 2018, 10:01am UTC](https://discourse.processing.org/t/rotate-a-sinusoidal-wave-2d-traslation/4796/9 "2018-10-24T10:01:38Z")

</div>

Ok, maybe i misunderstood your question… Do you want to modify the sin curve?

---

<div class="post-metadata">

**Author:** ![saotome](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@saotome](https://discourse.processing.org/u/saotome)\
**Post date:** [October 24, 2018, 10:03am UTC](https://discourse.processing.org/t/rotate-a-sinusoidal-wave-2d-traslation/4796/10 "2018-10-24T10:03:41Z")

</div>

> [@kll](#):
>
> void draw() { background(255); calcWave(); translate(width/2,height/2); rotate(PI/4); translate(-width/2,-height/2); renderWave(); }

Bingo… That is the correct one. Sin equation as original, and I hve the diagonal sinusoid

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [October 24, 2018, 10:03am UTC](https://discourse.processing.org/t/rotate-a-sinusoidal-wave-2d-traslation/4796/11 "2018-10-24T10:03:55Z")

</div>

And the Upper code i Sent was just an example of how to use it with values. What you should have added was the bottom one with variables representing the various modifications you can make to it.  
Ah ok, then i misunderstood what you wanted 😅

---

<div class="post-metadata">

**Author:** ![saotome](https://avatars.discourse-cdn.com/v4/letter/s/90ced4/32.png) [@saotome](https://discourse.processing.org/u/saotome)\
**Post date:** [October 24, 2018, 10:08am UTC](https://discourse.processing.org/t/rotate-a-sinusoidal-wave-2d-traslation/4796/12 "2018-10-24T10:08:34Z")

</div>

Dont’ worry. Thanks for your effort

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 24, 2018, 10:21am UTC](https://discourse.processing.org/t/rotate-a-sinusoidal-wave-2d-traslation/4796/13 "2018-10-24T10:21:00Z")

</div>

now you can change from sinus to triangle wave?

![donotfalldownstairs](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/91cf59c24aa8d2e56f006a4972e5d496dc45ac62.gif)