This is something I built as a concept of randomizing art for my wife. It is brute force and perhaps later I will revisit it and optimize it.
Last active
September 25, 2015 00:13
-
-
Save TheMcMurder/9928471 to your computer and use it in GitHub Desktop.
Random Art concept (using d3.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> | |
<head> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
<title>Random Bars</title> | |
</head> | |
<body> | |
<div id='vis'></div> | |
<script type="text/javascript" src='randombars.js'></script> | |
</body> | |
</html> |
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
//********************************************************************************** | |
// This is something I built as a concept of randomizing art for my wife. | |
// It is brute force and perhaps later I will revisit it and optimize it. | |
//********************************************************************************** | |
var win_width = $(window).width(), win_height = $(window).height(); | |
var max_height = 300 | |
var min_height = 30 | |
var number_of_entries = 1000 | |
var columns = 30 | |
var svg_width = win_width | |
var svg_height = win_height | |
var color = get_color_scale() | |
var colorscale_length = color.length | |
var bar_width = svg_width/columns; | |
if (max_height > svg_height){ | |
max_height = svg_height | |
} | |
//bar height array | |
var dataset = new Array(); | |
for (var i = 0; i < number_of_entries; i++){ | |
dataset.push(randomFromInterval(min_height, max_height)) | |
} | |
//Create SVG element | |
var svg = d3.select('#vis') | |
.append('svg') | |
.attr('width', svg_width) | |
.attr('height', svg_height); | |
var bars = svg.selectAll('.bars') | |
.data(dataset) | |
//********************************************************************************** | |
// Enter | |
//********************************************************************************** | |
bars.enter() | |
.append('rect'); | |
//********************************************************************************** | |
// Update (merge) | |
//********************************************************************************** | |
bars.attr('width', bar_width) | |
.attr('height', function(d){return d}) | |
.attr('class', 'bars') | |
.style('fill', function(d,i){ | |
return color[randomFromInterval(0, color.length-1)] | |
}) | |
.attr('id', function(d,i){ | |
return 'Individual_Rectangle'+i | |
}) | |
.attr('x', function (d,i){ | |
return ((i%columns) * bar_width) | |
}) | |
.attr('y', function (d,i){ | |
var bar_number = +d3.select(this).attr('id').replace('Individual_Rectangle', '') | |
var bar_above = bar_number - columns; | |
if (bar_above < 0){ | |
return 0; | |
} | |
else{ | |
var temp_rect = d3.select('#Individual_Rectangle' + bar_above) | |
return temp_rect.node().getBBox().height + temp_rect.node().getBBox().y | |
} | |
}); | |
//********************************************************************************** | |
// exit | |
//********************************************************************************** | |
bars.exit() | |
.remove(); | |
function randomFromInterval(from,to) | |
{ | |
return Math.floor(Math.random()*(to-from+1)+from); | |
} | |
function get_color_scale(){ | |
return ['#000000','#555555','#999999','#BEBEBE','#D3D3D3','#F0F0F0','#F5F5F5'] | |
// return ['#D9EBFD','#B7DAF5','#90c4e4','#73B0D7','#4E8CBA','#31689B'] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment