block by jmuyskens 578b934f2ce6356c40be

578b934f2ce6356c40be

Full Screen

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>