let children = [10, 20, 30, 40];

​

function setup() {

  createCanvas(400, 100);

  noLoop();

}

​

function draw() {

  background(0);

  // this function uses the simpler version of padding

  // I described earlier in the article; just a single number

  const pad = 5;

​

  translate(pad, pad);

  const parentW = width-pad*2, parentH = height-pad*2;

  fill(255);

  rect(0, 0, parentW, parentH);

  let sum = 0;

  for (let w of children) sum += w;

  const widthRatio = sum / parentW;

  let x = 0;

  for (let w of children)

  {

    fill(200);

    let adaptedWidth = w/widthRatio;

    rect(x+pad, pad, adaptedWidth-pad*2, parentH-pad*2);

    x += adaptedWidth;

  } 

}