annabsmylie/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3fc/10.1.0/d3fc.bundle.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js" charset="utf-8"></script>
<script src="https://cdn.rawgit.com/riccardoscalco/textures/master/textures.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>

    var numX = 7;
    var numY = 10;
    var sqWidth = 150;
    var sqHeight = 150;
    var pad = 5;
    var interval = 500;
    var color1 = "rgba(255, 163, 176, 1)";
    var color2 = "rgba(238, 187, 56, 1)";
    var color3 = "rgba(74, 238, 204, 1)";

    var texts = [
    	textures.lines()
      	.size(8)
      	.strokeWidth(1)
      	.background(color1),
      textures.lines()
      	.orientation("vertical", "horizontal")
    		.size(8)
    		.strokeWidth(1)
    		.shapeRendering("crispEdges")
      	.background(color2),
    	textures.lines()
      	.lighter()
      	.background(color3),
      textures.circles()
      	.heavier()
        .background(color2),
      textures.circles()
      	.background(color1),
      textures.paths()
      	.d("crosses")
      	.lighter()
      	.thicker()
        .background(color2),
      textures.paths()
      	.d("waves")
      	.background(color3),
      textures.paths()
      	.d("nylon")
      	.lighter()
      	.background(color3),
    ];

    //select random integer for array index
    var getRandomInt = function getRandomInt(min, max) {
    	min = Math.ceil(min);
    	max = Math.floor(max);
    	return Math.floor(Math.random() * (max - min + 1)) + min;
  	}

    //select
  	var randomTexture = function() {
    	var idx = getRandomInt(0, 7);
    	console.log(idx);
    	var idxT = texts[idx];
    	return idxT;
  	}


      //create a space to append an svg element
      var svgContainer = d3.select("body").append("svg")
        .attr("width", sqWidth*numX)
        .attr("height", sqHeight*numY);

  //self-invoking function to loop over textures
  (function theLoop (i) {
    setTimeout(function () {
      //create squares
      for (var j = 0; j < numX; j++) {
        console.log(j);
        var xpos = j*(sqWidth);

        for (var k = 0; k < numY; k++) {
          var ypos = k*(sqHeight);
          var t = randomTexture();
          svgContainer.call(t);
          var square = svgContainer.append("rect")
            .attr("x", xpos)
            .attr("y", ypos)
            .attr("width", sqWidth)
            .attr("height", sqHeight)
            .style("fill", t.url());
        }
      }
			//if decrement i and still > 0, keep going bc 0 evaluates to false
      //if (--i && i>0)
      if (--i) {
        //call loop again and pass it current value of i
        theLoop(i);
      }
    }, 500);
  })(10);	//5 passed to theLoop for value of i


  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3fc/10.1.0/d3fc.bundle.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js" charset="utf-8"></script>
	<script src="https://cdn.rawgit.com/riccardoscalco/textures/master/textures.min.js" charset="utf-8"></script>
	<script src="https://d3js.org/d3-timer.v1.min.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>

	var numX = 7;
	var numY = 10;
	var sqWidth = 150;
	var sqHeight = 150;
	var pad = 5;
	var interval = 500;
	var color1 = "rgba(255, 163, 176, 1)";
	var color2 = "rgba(238, 187, 56, 1)";
	var color3 = "rgba(74, 238, 204, 1)";

	var texts = [
	textures.lines()
	.size(8)
	.strokeWidth(1)
	.background(color1),
	textures.lines()
	.orientation("vertical", "horizontal")
	.size(8)
	.strokeWidth(1)
	.shapeRendering("crispEdges")
	.background(color2),
	textures.lines()
	.lighter()
	.background(color3),
	textures.circles()
	.heavier()
	.background(color2),
	textures.circles()
	.background(color1),
	textures.paths()
	.d("crosses")
	.lighter()
	.thicker()
	.background(color2),
	textures.paths()
	.d("waves")
	.background(color3),
	textures.paths()
	.d("nylon")
	.lighter()
	.background(color3),
	];

	//select random integer for array index
	var getRandomInt = function getRandomInt(min, max) {
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}

	//select
	var randomTexture = function() {
	var idx = getRandomInt(0, 7);
	console.log(idx);
	var idxT = texts[idx];
	return idxT;
	}


	//create a space to append an svg element
	var svgContainer = d3.select("body").append("svg")
	.attr("width", sqWidth*numX)
	.attr("height", sqHeight*numY);

	//self-invoking function to loop over textures
	(function theLoop (i) {
	setTimeout(function () {
	//create squares
	for (var j = 0; j < numX; j++) {
	console.log(j);
	var xpos = j*(sqWidth);

	for (var k = 0; k < numY; k++) {
	var ypos = k*(sqHeight);
	var t = randomTexture();
	svgContainer.call(t);
	var square = svgContainer.append("rect")
	.attr("x", xpos)
	.attr("y", ypos)
	.attr("width", sqWidth)
	.attr("height", sqHeight)
	.style("fill", t.url());
	}
	}
	//if decrement i and still > 0, keep going bc 0 evaluates to false
	//if (--i && i>0)
	if (--i) {
	//call loop again and pass it current value of i
	theLoop(i);
	}
	}, 500);
	})(10); //5 passed to theLoop for value of i


	</script>
	</body>