var point1 = 128;
var point2 = 256;


function setup() {
  createCanvas(768, 200);

}

function draw() {
  background(256);
  var r = 256;
  var g = 0;
  var b = 0;

  for (i = 0; i <= width; i++) {
    if (i < point1 * 1) {
      g += 2;
    } else if (i < point1 * 2) {
      r -= 2;
    } else if (i < point1 * 3) {
      b += 2;
    } else if (i < point1 * 4) {
      g -= 2;
    } else if (i < point1 * 5) {
      r += 2;
    } else {
      b -= 2;
    }


    stroke(r, g, b);
    line(i, 0, i, 100);
  }

  for (i = 0; i <= width; i++) {
    if (i < point2 * 1) {
      g++;
      r--;
    } else if (i < point2 * 2) {
      b++;
      g--;
    } else {
      r++;
      b--;
    }


    stroke(r, g, b);
    line(i, 100, i, 200);
  }

}