Built with blockbuilder.org
forked from annabsmylie's block: quilt block
Last active
September 30, 2016 02:40
-
-
Save annabsmylie/71684611ee9f25d417dea96baaee9bcb to your computer and use it in GitHub Desktop.
quilt block (random color)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment