annabsmylie/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from annabsmylie's block: quilt block

  
## 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 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");

//    grid.call(t);
//	//**create a textures array**
//   var textures = [
//     textures.lines(),
//     textures.lines().heavier()];

    //**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!
//   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 t = textures[idx];
//     return t;
//   }

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

// thanks to http://bl.ocks.org/jdarling/06019d16cb5fd6795edf
  var randomColor = (function(){
    var golden_ratio_conjugate = 0.618033988749895;
    var h = Math.random();

    var hslToRgb = function (h, s, l){
    var r, g, b;
    if(s == 0){ r = g = b = l;} // achromatic
    else{
      function hue2rgb(p, q, t){
        if(t < 0) t += 1;
        if(t > 1) t -= 1;
        if(t < 1/6) return p + (q - p) * 6 * t;
        if(t < 1/2) return q;
        if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
        return p;
      }
      var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
      var p = 2 * l - q;
      r = hue2rgb(p, q, h + 1/3);
      g = hue2rgb(p, q, h);
      b = hue2rgb(p, q, h - 1/3);
    }
    return '#'+Math.round(r * 255).toString(16)+Math.round(g * 255).toString(16)+Math.round(b * 255).toString(16);
    };
    return function(){
      h += golden_ratio_conjugate;
      h %= 1;
      return hslToRgb(h, 0.6, 0.60);
    };
  })();

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

  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", function(d,i){return color(i);});
    .style("fill", randomColor);


//   column.call(t)
//   column.append("rect")
//     .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", t.url())

  </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 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");

	// grid.call(t);
	// //create a textures array
	// var textures = [
	// textures.lines(),
	// textures.lines().heavier()];

	//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!
	// 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 t = textures[idx];
	// return t;
	// }

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

	// thanks to http://bl.ocks.org/jdarling/06019d16cb5fd6795edf
	var randomColor = (function(){
	var golden_ratio_conjugate = 0.618033988749895;
	var h = Math.random();

	var hslToRgb = function (h, s, l){
	var r, g, b;
	if(s == 0){ r = g = b = l;} // achromatic
	else{
	function hue2rgb(p, q, t){
	if(t < 0) t += 1;
	if(t > 1) t -= 1;
	if(t < 1/6) return p + (q - p) * 6 * t;
	if(t < 1/2) return q;
	if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
	return p;
	}
	var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
	var p = 2 * l - q;
	r = hue2rgb(p, q, h + 1/3);
	g = hue2rgb(p, q, h);
	b = hue2rgb(p, q, h - 1/3);
	}
	return '#'+Math.round(r * 255).toString(16)+Math.round(g * 255).toString(16)+Math.round(b * 255).toString(16);
	};
	return function(){
	h += golden_ratio_conjugate;
	h %= 1;
	return hslToRgb(h, 0.6, 0.60);
	};
	})();

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

	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", function(d,i){return color(i);});
	.style("fill", randomColor);


	// column.call(t)
	// column.append("rect")
	// .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", t.url())

	</script>
	</body>