# Overlapping braid pattern with cos waves

**URL:** <https://discourse.processing.org/t/overlapping-braid-pattern-with-cos-waves/14107>\
**Category:** Coding Questions\
**Created:** [September 22, 2019, 8:51am UTC](https://discourse.processing.org/t/overlapping-braid-pattern-with-cos-waves/14107 "2019-09-22T08:51:50Z")\
**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:** [September 22, 2019, 8:51am UTC](https://discourse.processing.org/t/overlapping-braid-pattern-with-cos-waves/14107/1 "2019-09-22T08:51:50Z")

</div>

```auto
float amp;
float time;
//Number of Strands
int nos;
//Phase difference b/w strands
float phase;

float[][] x;

void setup() {
  size(1000, 900);
  background(0);

  amp=70;
  nos=3;
  phase=TWO_PI/nos;

  x=new float[nos][height+1];
}

void draw() {

  translate(width/2, 0);

  for (int j=0; j<nos; j++) {
    time=0;
    for (int i=0; i<=height; i++) { 
      x[j][i]=amp* cos(time-(j*phase));
      time+=0.027;
    }
  }
    beginShape();
  for (int j=0; j<nos; j++) {
    for (int i=1; i<=height; i++) {
      strokeWeight(2);
      stroke(255, (255/nos)*(j+1), 255*(j-1));
      line(x[j][i], i, x[j][i-1], i-1);
    }
    endShape();
  }
}

```

This code creates cos waves with varying number of strands. I am trying to figure out creating overlapping waves like braid.  
Little stuck with this!

---

<div class="post-metadata">

**Author:** ![Xelo](https://avatars.discourse-cdn.com/v4/letter/x/9fc348/32.png) [@Xelo](https://discourse.processing.org/u/Xelo)\
**Post date:** [September 22, 2019, 9:50am UTC](https://discourse.processing.org/t/overlapping-braid-pattern-with-cos-waves/14107/2 "2019-09-22T09:50:37Z")

</div>

my solution would be switching to p3d and using the depth sort to try and draw the braids the correct order:

```auto
//Number of Strands
int nos;
//Phase difference b/w strands
float phase;

float[][] x;
float amp;
float time;
void setup() {
  size(1000, 900,P3D);
  background(0);
  ortho();//no persepctive distortion
  amp=70;
  nos=5;
  phase=TWO_PI/nos;

  x=new float[nos][height+1];
}

void draw() {

 background(0);
 clear();
  translate(width/2, 0);

  for (int j=0; j<nos; j++) {
    time=0;
    for (int i=0; i<=height; i++) { 
      x[j][i]=amp* cos(time-(j*phase));
      time+=0.027;
    }
  }
   
  float thickness = 20;
  for (int j=0; j<nos; j++) {
    strokeWeight(thickness);
    stroke(255, (255/nos)*(j+1), 255*(j-1));
    noFill();
    beginShape();
    
    for (int i=1; i<=height; i++) {
    
      int drawoffset =  
          9999- //% doesnt work as a stepper function expected with negative values like glsl does so a large offset is needed
          int(
            ((thickness/0.027-6+i)*0.027)//current position on the cos function, need to offset to account for line thickness
            /(2*PI/nos) //peroid of cos with amount of braids
          ); 
      int actualj = ((j+drawoffset)%nos);
      
       // use vertex correctly, as opposed to line() which doesnt need a begin shape
      vertex(x[j][i], i,80*actualj); //80 is an arbitary value, but keep it resonablely big to avoid z clipping
    }
    endShape();
  }
  
}

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6386aabd469385864b8e077ca58fd6c1e84bf9cc.png)  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1584c472cd24b90005bcbb1381d41dbc269b9436.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:** [September 22, 2019, 3:32pm UTC](https://discourse.processing.org/t/overlapping-braid-pattern-with-cos-waves/14107/3 "2019-09-22T15:32:38Z")

</div>

Hi thanks @Xelo. This is useful although technically a braid has loops going in and out. Wire overlaps & then gets overlapped successively.  
I though haven’t worked on 3d yet so will work around this:)

---

<div class="post-metadata">

**Author:** ![rufsketch1](https://avatars.discourse-cdn.com/v4/letter/r/8edcca/32.png) [@rufsketch1](https://discourse.processing.org/u/rufsketch1)\
**Post date:** [September 23, 2019, 3:17pm UTC](https://discourse.processing.org/t/overlapping-braid-pattern-with-cos-waves/14107/4 "2019-09-23T15:17:28Z")

</div>

Working off of @Xelo’s idea, how about using depth in conjunction with a sin() wave at a different frequency?

I’m not entirely sure what counts as a braid though. Is this right?

 ![braid](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5d54331d40e83b2f8939bf4fd01f12b777347cf6.png)

If so, here’s the code

```auto
float amp;
float time;
//Number of Strands
int nos;
//Phase difference b/w strands
float phase;

float[][] x;
float[][] s;

void setup() {
  size(1000, 900, P3D);
  background(0);

  amp=70;
  nos=3;
  phase=TWO_PI/nos;

  x=new float[nos][height+1];
  s=new float[nos][height+1];
}

void draw() {
  background(0);
  translate(width/2, 0);
  ortho();
  for (int j=0; j<nos; j++) {
    time=0;
    for (int i=0; i<=height; i++) { 
      x[j][i]=amp* cos(time-(j*phase));
      s[j][i]=0.5*amp* sin((time-(j*phase))*2);
      time+=0.027;
    }
  }
   
  for (int j=0; j<nos; j++) {
    for (int i=1; i<=height; i++) {
      strokeWeight(25);
      stroke(255, (255/nos)*(j+1), 255*(j-1));
      point(x[j][i], i, s[j][i]);
    }   
  }
}

```

looks pretty cool if made way too thick.

 ![Screenshot_20190923_111636](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/ae0b2cf88a4d74b83a3114802234ceedf5df387d.png)

---

<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:** [September 25, 2019, 10:31pm UTC](https://discourse.processing.org/t/overlapping-braid-pattern-with-cos-waves/14107/5 "2019-09-25T22:31:29Z")

</div>

Thanks for sharing this! With a few very small line changes you can add interactivity to sketch above:

- made it animated
- move the mouse to play with thickness (stroke) and tightness (amplitude) of the weave
- press space bar to change the number of strands.

My understanding is that a braid must be 3 or more strands, but the sky is the limit.

```auto
float amp;
float time;
//Number of Strands
int nos;
//Phase difference b/w strands
float phase;

float[][] x;
float[][] s;

void setup() {
  size(1000, 900, P3D);
  background(0);

  amp=70;
  nos=3;
  makeArrays();
}

void makeArrays(){
  x=new float[nos][height+1];
  s=new float[nos][height+1];
  phase=TWO_PI/nos;
}

void draw() {
  background(0);
  translate(width/2, 0);
  ortho();
  int extent = frameCount%height;

  float thick = map(mouseY, 0, height, 1, 70);
  strokeWeight(thick);
  amp = map(mouseX, 0, width, 20, width/3);
  
  for (int j=0; j<nos; j++) {
    time=0;
    for (int i=0; i<=extent; i++) { 
      x[j][i]=amp* cos(time-(j*phase));
      s[j][i]=0.5*amp* sin((time-(j*phase))*2);
      time+=0.027;
    }
  }
   
  for (int j=0; j<nos; j++) {
    for (int i=1; i<=extent; i++) {
      stroke(255, (255/nos)*(j+1), 255*(j-1));
      point(x[j][i], i, s[j][i]);
    }   
  }
}

void keyReleased(){
  nos = nos+2;
  if(nos > 13) nos = 3;
  makeArrays();
}

```

 ![00%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/14e092367b56a2f6550e0b19ddae8df92765f976.png)