jmuyskens/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>generated</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.2.8/p5.min.js"></script>
</head>
<body>
<script>
var WIDTH = 960;
var HEIGHT = 500;

function setup() {
  createCanvas(WIDTH, HEIGHT);
  background(255);
  strokeWeight(2);
  rectMode(CORNERS);
  noLoop();
}

function rangeX(val) {
  return Math.round(255 * Math.sqrt(val / WIDTH));
}

function rangeY(val) {
  return Math.round(255 * Math.sqrt(val / HEIGHT));
}

function drawSegmentsHoriz(n, x1, y1, x2, y2) {
  console.log('horiz', n, x1, y1, x2, y2);
  if (n > 0) {
    var x = x1;
    while (true) {
      var nextSegmentLength = Math.random() * 0.5 * (x2 - x1) + 10;
      if (x + nextSegmentLength > x2)
        break;
      drawSegmentsVert(n - 1, x, y1, x + nextSegmentLength, y2);
      x += nextSegmentLength;
    }
    drawSegmentsVert(n - 1, x, y1, x2, y2);
  } else {
    var c = color(rangeX(x1), rangeX(x2 - x1), rangeY(y2));
    //var c = color(rangeX(x2 - x1), 255 - rangeY(y2 - y1), rangeX(x2))
    fill(c);
    stroke(c);
    rect(x1, y1, x2, y2);
  }
}

function drawSegmentsVert(n, x1, y1, x2, y2) {
  console.log('verrt', n, x1, y1, x2, y2);
  if (n > 0) {
    var y = y1;
    while (true) {
      var nextSegmentLength = Math.random() * 0.5 * (y2 - y1) + 10;
      if (y + nextSegmentLength > y2)
        break;
      drawSegmentsHoriz(n - 1, x1, y, x2, y + nextSegmentLength);
      y += nextSegmentLength;
    }
    drawSegmentsHoriz(n - 1, x1, y, x2, y2);
  } else {
    var c = color(rangeY(y1), 255 - rangeY(y2 - y1), rangeX(x2));
    //var c = color(rangeY(y2 - y1), rangeX(x2 - x1), 255 - rangeX(x2));
    fill(c);
    stroke(c);
    rect(x1, y1, x2, y2);
  }
}

function draw() {
  drawSegmentsVert(6, 0, 0, 960, 480);
}


</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>generated</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.2.8/p5.min.js"></script>
	</head>
	<body>
	<script>
	var WIDTH = 960;
	var HEIGHT = 500;

	function setup() {
	createCanvas(WIDTH, HEIGHT);
	background(255);
	strokeWeight(2);
	rectMode(CORNERS);
	noLoop();
	}

	function rangeX(val) {
	return Math.round(255 * Math.sqrt(val / WIDTH));
	}

	function rangeY(val) {
	return Math.round(255 * Math.sqrt(val / HEIGHT));
	}

	function drawSegmentsHoriz(n, x1, y1, x2, y2) {
	console.log('horiz', n, x1, y1, x2, y2);
	if (n > 0) {
	var x = x1;
	while (true) {
	var nextSegmentLength = Math.random() * 0.5 * (x2 - x1) + 10;
	if (x + nextSegmentLength > x2)
	break;
	drawSegmentsVert(n - 1, x, y1, x + nextSegmentLength, y2);
	x += nextSegmentLength;
	}
	drawSegmentsVert(n - 1, x, y1, x2, y2);
	} else {
	var c = color(rangeX(x1), rangeX(x2 - x1), rangeY(y2));
	//var c = color(rangeX(x2 - x1), 255 - rangeY(y2 - y1), rangeX(x2))
	fill(c);
	stroke(c);
	rect(x1, y1, x2, y2);
	}
	}

	function drawSegmentsVert(n, x1, y1, x2, y2) {
	console.log('verrt', n, x1, y1, x2, y2);
	if (n > 0) {
	var y = y1;
	while (true) {
	var nextSegmentLength = Math.random() * 0.5 * (y2 - y1) + 10;
	if (y + nextSegmentLength > y2)
	break;
	drawSegmentsHoriz(n - 1, x1, y, x2, y + nextSegmentLength);
	y += nextSegmentLength;
	}
	drawSegmentsHoriz(n - 1, x1, y, x2, y2);
	} else {
	var c = color(rangeY(y1), 255 - rangeY(y2 - y1), rangeX(x2));
	//var c = color(rangeY(y2 - y1), rangeX(x2 - x1), 255 - rangeX(x2));
	fill(c);
	stroke(c);
	rect(x1, y1, x2, y2);
	}
	}

	function draw() {
	drawSegmentsVert(6, 0, 0, 960, 480);
	}


	</script>
	</body>
	</html>