# Display text as a wave

**URL:** <https://discourse.processing.org/t/display-text-as-a-wave/15236>\
**Category:** Coding Questions\
**Created:** [November 5, 2019, 12:39am UTC](https://discourse.processing.org/t/display-text-as-a-wave/15236 "2019-11-05T00:39:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![dev19](https://avatars.discourse-cdn.com/v4/letter/d/90ced4/32.png) [@dev19](https://discourse.processing.org/u/dev19)\
**Post date:** [November 5, 2019, 12:39am UTC](https://discourse.processing.org/t/display-text-as-a-wave/15236/1 "2019-11-05T00:39:51Z")

</div>

this is my code…

```auto
int xspace = 5; // 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 = 80.0; // Height of wave
float period = 700.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;
  background(255);
  dx = (TWO_PI / period) * xspace;
  yvalues = new float[w/xspace];
  calWave();
  drawWave();
}

void draw() {
  ;
}

void calWave() {
  // 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 drawWave() {
 
  // A simple way to draw the wave with an ellipse at each location
  for (int x = 0; x < yvalues.length; x++) {
    ellipse(x*xspace, height/2+yvalues[x], 5, 5);
  }
}

```

---

<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:** [November 5, 2019, 1:29am UTC](https://discourse.processing.org/t/display-text-as-a-wave/15236/2 "2019-11-05T01:29:27Z")

</div>

well, instead of the circle print a character? is that the idea?

* * *

and your code must be formatted ( in PDE by [ctrl][t] )  
and pasted here  
`</> Preformatted text` button

* * *

so it looks like this:

```auto
int xspace = 15; // ________ How far apart should each horizontal location be spaced
int w; // __________________ Width of entire wave
float theta = 0, dt =0.02; //Start angle at 0
float amplitude = 80.0; //_ Height of wave
float period = 640.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;
  background(255);
  dx = (TWO_PI / period) * xspace;
  yvalues = new float[w/xspace];
  println("xspace "+xspace+" w "+w +" dx "+dx);
  textSize(20);
  fill(0);
}

void draw() {
  background(200, 200, 0);
  calWave();
  drawWave();
}

void calWave() {
  theta += dt; // __________ Increment theta (try different values for ‘angular velocity’ here
  for (int i = 0; i < yvalues.length; i++)
    yvalues[i] = sin(theta+i*dx)*amplitude; // For every x value, calculate a y value with sine function
}

void drawWave() { // _______ A simple way to draw the wave with an ellipse at each location
  for (int x = 0; x < yvalues.length; x++) {
    point(x*xspace, height/2);
    //noFill();
    //ellipse(x*xspace, height/2+yvalues[x], xspace, xspace);
    text("O", x*xspace, height/2+yvalues[x]); // here need random chars?
  }
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 5, 2019, 5:33pm UTC](https://discourse.processing.org/t/display-text-as-a-wave/15236/3 "2019-11-05T17:33:23Z")

</div>

Please do not vandalize posts after receiving answers. This hides answers from the community.