Built with blockbuilder.org
Last active
October 3, 2016 00:41
-
-
Save annabsmylie/c5d78ddbcd7cf12985a91b3e6bf10dbe to your computer and use it in GitHub Desktop.
quilt block
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-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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment