annabsmylie/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from annabsmylie's block: quilt block
forked from annabsmylie's block: quilt block (random color)

  
## 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.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>

  <div id="grid"></div>
  <script>

  //function to create grid's data
  function gridData() {
    var data = new Array();
    var xpos = 1; //starting xpos and ypos at 1
    var ypos = 1;
    var width = 25;
    var height = 25;

    //iterate for rows
    for (var row = 0; row < 50; row++) {
      data.push( new Array() );

      //iterate for cells/cols inside rows
      for (var column = 0; column < 30; column++) {
        data[row].push({
          x: xpos,
          y: ypos,
          width: width,
          height: height,
//           fill: randomColor
        })
        //increment the x position, move it over by 50
        xpos += width;
      }
      //reset the x position after a row is complete
      xpos = 1;
      //increment the y position for next row, move down 50
      ypos += height;
    }
    return data;
  }

  var color = d3.scale.category20();

  var gridData = gridData();

// console.log(gridData);
//    //define texture
//    var t = textures.circles()
//    	.lighter();

   var grid = d3.select("#grid")
   	.append("svg")
   	.attr("width", "1050px")
   	.attr("height", "1500px");

	//**create a textures array**
  var textures = [
    textures.lines(),
    textures.circles(),
  	textures.lines().lighter()];

  //**create a function that selects a random index from texture array**
  // Returns a random integer between min (included) and max (excluded)
  // Using Math.round() will give you a non-uniform distribution!

  var getRandomInt = function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
  }

  var randomTexture = function() {
    var idx = getRandomInt(0, 2);
    console.log(idx);
    var idxT = textures[idx];
    return idxT;
  }

  grid.call(randomTexture());
//   grid.call(textures[0]);

//   var color = d3.scale.category20();

  var row = grid.selectAll(".row")
    .data(gridData)
    .enter()
    .append("g")
    .attr("class", "row")
//   	.style("fill", function(d,i){return color(i);});

// 	grid.call(randomTexture);

  var column = row.selectAll(".square")
    .data(function(d) { return d; })
    .enter()
    .append("rect")
//   t = randomTexture();
//   column.call(t);
//   column.append("rect")
//   .style("fill", t.url());
    .attr("class", "square")
    .attr("x", function(d) {return d.x; })
    .attr("y", function(d) {return d.y; })
    .attr("width", function(d) {return d.width; })
    .attr("height", function(d) {return d.height; })
//     .style("fill", "#ffd232")
//     .style("stroke", "#ffffff")
    .style("fill", randomTexture().url);
//   	 .style("fill", textures[0].url());
//     .style("fill", function(d,i){return color(i);});

  </script>
</body>
	<!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.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>

	<div id="grid"></div>
	<script>

	//function to create grid's data
	function gridData() {
	var data = new Array();
	var xpos = 1; //starting xpos and ypos at 1
	var ypos = 1;
	var width = 25;
	var height = 25;

	//iterate for rows
	for (var row = 0; row < 50; row++) {
	data.push( new Array() );

	//iterate for cells/cols inside rows
	for (var column = 0; column < 30; column++) {
	data[row].push({
	x: xpos,
	y: ypos,
	width: width,
	height: height,
	// fill: randomColor
	})
	//increment the x position, move it over by 50
	xpos += width;
	}
	//reset the x position after a row is complete
	xpos = 1;
	//increment the y position for next row, move down 50
	ypos += height;
	}
	return data;
	}

	var color = d3.scale.category20();

	var gridData = gridData();

	// console.log(gridData);
	// //define texture
	// var t = textures.circles()
	// .lighter();

	var grid = d3.select("#grid")
	.append("svg")
	.attr("width", "1050px")
	.attr("height", "1500px");

	//create a textures array
	var textures = [
	textures.lines(),
	textures.circles(),
	textures.lines().lighter()];

	//create a function that selects a random index from texture array
	// Returns a random integer between min (included) and max (excluded)
	// Using Math.round() will give you a non-uniform distribution!

	var getRandomInt = function getRandomInt(min, max) {
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min)) + min;
	}

	var randomTexture = function() {
	var idx = getRandomInt(0, 2);
	console.log(idx);
	var idxT = textures[idx];
	return idxT;
	}

	grid.call(randomTexture());
	// grid.call(textures[0]);

	// var color = d3.scale.category20();

	var row = grid.selectAll(".row")
	.data(gridData)
	.enter()
	.append("g")
	.attr("class", "row")
	// .style("fill", function(d,i){return color(i);});

	// grid.call(randomTexture);

	var column = row.selectAll(".square")
	.data(function(d) { return d; })
	.enter()
	.append("rect")
	// t = randomTexture();
	// column.call(t);
	// column.append("rect")
	// .style("fill", t.url());
	.attr("class", "square")
	.attr("x", function(d) {return d.x; })
	.attr("y", function(d) {return d.y; })
	.attr("width", function(d) {return d.width; })
	.attr("height", function(d) {return d.height; })
	// .style("fill", "#ffd232")
	// .style("stroke", "#ffffff")
	.style("fill", randomTexture().url);
	// .style("fill", textures[0].url());
	// .style("fill", function(d,i){return color(i);});

	</script>
	</body>