Built with blockbuilder.org
forked from annabsmylie's block: quilt block
forked from annabsmylie's block: quilt block (random color)
license: mit |
Built with blockbuilder.org
forked from annabsmylie's block: quilt block
forked from annabsmylie's block: quilt block (random color)
<!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> |