​

let x, y;

let w, h;

let wRange = [-50, -40, -30, -20, -10, 10, 20, 30, 40, 50];

let hRange = [-2, -1, -0.5, 0.5, 1, 2];

​

function setup() {

  createCanvas(400, 400);

  //initialize variables

  //x = 0;

  //y = height/2;

  //w = width/20; //10~50

  //h = height/20; //10~50

  background(220);

  frameRate(3);

}

​

//draw staircase. w and h could be negative or positive. x and y can be between [0, width] and [0, height]

function stairCase(x,y,w,h) {

  //horizontal line. y1=y2 and only x2 changes

  x2 = x + w; 

  y2 = y; 

  line(x, y, x2, y2); 

  //vertical line. x1=x2 and only y1 changes

  x = x2;

  y = y + h;

  line(x, y, x2, y2); 

​

  //call itself again, until it meets bounds

  if(x < width && x2 < width && y < height && y2 < height && x >= 0 && x2 >= 0 && y >= 0 && y2 >= 0) {stairCase(x,y,w,h)}

}

​

function draw() {

  //loop stairCase. give random x, y, w, h and greyscale color variables

  stroke(random(0, 127));

  x = random(0, width);

  y = random(0, height);

  w = random(wRange);

  h = random(hRange)*w;

  stairCase(x, y, w, h);

}