​

function setup() {

  createCanvas(500, 100, SVG);

  noLoop();

}

​

function draw() {

  background(255);

  var percentList = [0.10, 0.30, 0.50, 0.70, 0.90];

  var nLevels = percentList.length;

  for (var i=0; i<nLevels; i++){

​

    var rS = width/nLevels; 

    var rL = i*rS;

    var rR = rL + rS;

    var rT = 0;

    var rB = rT + rS;

    var hatchPercent = percentList[i]; 

    var nLinesToDraw = round(hatchPercent * rS);

    var offset = (rS/nLinesToDraw)/2;

    // Vertical line version

    for (var j=0; j<nLinesToDraw; j++){

      var lx = map(j,0,nLinesToDraw, rL,rR) + offset;

      line(lx,rT, lx,rB);

    }

    /*

    // Horizontal line version: 

    for (var j=0; j<nLinesToDraw; j++){

      var ly = map(j,0,nLinesToDraw, rT,rB) + offset;

      line(rL,ly, rR,ly);

    }

    */

  }

  saveSVG("hatch_sequence_H.svg");

}