Overlapping braid pattern with cos waves

[Ruchi]

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!

[Xelo]

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

//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();
  }
  
}

[Ruchi]

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:)

[rufsketch1]

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?

If so, here’s the code

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.

[jeremydouglass]

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.

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();
}