# Overlapping braid pattern with cos waves

``````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!

1 Like

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

}
``````

3 Likes

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

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.

3 Likes

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

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

4 Likes