#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

#### In this Discussion

edited March 2017

Hey guys, i'm trying to make a "herringbone" design in p5.js, like in this image, but I don't know how to do it. I think my professor provided me with this code to start off with to try to make it.

``````var t=0;
var SEPARATION=20;
var COUNT=5;
var i;

function setup() {
createCanvas(800,800);
}

function draw() {
background(255);
t=t+0.2;

if(t>SEPARATION){
t=0;
}
var j=0;
for(y=0; y<height; y+=SEPARATION*COUNT/2){
j++;

for(x=(j%2)*SEPARATION*COUNT/2; x<width+SEPARATION*COUNT; x+=SEPARATION*COUNT){
ellipse(x,y,SEPARATION*COUNT, SEPARATION*COUNT);
for(i=COUNT-1; i>=0; i--){
ellipse(x,y,t+SEPARATION*i,t+SEPARATION*i);
}
}
for(x=((j+1)%2)*SEPARATION*COUNT/2; x<width; x+=SEPARATION*COUNT){
ellipse(x,y,SEPARATION*COUNT, SEPARATION*COUNT);
for(i=COUNT-1; i>=0; i--){
ellipse(x,y,t+SEPARATION*i,t+SEPARATION*i);
}
}
}
}
``````

• edited March 2017

Hey guys, this is the code I was taking about that I think I have to start off of, I don't know why its showing the code like that sorry.

``````var t=0;
var SEPARATION=20;
var COUNT=5;
var i;

function setup() {
createCanvas(800,800);
}

function draw() {
background(255);
t=t+0.2;

if(t>SEPARATION){
t=0;
}
var j=0;
for(y=0; y<height; y+=SEPARATION*COUNT/2){
j++;

for(x=(j%2)*SEPARATION*COUNT/2; x<width+SEPARATION*COUNT; x+=SEPARATION*COUNT){
rect(x,y,SEPARATION*COUNT, SEPARATION*COUNT);
for(i=COUNT-1; i>=0; i--){
rect(x,y,t+SEPARATION*i,t+SEPARATION*i);
}
}
for(x=((j+1)%2)*SEPARATION*COUNT/2; x<width; x+=SEPARATION*COUNT){
rect(x,y,SEPARATION*COUNT, SEPARATION*COUNT);
for(i=COUNT-1; i>=0; i--){
rect(x,y,t+SEPARATION*i,t+SEPARATION*i);
}
}
}
}
``````

Kf

• Thank you, I fixed the way the code was being shown.

• ``````N = 10
for i in range 200/N
for j in range 200/N
for k in range N/2
if i%2==0
line N*i,k+N*j, N*i+N,k+N*j+N
else
line N*i,k+N/2+N*j, N*i+N,k+N/2+N*j-N
``````