# Text following a sine wave pattern

**URL:** <https://discourse.processing.org/t/text-following-a-sine-wave-pattern/33453>\
**Category:** Coding Questions\
**Created:** [November 11, 2021, 2:19am UTC](https://discourse.processing.org/t/text-following-a-sine-wave-pattern/33453 "2021-11-11T02:19:11Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![clintonva32](https://avatars.discourse-cdn.com/v4/letter/c/e274bd/32.png) [@clintonva32](https://discourse.processing.org/u/clintonva32)\
**Post date:** [November 11, 2021, 2:19am UTC](https://discourse.processing.org/t/text-following-a-sine-wave-pattern/33453/1 "2021-11-11T02:19:11Z")

</div>

Hi. Trying to get some help with this code. Pretty much want to have each letter in the string be a part of a sine wave. Any idea how to do this? My code seems to be stacking each letter on top of each other. Might be the way I have my for loops setup, but I’m not sure.

Thanks in advance!

```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
PFont f;

String message="THE UNKNOWN";

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

void draw() {
  background(0);
  calcWave(.02);
  renderWave();
}

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

  // 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(255);
  
  for (int x = 0; x < yvalues.length; x++) {
    for (int i =0; i<message.length(); i++) {
   

      char currentChar=message.charAt(i);
      text(currentChar, x*xspacing, height/2+yvalues[x]);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 11, 2021, 2:36am UTC](https://discourse.processing.org/t/text-following-a-sine-wave-pattern/33453/2 "2021-11-11T02:36:18Z")

</div>

Hello,

Try this in one loop:

`char currentChar = message.charAt(x%11);`

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

`:)`

---

<div class="post-metadata">

**Author:** ![clintonva32](https://avatars.discourse-cdn.com/v4/letter/c/e274bd/32.png) [@clintonva32](https://discourse.processing.org/u/clintonva32)\
**Post date:** [November 11, 2021, 3:07am UTC](https://discourse.processing.org/t/text-following-a-sine-wave-pattern/33453/3 "2021-11-11T03:07:57Z")

</div>

> [@glv](#):
>
> x%11

HI. This totally works. Do you mind telling me why this works so I know for future? Also my code is looking pixilated now. Can you send me your code to produce this result so I can compare?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 11, 2021, 11:02am UTC](https://discourse.processing.org/t/text-following-a-sine-wave-pattern/33453/4 "2021-11-11T11:02:20Z")

</div>

Hello,

% is the modulo operator.  
Look it up in the references:

> **[Welcome to Processing!](https://processing.org)**
>
> Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts…

There are lots of resources on this operator out there.

Write some sample code to understand it.

Example:

```auto
void setup() 
	{
  size(100, 100);
  
  for (int x = 0; x < 100; x++) 
    {
    int y = x%20;  
    println(x, y);  
    point(x, y);    
    }
  }

```

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

`:)`