Trying to make a herringbone design in p5.js

HERRINGBONE

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

Answers

  • edited March 20

    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);
          }
        }
      }
    }
    
  • Please edit your post, select your code and hit ctrl+o to format your code. Make sure there is an empty line above and below your code

    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
    
Sign In or Register to comment.