# Symmetric overlapping sine wave code

**URL:** <https://discourse.processing.org/t/symmetric-overlapping-sine-wave-code/16565>\
**Category:** Coding Questions\
**Created:** [December 22, 2019, 7:12am UTC](https://discourse.processing.org/t/symmetric-overlapping-sine-wave-code/16565 "2019-12-22T07:12:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ruchi](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@Ruchi](https://discourse.processing.org/u/Ruchi)\
**Post date:** [December 22, 2019, 7:12am UTC](https://discourse.processing.org/t/symmetric-overlapping-sine-wave-code/16565/1 "2019-12-22T07:12:49Z")

</div>

```auto
int n = 5; // NO. OF STRANDS
float[] translate;//OFFSET OF INDIVIDUAL STRAND
float[] amp;// AMPLITUDE OF INDIVIDUAL STRAND
float[] period;// PERIOD OF INDIVIDUAL STRAND RELATIVE TO STANDARD PERIOD
float frequency;
float per;//STANDARD PERIOD
float angle;
float startWave;
float endWave;

void setup() {
  size(800, 800);
  smooth();
  stroke(255);
  strokeWeight(0.7);
  noFill();  
  frequency = 4;
  per = height/frequency;
  amp = new float[n];
  translate = new float[n];
  period = new float[n];
 void draw() {
  background(0);
  translate(width/2, 0);
  //line(0, 0, 0, height);
 
  calcamptransperiod();
  drawWave(1);
  drawWave(-1);
}

void calcamptransperiod() {
  for (int i=0; i<n; i++) {
    float maxamp = 105.0;
    amp[i] = maxamp-(i*(maxamp/6.6));
    float offset = 15.0;
    translate[i] = i*offset;
  }
  for (int i=0; i<n; i++) {
    period[i] =(per-translate[i]) + translate[(n-1)-i];
    //println("amp"+i+"="+amp[i]);
    //println("translate"+i+"="+translate[i]);
    //println("period"+i+"="+period[i]);
    //println(" ");
  }
}

void drawWave(int direction) {
  for (int f=0; f<frequency; f++) {
    //line(-width/2, height/frequency*f, width, height/frequency*f);
    for (int i=0; i<n; i++) {
      startWave = per*f;
      endWave = per*f+period[i];
      angle=0.0;
      for (float y=startWave; y<endWave; y++) {      
        pushMatrix();
        translate(0, translate[i]);
        float x = sin(angle)*amp[i]*direction;
        point(x, y);
        popMatrix();
        angle+=PI/period[i];
      }
    }
    direction = - direction;
  }
}

```

I am trying to create overlapping sine waves . I have achieved some result but its not symmetric.  
It doesn’t start & end at same spot. I want to achieve symmetricity along x-axis & y-axis both.  
I don’t know if I am missing something that is awfully simple.

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [December 22, 2019, 7:23am UTC](https://discourse.processing.org/t/symmetric-overlapping-sine-wave-code/16565/2 "2019-12-22T07:23:04Z")

</div>

If you reduce the number of strands to 1 your sketch _is_ symmetric. It seems you haven’t taken the extra strands in account with your formula. A quick fix would be to move your sketch up a bit with `translate`, but I guess you want all strands to start at y = 0 instead?

---

<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:** [December 22, 2019, 11:32am UTC](https://discourse.processing.org/t/symmetric-overlapping-sine-wave-code/16565/3 "2019-12-22T11:32:17Z")

</div>

i failed completely, but i love it !

 ![sinus_symmetric](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ec46b655c55f231d5c887884a017f0c7d51cef5e.png)

---

<div class="post-metadata">

**Author:** ![Ruchi](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@Ruchi](https://discourse.processing.org/u/Ruchi)\
**Post date:** [December 22, 2019, 11:36am UTC](https://discourse.processing.org/t/symmetric-overlapping-sine-wave-code/16565/4 "2019-12-22T11:36:05Z")

</div>

```auto
int n =5; // NO. OF STRANDS
float frequency=5;
float per;//STANDARD PERIOD
float peroffset;
float offset = 15.0;

float[] translate;//OFFSET OF INDIVIDUAL STRAND
float[] amp;// AMPLITUDE OF INDIVIDUAL STRAND
float[] period;// PERIOD OF INDIVIDUAL STRAND RELATIVE TO STANDARD PERIOD

void setup() {
  size(600, 800);
  smooth();
  stroke(255);
  strokeWeight(0.7);
  noFill();  
  //frameRate(15);
  //noLoop();
  peroffset = offset*(n-1);// OFFSET OF LAST STRAND   
  //SUBSTRACTING MAXIMUM OFFSET FROM STANDARD PERIOD TO ACHIEVE SYMMETRICITY ALONG X_AXIS (COMPENSATING FOR TRANSLATE FROM STANDARD PERIOD)
  per =(height-peroffset)/frequency;

  amp = new float[n];
  translate = new float[n];
  period = new float[n];
}
void draw() {
  background(0);
  translate(width/2, 0);
  //line(0, 0, 0, height);

  calcamptransperiod();
  drawWave(1);
  drawWave(-1);
}

void calcamptransperiod() {
  for (int i=0; i<n; i++) {
    float maxamp = offset*n;
    amp[i] = maxamp-(i*(maxamp/5.6));
    translate[i] = i*offset;
  }
  for (int i=0; i<n; i++) {
    period[i] =(per-translate[i]) + translate[(n-1)-i];
    //println("amp"+i+"="+amp[i]);
    //println("translate"+i+"="+translate[i]);
    //println("period"+i+"="+period[i]);
    //println(" ");
  }
}

void drawWave(int direction) {
  for (int f=0; f<frequency; f++) {
    //line(-width/2, per*f, width, per*f);
    for (int i=0; i<n; i++) {
      float startWave = per*f;
      float endWave = per*f+period[i];
      float angle=0.0;
      for (float y=startWave; y<endWave; y++) {            
        pushMatrix();
        beginShape(); 
        translate(0, translate[i]);
        float x = pow(sin(angle), 1)*amp[i]*direction;
        vertex(x, y);
        endShape();
        popMatrix();        
        angle+=PI/period[i];
      }
    }
    direction = - direction;
  }
}

```

found the solution. Compensating the maximum translate i.e offset of the last strand in standard  
period.

---

<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:** [December 23, 2019, 11:12pm UTC](https://discourse.processing.org/t/symmetric-overlapping-sine-wave-code/16565/5 "2019-12-23T23:12:03Z")

</div>

I had some fun with your code and made it animated and 3D.

Snapshot as requested:

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

Just some minor tweaks to make it 3D.  
Sharing with your permission:

```auto
//https://discourse.processing.org/t/symmetric-overlapping-sine-wave-code/16565

int n =5; // NO. OF STRANDS
float frequency=5;
float per;//STANDARD PERIOD
float peroffset;
float offset = 15.0;

float[] translate;//OFFSET OF INDIVIDUAL STRAND
float[] amp;// AMPLITUDE OF INDIVIDUAL STRAND
float[] period;// PERIOD OF INDIVIDUAL STRAND RELATIVE TO STANDARD PERIOD

float rotWorld; //glv

void setup() {
  size(600, 800, P3D);
  //smooth();
  stroke(255, 255, 0);
  strokeWeight(3);
  noFill();  
  //frameRate(15);
  //noLoop();
  peroffset = offset*(n-1);// OFFSET OF LAST STRAND   
  //SUBSTRACTING MAXIMUM OFFSET FROM STANDARD PERIOD TO ACHIEVE SYMMETRICITY ALONG X_AXIS (COMPENSATING FOR TRANSLATE FROM STANDARD PERIOD)
  per =(height-peroffset)/frequency;

  amp = new float[n];
  translate = new float[n];
  period = new float[n];
}

void draw() {
  background(0);
  translate(width/2, 0);
  //line(0, 0, 0, height);

  calcamptransperiod();
  
  rotWorld += TAU/200; //glv
  rotateY(rotWorld); //glv
  pushMatrix(); //glv
  drawWave(2);
  rotateY(TAU/4); //glv
  drawWave(-2);
  popMatrix(); //glv 
  }

void calcamptransperiod() {
  for (int i=0; i<n; i++) {
    float maxamp = offset*n;
    amp[i] = maxamp-(i*(maxamp/5.6));
    translate[i] = i*offset;
  }
  for (int i=0; i<n; i++) {
    period[i] =(per-translate[i]) + translate[(n-1)-i];
    //println("amp"+i+"="+amp[i]);
    //println("translate"+i+"="+translate[i]);
    //println("period"+i+"="+period[i]);
    //println(" ");
  }
}

void drawWave(int direction) {
  for (int f=0; f<frequency; f++) {
    //line(-width/2, per*f, width, per*f);
    for (int i=0; i<n; i++) {
      float startWave = per*f;
      float endWave = per*f+period[i];
      float angle=0.0;
      //println(startWave, endWave);
      for (float y=startWave; y<endWave; y++) {            
        //pushMatrix();
        beginShape(POINTS); //glv 
        //translate(0, translate[i]);
        float x = pow(sin(angle), 1)*amp[i]*direction;
        vertex(x, y+translate[i]); //glv
        //vertex(x, y);               
        endShape();
        //popMatrix();        
        angle+=PI/period[i];
      }
    }
    direction = - direction;
  }
}

```

🙂