Created
November 1, 2013 17:50
-
-
Save Solido/7269124 to your computer and use it in GitHub Desktop.
Render a contemporary art piece using SVG and AngularJS. Note the code can be simplified by using the latest lodash updated and removing chance.js
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> | |
| <html ng-app> | |
| <head> | |
| <title> | |
| </title> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script> | |
| <script type="text/javascript" src="lodash.js"></script> | |
| <script type="text/javascript" src="chance.js"></script> | |
| </head> | |
| <body> | |
| <style type="text/css"> | |
| .info { | |
| color: #eecc78; | |
| } | |
| body { | |
| margin : 0; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| function ChartCtrl($scope, $http, $window) { | |
| function square (prcs, x, y, width, height, space, w) { | |
| var prc = _.head(prcs); | |
| var prc_srf = space * prc / 100; | |
| var segment = 0; | |
| if(w) { | |
| segment = prc_srf / height; | |
| } else { | |
| segment = prc_srf / width; | |
| } | |
| console.log("%s%, %s, %s", prc, prc_srf, segment); | |
| if(w) { | |
| var section = width - segment; | |
| var surface = { x:x, y:y, w:segment, h:height, s:prc_srf}; | |
| if(prcs.length==0) { | |
| return surface; | |
| } else { | |
| return [surface,square(_.tail(prcs), x +segment, y, section, height, space, false)]; | |
| } | |
| } else { | |
| var section = height - segment; | |
| var surface = { x:x, y:y, w:width, h:segment, s:prc_srf}; | |
| if(prcs.length==0) { | |
| return surface; | |
| } else { | |
| return [surface,square(_.tail(prcs), x, y+ segment, width, section, space, true)]; | |
| } | |
| } | |
| } | |
| function genLayout() { | |
| var t = 0; | |
| var s = []; | |
| while(t<100) { | |
| var rdm = chance.integer({min: 15, max: 40}); | |
| if( t + rdm < 100) { | |
| t = t + rdm; | |
| s.push(rdm); | |
| } else { | |
| var last = 100 - t; | |
| t = t + last; | |
| s.push(last); | |
| } | |
| } | |
| return s; | |
| } | |
| var wparts = 10, | |
| hparts = 6; | |
| var width = $window.innerWidth / wparts, | |
| height = $window.innerHeight / hparts; | |
| layout = []; | |
| for(i=0; i<wparts; i++) { | |
| for(j=0; j<hparts; j++) { | |
| layout.push({ | |
| x : i*width, | |
| y : j*height, | |
| layout:genLayout(), | |
| }); | |
| } | |
| } | |
| $http.jsonp('http://www.colourlovers.com/api/palettes/random?format=json&jsonCallback=JSON_CALLBACK').success(function(data){ | |
| var colors = data[0].colors; | |
| var sections = _.map(layout, function respace (area) { | |
| return square(area.layout, area.x, area.y, width, height, width * height, true); | |
| }); | |
| var areas = _.flatten(sections).map(function hello (area) { | |
| return { | |
| height: area.h, | |
| width: area.w, | |
| y: area.y, | |
| id: chance.word(), | |
| color: colors[_.random(colors.length-1)], | |
| x:area.x} | |
| }); | |
| $scope.r2 = areas; | |
| }); | |
| } | |
| </script> | |
| <div ng-controller="ChartCtrl"> | |
| <svg> | |
| <g id="{{entry.id}}" ng-repeat="entry in r2"> | |
| <rect class='entry' | |
| style="fill:{{entry.color}};fill-opacity:1" | |
| id="{{entry.id}}" | |
| width="{{entry.width}}" | |
| height="{{entry.height}}" | |
| x="{{entry.x}}" | |
| y="{{entry.y}}"> | |
| </rect> | |
| </g> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment